WPF custom textbox tab index focusing

Question

i have this style of textboxes. when i use it and try to cycle through my content using Tab button textboxes using this style gains focus after hitting the Tab button two times. In the first Tab hit though, the "Focused" state animation works but the caret is not there. I hit tab again and the caret appears.

<Style x:Key="MPTextBox" TargetType="{x:Type TextBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type TextBox}">
                        <Border x:Name="border" BorderBrush="#FFEF7B54" BorderThickness="2" Background="White" CornerRadius="5">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="Disabled"/>
                                    <VisualState x:Name="ReadOnly"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                                <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF57C0AF"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                                <EasingColorKeyFrame KeyTime="0" Value="#FFED4B15"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <TextBox Background="{x:Null}" BorderBrush="{x:Null}" CaretBrush="#FFF05A29" BorderThickness="0" Margin="5,5,5,0" FontFamily="Public Enemy NF" FontSize="16" Foreground="#FFF05A29" HorizontalAlignment="Stretch" d:LayoutOverrides="Width, Height" VerticalAlignment="Stretch" Text="{Binding Text, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

I want to have it all happening on only one Tab hit.

Another thing with this textbox is that if i am trying to access the Text property in an event handler for example KeyDown event it shows null and the text within the control is never set until the textbox loses focus.

Vishwaram Sankaran Vishwaram Sankaran · Accepted Answer · 2013-12-22T09:16:58

the problem here is Textbox present inside the control template.

If you have event for TextBox in the control template you can know the text is captured by the control template's textbox and only on lostFocus, it sets to the outerTextBox(where style is applied) .If you want for each chars the text to be updated in outer text then specify the code UpdateSourceTrigger=PropertyChanged in control template's textBox. By default only on lost focus, the value in control Template's text box is updated in outer TextBox(where style is applied).
Regarding dual focus, it is because of Border and then a Textbox.

But the below is the correct way to define ControlTemplate for a textBox so define caretBrush, Border brush in the setter as below

<Style x:Key="MPTextBox" TargetType="{x:Type TextBox}">

        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Microsoft_Windows_Themes:ClassicBorderDecorator x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" BorderStyle="Sunken" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="ReadOnly"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                            <EasingColorKeyFrame KeyTime="0:0:0.5" Value="#FF57C0AF"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="border">
                                            <EasingColorKeyFrame KeyTime="0" Value="#FFED4B15"/>
                                        </ColorAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ScrollViewer x:Name="border" FontWeight="Bold">
                            <ScrollViewer.Background>
                                <!-- Button: common to all buttons -->
                                <SolidColorBrush Color="{DynamicResource VeryLightGray}"/>
                            </ScrollViewer.Background>
                        </ScrollViewer>                            
                    </Microsoft_Windows_Themes:ClassicBorderDecorator>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="{x:Null}"/>
        <Setter Property="CaretBrush" Value="{DynamicResource {x:static SystemColors.WindowTextBrushKey}}"/>

here xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic"

WPF custom textbox tab index focusing

1 Answers