Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF rounded corner textbox

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.

like image 451
Thomas Avatar asked Jan 24 '11 07:01

Thomas


3 Answers

@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>.

like image 78
cheesus Avatar answered Sep 17 '22 17:09

cheesus


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

like image 30
Kishore Kumar Avatar answered Sep 20 '22 17:09

Kishore Kumar


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://stackoverflow.com/a/13858357/3387453

like image 40
Class Skeleton Avatar answered Sep 18 '22 17:09

Class Skeleton