How to round off the edges of a TextBox?
- oneOverride the pattern. - VladD
- How to remake? Save the newbie :) - Denisok
- Now I will write, wait :) - VladD
- Done, try. - VladD
1 answer
There are several ways.
The correct way is you can override the pattern / style. This is done in Visual Studio 2015. I’m doing it for WPF, but for UWP it’s supposed to be the same. (In older versions of Visual Studio, the style could not be pulled out, and you had to use Expression Blend, or search the documentation.)
A simpler way, without a template, with manual creation of the layout below.
For starters, get somewhere ordinary TextBox . Go to the visual designer, and open the menu:
Select the "Edit Template" menu:
For God's sake, do not leave the default name TextBoxStyle1 !
You will see the current style, which determines how the TextBox looks. It will be defined either in the resources of the current window, or the entire application, as you choose. Find the template override in the style, and in it the Border :
Add some CornerRadius value to CornerRadius :
<Border x:Name="border" CornerRadius="7" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True"> <ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/> </Border> (do not copy my text, but add CornerRadius to what you have!) Use this same style for other text boxes. Or remove x:Key from it so that it applies to all text boxes in general.
It's time to run:
Done!
If you want, the value of the radius of the rounding can be attached to the attached property.
A simpler solution is to “turn off” the border at TextBox 'a and put the Border on top:
<Border CornerRadius="7" BorderBrush="#FFABADB3" BorderThickness="1" VerticalAlignment="Center" UseLayoutRounding="True"> <TextBox BorderThickness="0" Background="Transparent"/> </Border> You most likely do not need VerticalAlignment="Center" , UseLayoutRounding="True" allows you to look unwashed; BorderBrush="#FFABADB3" had to be "dragged" from the previous solution, Background="Transparent" and Border need TextBox not to overlap rounded corners.
- Wow .... Thank you so much for giving me so much time) Very useful information! I'm going to try - Denisok
- @Denisok: Please! I would be glad if it helped. - VladD
- And to make a shadow effect (so that the textboxes “fly” over the page) is also done in the visual designer? - Denisok
- one
- one



