Tab order and index in WPF usign the MVVM pattern

Question

I'm having an issue with tabbing through the controls on a WPF application using the MVVM pattern. I have the following XAML which defines a tree structure

<Grid Background="Transparent" Margin="10">
    <TreeView ItemsSource="{Binding FirstLevelNavigableViewModels}" Background="Transparent" 
              HorizontalContentAlignment="Stretch"
              HorizontalAlignment="Stretch"
              BorderThickness="0"
              ItemContainerStyle="{StaticResource TreeViewItemStyle1}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type ViewModel:VendorViewModel}" ItemsSource="{Binding Children}">
                <View:VendorView HorizontalContentAlignment="Stretch" />
            </HierarchicalDataTemplate>

            <DataTemplate DataType="{x:Type ViewModel:ProductViewModel}">
                <View:ProductView HorizontalContentAlignment="Stretch" />
            </DataTemplate>
        </TreeView.Resources>
    </TreeView>
</Grid>

When the treeview is loaded, the XAML for the "ProductView" is as follows

<Border Margin="0,2,2,2" CornerRadius="3" Background="#3FC7B299" DockPanel.Dock="Right" HorizontalAlignment="Right" Width="109">
    <StackPanel Orientation="Vertical" Margin="6,4">
        <DockPanel>
            <TextBlock  DockPanel.Dock="Left" FontFamily="Segoe" FontSize="10" FontWeight="Medium"
                        Foreground="Black" Opacity="0.75" 
                        Text="CALC. REG. PRICE"></TextBlock>
            <Button Width="10" Height="10" Background="Transparent" BorderBrush="Transparent" BorderThickness="0" Padding="-4" Margin="0" Command="{Binding UserDefinedRetailPriceCommand}" Visibility="{Binding UserDefinedRetailPriceButtonView}">
                <Image Width="10" Height="10" Source="/Arhaus.Pricing.Client;component/Styles/Images/error.png"></Image>
            </Button>
        </DockPanel>
        <TextBox    FontFamily="Segoe" FontSize="16" FontWeight="Medium" KeyboardNavigation.IsTabStop="True" KeyboardNavigation.TabIndex="{Binding RegularPriceTabIndex}"
                    Foreground="Black" Opacity="0.9" KeyboardNavigation.TabNavigation="Continue"
                    ebf:LostFocusBehaviour.LostFocusCommand = "{Binding LostFocusSugg}"
                    Text="{Binding NewSuggestedRetailPrice,Converter={StaticResource FormattingConverter}, ConverterParameter=' \{0:C\}', Mode=TwoWay, UpdateSourceTrigger=LostFocus}" Background="#FFE6DED3" BorderBrush="#FFE6DED3" DataContext="{Binding StringFormat=\{0:c\}, NotifyOnValidationError=True}" Padding="0" TabIndex="1"></TextBox>
    </StackPanel>
</Border>

I have the Tab Index bound to an integer that is ever increasing and bound as the treeview is loaded (I.E. I have it setup as tab index 1, 2, 3 etc. as each successive model is loaded).

I would like to be able to hit tab and jump to the next textbox in the treeview but when I click the TAB key, nothing happens. I'm not sure if I have the tabbing setup correctly but I'm very new to WPF and at a loss as to where and how to set the tabbing to make it work. I'm used to WinForms where you just set the tab index and go from there.

Thank you for your assistance, I apologize for the large code block.

Answer 1

I don't have a solution ready but some thoughts that maybe may help:

I don't know what RegularPriceTabIndex returns but probably it begins for each new TreeViewItem at the same index? The same tab-index is given then multiple times because of repeating use of ProductView. Perhaps this leads to a problem. You can try setting FocusManager.IsFocusScope="true" for the ProductView. Maybe this helps.

Try also to set Control.IsTabStop="true" on the TextBox.