TextBox with rounded corners

TextBox with rounded corners

• FuZi0n

  You should look what you can achieve with a template for your textbox.
  
  When I saw your question, I was curious, so I tried something. You can edit the template of a textbox. Ad a grid to an empty template, then add a rectangle to the grid, set radiusX and radiusY as you want and then add a textbox to the grid and keep his corners in the rounded rectangle. You can prolly do this in an easier way, but this does the trick.
  
  hope this helps
  
  

• webcliff

  And if you set the borderwidth to 0 on the TextBox it won't be visible so just the rectangle in the template shows up.
  

• Jo?ko

  I hadn't done this before...here is what I did with ID (Expression Interactive Designer, have people come up with a short name for this yet )

  Drop a TextBox on a page.

  Right click/Edit Template/Edit a copy of the template.

  At that point...under the covers a template is created in a resources section of your page or app (you choose):

  It contains:

  <ControlTemplate x:Key="TextBoxBaseControlTemplate" TargetType="{x:Type TextBoxBase}">
  <Border Background="{TemplateBinding Background}" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
  <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>

  You notice that the Control Template already contains a Border in it.
  In the template designer or in the xaml, set Border's CornerRadius to 10.

  It works.

  Let us know how that goes...
  If this is a common feature request, TextBox could expose a BorderRadius property and build a TemplateBinding in the CornerRadius of the Border in the template.

  I'll ask the TextBox owners if they considered that...

  (just for fun, i added a new state to mimic some behavior I saw in a dialog in Vista recently...When IsMouseOver == false, I made BorderBrush Transparent...)

  Thx, Rob
  WPF, PM
  http://longhornblogs.com/rrelyea

  
  
• TextBox with rounded corners