wpfxamltextboxcontroltemplatekeyboard-navigation

Why do I have to press tab twice to get to textbox with this control template?


I have created a ControlTemplate for a TextBox that includes a label for it. However, When I try to use Tab to navigate the controls I have to press tab twice to enter the textbox field, as if it's focusing on another element inside. I tried messing the labels focusability and what not but that doesn't seem to be the issue. Here is the code:

<ControlTemplate x:Key="custTextbox" TargetType="{x:Type TextBox}">
    <Canvas x:Name="customTextbox">
        <Border CornerRadius="3, 0, 0 ,3"  BorderThickness="1, 1, 0, 1" 
                Height="30" x:Name="brdTextboxLabel" Width="98">
            <Border.BorderBrush>
                <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                    <GradientStop Color="#3C3F48" Offset=".88"/>
                    <GradientStop Color="#9CA1A8" Offset=".96"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Background>
                <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                    <GradientStop Color="#414447" Offset="0"/>
                    <GradientStop Color="#4E525B" Offset=".08"/>
                </LinearGradientBrush>
            </Border.Background>
            <Canvas>
                <Rectangle Height="24" x:Name="rectangle3" Stroke="#636369" 
                           Width="1" Canvas.Left="96" Canvas.Top="2" />
                <Label Canvas.Left="0" Padding="9,6.5,0,0" Foreground="#BABBBF" 
                       FontWeight="Bold" Canvas.Top="0" FontSize="11" 
                       Content="{TemplateBinding Tag}" Height="28" 
                       x:Name="lblTextboxHeader" Width="92" />
            </Canvas>
        </Border>
        <!-- ========================================= -->
        <Border CornerRadius="0,3,3,0" BorderThickness="0,1,1,1" Canvas.Left="98" 
                Height="30" x:Name="brdTextbox" Width="348">
            <Border.BorderBrush>
                <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                    <GradientStop Color="#3C3F48" Offset=".88"/>
                    <GradientStop Color="#9CA1A8" Offset=".96"/>
                </LinearGradientBrush>
            </Border.BorderBrush>
            <Border.Background>
                <LinearGradientBrush StartPoint=".5, 0" EndPoint=".5, 1">
                    <GradientStop Color="#414447" Offset="0"/>
                    <GradientStop Color="#4E525B" Offset=".08"/>
                </LinearGradientBrush>
            </Border.Background>
            <Canvas>
                <TextBox TabIndex="0" Background="Transparent" CaretBrush="#8C8CA1"
                         FontSize="16" Padding="4, 3, 0 ,0" BorderBrush="Transparent" 
                         Foreground="#D4D5DA" Canvas.Left="0" Canvas.Top="-1" 
                         Height="30" x:Name="textBox1" Width="347"/>
            </Canvas>
        </Border>
    </Canvas>
</ControlTemplate>

Sorry if it's a mess of a ControlTemplate, it was the first I had ever made when starting wpf/xaml.

Thank you for your time!


Solution

  • HA! Figured it out while solving an issue on another control.

    The problem was I, essentially, had 2 TextBoxes each time I used the template.

    a simple map would be:

    <TextBox>
        <ControlTemplate>
            <Label/>
            <Textbox/>
        </ControlTemplate>
    </TextBox>
    

    So I just had to make the control I put in the window have KeyboardNavigation.IsTabStop="false" So it would pass that textbox and go to the one inside my ControlTemplate.