MoveFocus from one listBox to another

Question

I have the Output something like Windows 8 Start Menu.

Here is screen-shot of my Output:

I have successfully got that output by getting help from this question.

XAML for achieving the below output:

<ItemsControl ItemsSource="{Binding MenuCategories}" >

    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel IsItemsHost="True" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>

                <TextBlock Text="{Binding Title}" FontSize="30" />

                <ListBox Grid.Row="1" x:Name="lst" ItemsSource="{Binding Design_Master_TileItem}" BorderThickness="0"
                         SelectedItem="{Binding DataContext.SelectedTile, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Page}}}"
                         helpers:SingleSelectionGroup.SelectionGroup="Group">

                    <ListBox.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapPanel IsItemsHost="True" Orientation="Vertical" MaxHeight="{Binding ElementName=lst, Path=ActualHeight}"/>
                        </ItemsPanelTemplate>
                    </ListBox.ItemsPanel>

                    <ListBox.Resources>
                        <Style TargetType="{x:Type ListBoxItem}">
                            <Setter Property="Width" Value="250" />
                            <Setter Property="Height" Value="125" />
                            <Setter Property="Margin" Value="2.5" />
                            <Setter Property="Padding" Value="2.5" />
                            <Setter Property="Background" Value="{Binding Background, Converter={StaticResource stringToBrushConverter}}" />
                            <Setter Property="Foreground" Value="White" />
                            <Setter Property="VerticalContentAlignment" Value="Bottom" />
                            <Style.Triggers>
                                <Trigger Property="IsSelected" Value="True">
                                    <Setter Property="Foreground" Value="{Binding Background, Converter ={StaticResource stringToBrushConverter}}" />
                                </Trigger>
                                <Trigger Property="IsKeyboardFocusWithin" Value="True">
                                    <Setter Property="IsSelected" Value="True"></Setter>
                                </Trigger>
                            </Style.Triggers>
                        </Style>
                    </ListBox.Resources>

                    <ListBox.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Height="125" Width="250">
                                <Path Data="{Binding ImageData}"  VerticalAlignment="Center" 
                                      Stretch="Uniform" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"
                                      Width="68" Height="68" Margin="10" RenderTransformOrigin="0.5,0.5">
                                    <Path.RenderTransform>
                                        <TransformGroup>
                                            <TransformGroup.Children>
                                                <RotateTransform Angle="0" />
                                                <ScaleTransform ScaleX="1" ScaleY="1" />
                                            </TransformGroup.Children>
                                        </TransformGroup>
                                    </Path.RenderTransform>
                                </Path>
                                <TextBlock Text="{Binding Title, Converter={StaticResource spaceToNewLineConverter}}" VerticalAlignment="Top" 
                                           Margin="40,10,10,10" FontSize="24" Foreground="{Binding Path=Foreground, RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}}"/>
                            </StackPanel>
                        </DataTemplate>
                    </ListBox.ItemTemplate>

                </ListBox>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

So, from the above code you might have understood that Group and Ledger are two items of listbox1. and other four are the items of listbox2.

Requirements:

Suppose, ItemA1 is selected in listboxA.

Case1: New Behavior

If ListBoxA does not have any items on the right side of Item1, then when I press right arrow key the focus should move to the ItemB1 of listboxB. Likewise if ItemA2 of listboxA is selected then the focus should move to the ItemB2 of ListBoxB.

Case2: Default Behavior

If ListBoxA has some items on the right hand side of ItemA1, then that item should be selected by pressing right arrow key. I have this behavior by default but I don't want to disturb it. I mean while implementing Case1 I don't want to loose the default behavior.

Answer 1

Your Current xaml code working fine here.. Please refer this link for KeyBoardNavigation Keyboardnavigation

You need to add only KeyboardNavigation.DirectionalNavigation="Continue" KeyboardNavigation.TabNavigation="Continue" to listbox and it works as expected.

   <ItemsControl KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="1" Focusable="False"  >
        ...

        <ListBox Grid.Row="1" x:Name="lst" KeyboardNavigation.DirectionalNavigation="Continue" KeyboardNavigation.TabNavigation="Continue"   BorderThickness="0"/>
    ..

   </ItemsControl>

Answer 2

Moving the focus from one ListBox to another within various items requires difficult logic. Instead you can use a single ListBox with grouping based on the Header. The GroupStyle Panel can be changed to stackpanel with horizontal orientation to achieve your UI. I tried like that and the focus works as expected,

<ListBox ItemsSource="{Binding Source={StaticResource source}}" DisplayMemberPath="Name">
        <ListBox.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"/>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </ListBox.GroupStyle>
    </ListBox>