DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Build a Serverless App Fast With Zipper: Write TypeScript, Offload Everything Else
  • MuleSoft: Tactical and Strategical Role of an Application Template
  • Introduction To Template-Based Email Design With Spring Boot
  • The Power of Template-Based Document Generation with NLP and AI in Python

Trending

  • Exploring Sorting Algorithms: A Comprehensive Guide
  • Top 7 Best Practices DevSecOps Team Must Implement in the CI/CD Process
  • Writing Reusable SQL Queries for Your Application With DbVisualizer Scripts
  • Navigating the Skies

A TextBox With Rounded Corners Through WPF XAML

Denzel D. user avatar by
Denzel D.
·
Oct. 22, 12 · Tutorial
Like (0)
Save
Tweet
Share
47.43K Views

Join the DZone community and get the full member experience.

Join For Free

What is the first idea that comes to mind when someone mentions rounded corners and WPF? Probably Border. That is the right thing to think about, but how to apply it to a TextBox control?

There are two ways to achieve what you want.

Way A:

The most obvious thing would be creating a border around the control itself. Something like this:

<Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" Margin="91,192,150,79">
<TextBox Background=”Transparent” BorderThickness="0" Height="35" Name="txtContents" Width="254" />
</Border>

That should do the initial trick – the TextBox control has no border around it (the BorderThickness property is set to 0) while the Border that contains it sets the correct rounding, color and thickness.

Looking good, but the fun part comes around when you decide that this specific TextBox shouldn’t be enabled, so you set the IsEnabled property to False.  

What’s up with the rest of the white space between the border and the writing area? Doesn’t look like we want it to behave like this. And that’s where the second way to create rounded corners saves the day.

Way B:

It is a bit more complicated, but it gives a better result. What it does is it overrides the default control template for the TextBox. But how do I know how the default template looks like?

Since it is not possible to modify only one part of the template, the whole template should be overridden. To avoid functionality loss, I am going to get the default template and use it with small modifications.

To get the default style (that embeds the control template) for a TextBox control I am using the GetStyle method:

string GetStyle(Type t)
{
FrameworkElement element = (FrameworkElement)Activator.CreateInstance(t);
object styleName = element.GetValue(FrameworkElement.DefaultStyleKeyProperty);
Style style = Application.Current.TryFindResource(styleName) as Style;
StringWriter stringContainer = new StringWriter();
XmlTextWriter xmlWriter = new XmlTextWriter(stringContainer);
xmlWriter.Formatting = Formatting.Indented;
System.Windows.Markup.XamlWriter.Save(style, xmlWriter);
return stringContainer.ToString();
}

Since I am using the default control, without any custom styles attached, I can simply create an instance of TextBox and use its type as a parameter for the GetStyle method:

TextBox t = new TextBox();
Debug.Print(GetStyle(t.GetType()));

The output should look like this:

<Style TargetType="TextBox" xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation"">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a> xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml"">http://schemas.microsoft.com/winfx/2006/xaml"</a> xmlns:s="clr-namespace:System;assembly=mscorlib" xmlns:mwt="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
<Style.BasedOn>
<Style TargetType="TextBoxBase">
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlTextBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="Panel.Background">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.WindowBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="Border.BorderBrush">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,20" MappingMode="Absolute">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FFABADB3" Offset="0.05" />
<GradientStop Color="#FFE2E3EA" Offset="0.07" />
<GradientStop Color="#FFE3E9EF" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Border.BorderThickness">
<Setter.Value>
<Thickness>1,1,1,1</Thickness>
</Setter.Value>
</Setter>
<Setter Property="Control.Padding">
<Setter.Value>
<Thickness>1,1,1,1</Thickness>
</Setter.Value>
</Setter>
<Setter Property="UIElement.AllowDrop">
<Setter.Value>
<s:Boolean>True</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="FrameworkElement.FocusVisualStyle">
<Setter.Value>
<x:Null />
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.PanningMode">
<Setter.Value>
<x:Static Member="PanningMode.VerticalFirst" />
</Setter.Value>
</Setter>
<Setter Property="Stylus.IsFlicksEnabled">
<Setter.Value>
<s:Boolean>False</s:Boolean>
</Setter.Value>
</Setter>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="TextBoxBase">
<mwt:ListBoxChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.BasedOn>
<Style.Resources>
<ResourceDictionary />
</Style.Resources>
</Style>

That is a lot of XAML markup right there, but all we need is the control template:

<ControlTemplate TargetType="TextBoxBase">
<mwt:ListBoxChrome Background="{TemplateBinding Panel.Background}" BorderBrush="{TemplateBinding Border.BorderBrush}" BorderThickness="{TemplateBinding Border.BorderThickness}" RenderMouseOver="{TemplateBinding UIElement.IsMouseOver}" RenderFocused="{TemplateBinding UIElement.IsKeyboardFocusWithin}" Name="Bd" SnapsToDevicePixels="True">
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</mwt:ListBoxChrome>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Now, the ListBoxChrome wrapper should be removed and Border used instead, with the CornerRadius property assigned. The modified template looks like this:

<ControlTemplate TargetType="TextBoxBase" x:Key="txt">
<Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" x:Name="Bd" Background="{TemplateBinding Panel.Background}">
<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsEnabled">
<Setter Property="Panel.Background" TargetName="Bd">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.ControlBrushKey}" />
</Setter.Value>
</Setter>
<Setter Property="TextElement.Foreground">
<Setter.Value>
<DynamicResource ResourceKey="{x:Static SystemColors.GrayTextBrushKey}" />
</Setter.Value>
</Setter>
<Trigger.Value>
<s:Boolean>False</s:Boolean>
</Trigger.Value>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

Additionaly, I added x:Key to the template header so I can identify it in my application. Now, this template can be inserted in the Resources section for a WPF application. Since I am testing this on a windowed WPF application, I will insert this template inside Windows.Resources.

The reference to the s namespace should be added as well (used for the IsEnabled trigger):

xmlns:s="clr-namespace:System;assembly=mscorlib"

Now I am able to reference the template for a TextBox inside the window:

<TextBox Template="{StaticResource txt}" Background="Transparent" BorderThickness="0" Height="35" Name="textBox1" Width="254" />

Just the way it should be. In case you do not need to change the look of the control when it is disabled, you can simply remove the IsEnabled trigger from the template so all you will have is this:

<ControlTemplate TargetType="TextBoxBase" x:Key="txt">

<Border CornerRadius="5" BorderThickness="1" BorderBrush="Black" x:Name="Bd" Background="{TemplateBinding Panel.Background}">

<ScrollViewer Name="PART_ContentHost" SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />

</Border>

</ControlTemplate>

It will correctly render the border, but there won’t be a grayed-out background and modified foreground when the control is explicitly set as inactive.

Windows Presentation Foundation Template

Opinions expressed by DZone contributors are their own.

Related

  • Build a Serverless App Fast With Zipper: Write TypeScript, Offload Everything Else
  • MuleSoft: Tactical and Strategical Role of an Application Template
  • Introduction To Template-Based Email Design With Spring Boot
  • The Power of Template-Based Document Generation with NLP and AI in Python

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: