Setting tab order in wpf when use from UserControls?

Question

I have a User Control like this:

<UserControl x:Class="MySample.customtextbox"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="20" d:DesignWidth="300">
<Grid>
    <TextBox x:Name="Ytextbox"  Background="Yellow"/>
</Grid>

And I use this control in a window and set tab orders...but when my window is loaded, the tab order is not working correctly!!! my window code:

<Window xmlns:my="clr-namespace:MySample"  x:Class="MySample.window"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="window" Height="300" Width="600">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>

    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

   <my:customtextbox Grid.Column="1" KeyboardNavigation.TabIndex="0" InfoText="{Binding msg}" Height="20"/>
    <TextBox Grid.Column="3" KeyboardNavigation.TabIndex="1" Text="{Binding msg}" Height="20" Background="Gold"></TextBox>
    <my:customtextbox Grid.Row="1" Grid.Column="1" KeyboardNavigation.TabIndex="2" InfoText="{Binding msg}" Height="20"/>
    <TextBox Grid.Column="3"  Grid.Row="1"  Text="{Binding msg}" Height="20" KeyboardNavigation.TabIndex="3" Background="Gold"></TextBox>

</Grid>

Answer 1

By default, WPF reads all the controls, inside and outside your UserControl, at the same tab level. Since the controls inside your UserControl do not have a TabIndex specified, they get tabbed to last after the first tab cycle.

The workaround I usually use is to set the IsTabStop="False" on my UserControl (to prevent tabbing onto the UserControl itself), and then inside the UserControl use a TemplateBinding to bind to the inner Controls TabIndex to the UserControl's TabIndex

<TextBox x:Name="Ytextbox"  Background="Yellow"
         TabIndex="{Binding Path=TabIndex, 
         RelativeSource={RelativeSource AncestorType={x:Type local:customtextbox}}}"/>

and

<my:customtextbox IsTabStop="False" KeyboardNavigation.TabIndex="0" 
                  Grid.Column="1" InfoText="{Binding msg}" Height="20"/>