wpf textbox flat border style wpf textbox flat border style wpf wpf

wpf textbox flat border style


The way to do this is to use a control template to draw the border yourself. You can do this in many different ways, heres a couple for you to look at.

The quick hack approach:

<TextBox>    <TextBox.Template>        <ControlTemplate TargetType="{x:Type TextBox}">            <Grid>                <Rectangle  Stroke="{StaticResource ResourceKey=detailMarkBrush}" StrokeThickness="1"/>                <TextBox Margin="1" Text="{TemplateBinding Text}" BorderThickness="0"/>            </Grid>        </ControlTemplate>    </TextBox.Template></TextBox>

and then theres using resources...

<ResourceDictionary>    <Color x:Key="detailMark">#FFA1A9B3</Color>    <SolidColorBrush x:Key="detailMarkBrush" Color="{StaticResource ResourceKey=detailMark}" />    <Style x:Key="flatTextBox" TargetType="{x:Type TextBox}">        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="{x:Type TextBox}">                    <Grid>                        <Rectangle  Stroke="{StaticResource ResourceKey=detailMarkBrush}" StrokeThickness="1"/>                        <TextBox Margin="1" Text="{TemplateBinding Text}" BorderThickness="0"/>                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style></ResourceDictionary>

and then you can use the style:

<TextBox Style="{StaticResource ResourceKey=flatTextBox}" />


<TextBox BorderThickness="1" BorderBrush="Black">

just try this by black or gray


This is better way to me, make a custom template with border, to override the default one.

And most important make ScrollViewer named PART_ContentHost, to fit inner TemplatePart, and for any other features work like default.

simular to example from MSDN:

<Style TargetType="TextBox">    <Setter Property="Template">        <Setter.Value>            <ControlTemplate TargetType="{x:Type TextBoxBase}">                <Border CornerRadius="2" Padding="2" Background="#19212F" BorderBrush="Red" BorderThickness="1">                    <ScrollViewer Margin="0" x:Name="PART_ContentHost" />                </Border>            </ControlTemplate>        </Setter.Value>    </Setter></Style>