I want to make a simple style for the textbox. I want to retain everything about the standard textbox look and feel except one item.
OnFocus on want to be able to change the border color of the textbox.
I have written the following and it does work. However, everything is restyled, I have to declare height, the look and feel of the non focused border is different as well. How can I create the template to just effect only the onfocus state.
<Style x:Key="TextBoxStyle" TargetType="TextBox">
<Setter Property="BorderBrush" Value="Gold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid Height="{TemplateBinding Height}"
>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver" />
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ColorAnimation Storyboard.TargetName="brd"
Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"
Duration="0"
To="Red" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="brd"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
CornerRadius="2">
<ContentPresenter x:Name="contentPresenter" />
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to duplicate the entire template of the original TextBox which you can find here. Then make the changes you need.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With