WPF rounded corner textbox

Question

I don't know WPF and am now learning it. I was looking for rounded corners TextBox in WPF. So I searched Google and found a piece of XAML :

 <!–Rounded Corner TextBoxes–>
<ControlTemplate x:Key=”RoundTxtBoxBaseControlTemplate” TargetType=”{x:Type Control}”>
<Border Background=”{TemplateBinding Background}” x:Name=”Bd” BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}” CornerRadius=”6″>
<ScrollViewer x:Name=”PART_ContentHost”/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property=”IsEnabled” Value=”False”>
<Setter Property=”Background” Value=”{DynamicResource {x:Static SystemColors.ControlBrushKey}}” TargetName=”Bd”/>
<Setter Property=”Foreground” Value=”{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}”/>
</Trigger>
<Trigger Property=”Width” Value=”Auto”>
<Setter Property=”MinWidth” Value=”100″/>
</Trigger>
<Trigger Property=”Height” Value=”Auto”>
<Setter Property=”MinHeight” Value=”20″/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>

So please tell me where to paste this XAML. Please help me in detail. I am a beginner in WPF.

Feeley

Answer 1

In WPF you can modify or recreate the look and feel of controls. So if your example what they have done is they changed the appearance of the TextBox by modifying the ControlTemplate of the existing TextBox. So to see and explore the piece of code just use the below code

<Window x:Class="WpfApplication4.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Window.Resources>
    <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
        <Border Background="{TemplateBinding Background}" 
                x:Name="Bd" BorderBrush="Black"
                BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10"> 
            <ScrollViewer x:Name="PART_ContentHost"/>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" TargetName="Bd"/>
                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
            </Trigger>
            <Trigger Property="Width" Value="Auto">
                <Setter Property="MinWidth" Value="100"/>
            </Trigger>
            <Trigger Property="Height" Value="Auto">
                <Setter Property="MinHeight" Value="20"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
</Window.Resources>
<Grid>
    <TextBox Template="{StaticResource TextBoxBaseControlTemplate}" Height="25" Margin="5"></TextBox>
</Grid>

So we have declared a static resource in the Resource section of the Window and we have used the Resource TextBoxBaseControlTemplate in the Template property of the TextBox as Template="{StaticResource TextBoxBaseControlTemplate}" .

Templates to Customize WPF Controls just refere this document to get an idea

http://msdn.microsoft.com/en-us/magazine/cc163497.aspx

Janitor

Answer 2

@Smolla had a much better answer in his comment on @Daniel Casserly's answer:

<TextBox Text="TextBox with CornerRadius">
  <TextBox.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="CornerRadius" Value="3"/>
    </Style>
  </TextBox.Resources>
</TextBox>

If you want all the borders of TextBoxes and ListBoxes to have rounded corners, put the style into your Window's or App's <Resources>.

Muslin

This answer is much better, IMHO. The accepted answer is a good explanation of WPF concepts, but this answer is all about "getting it done elegantly." – Gath

Answer 3

You can change all textboxes to have rounded corners by using the following style:

<Style TargetType="{x:Type TextBox}">
  <Style.Resources>
    <Style TargetType="{x:Type Border}">
      <Setter Property="CornerRadius" Value="3" />
    </Style>
  </Style.Resources>
</Style>

Inspired by the following answer: https://mcmap.net/q/831489/-wpf-nested-styles

Consultation

And also an exact duplicate of stackoverflow.com/a/31556325, posted three years earlier. – Villainage

Answer 4

Just set BorderThicknessof textbox to zero add a border around textbox.

 <Border BorderThickness="1" BorderBrush="Black" CornerRadius="10" Padding="2"
        HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBox Text="Hello ! " BorderThickness="0"/>
 </Border>

Output is as shown in image!

Hoelscher

Answer 5

this question is well discussed at msdn: http://social.msdn.microsoft.com/forums/en-US/wpf/thread/549775ed-1c2a-4911-9078-d9c724294fb3/

Try the solutions there, they are in quite a lot of detail and certainly enough detail for you to know where to put the code.

Phototube

The last one at this thread I found helpful for simple solutions: <TextBox Text="TextBox with CornerRadius"> <TextBox.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="CornerRadius" Value="3"/> </Style> </TextBox.Resources> </TextBox> – Samsara

Answer 6

You can use attached properties for setting TextBox border radius (also the same will work for buttons).

Create class for attached property

public class CornerRadiusSetter
{
    public static CornerRadius GetCornerRadius(DependencyObject obj) => (CornerRadius)obj.GetValue(CornerRadiusProperty);

    public static void SetCornerRadius(DependencyObject obj, CornerRadius value) => obj.SetValue(CornerRadiusProperty, value);

    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.RegisterAttached(nameof(Border.CornerRadius), typeof(CornerRadius),
            typeof(CornerRadiusSetter), new UIPropertyMetadata(new CornerRadius(), CornerRadiusChangedCallback));

    public static void CornerRadiusChangedCallback(object sender, DependencyPropertyChangedEventArgs e)
    {
        Control control = sender as Control;

        if (control == null) return;

        control.Loaded -= Control_Loaded;
        control.Loaded += Control_Loaded;
    }

    private static void Control_Loaded(object sender, EventArgs e)
    {
        Control control = sender as Control;

        if (control == null || control.Template == null) return;

        control.ApplyTemplate();

        Border border = control.Template.FindName("border", control) as Border;

        if (border == null) return;

        border.CornerRadius = GetCornerRadius(control);
    }
}

Then you can use attached property syntax to style multiple textboxes without style duplicates:

<TextBox local:CornerRadiusSetter.CornerRadius="10" />
<TextBox local:CornerRadiusSetter.CornerRadius="5, 0, 0, 5" />
<TextBox local:CornerRadiusSetter.CornerRadius="10, 4, 18, 7" />

Sherrilsherrill

This looks extremely more complex for someone who's new compared to the other answers. – Peroxy

@Peroxy 1. This is much easier than the accepted answer and will work for different controls so you won't have to duplicate code. 2. I'm not sure other answers will work in case you want to have rounded corners for some controls or have different radius for them so it's more flexible choise. 3. Someone who's new might know C# but know very little about XAML so it's questionable. – Sherrilsherrill

Answer 7

Do it the hard way.

Create a new empty WPF project in Visual Studio. Add a TextBox to the main Window. Then put your mouse over the TextBox, right click and choose Edit Template, Edit a Copy.... In the dialog box that appears, choose Apply to all & This document.

You now have a copy of the TextBox template. Now look at the Border with the name border. Simply add a CornerRadius to that.

Next copy/paste this code in your App.xaml, in /Application/Application.Resources/ResourceDictionary.

It takes more time than the other solution, it's more complicated but it's cleaner and once you've mastered this process, you'll be able to do whatever you want with WPF.

This is an interesting read.

Roselleroselyn