Geek Answers Handbook

MoveFocus from one Box list to another

I have an Output something like Windows 8 Start Menu.

Here is a screenshot of my output:

enter image description here

I successfully got this conclusion, getting help from this question.

XAML to achieve the result below:

<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 may have realized that Group and Ledger are two elements of box1. and the other four are elements of listbox2.

Requirements:

Suppose ItemA1 is selected in listboxA.

Case 1: New Behavior

If ListBoxA has no items on the right side of Item1, then when I press the right arrow key, the focus should move to ItemB1 of the listB. Similarly, if ItemA2 is selected from the boxA list, the focus should go to ItemB2 ListBoxB.

Case 2: default behavior

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

+3
source share
2 answers

Your current xaml code works fine here .. Please refer to this link for KeyBoardNavigation Keyboardnavigation

You need to add only KeyboardNavigation.DirectionalNavigation = "Continue" to the list . KeyboardNavigation.TabNavigation = "Continue" and will work 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>
+3
source

Moving focus from one list to another in different elements requires complex logic. Instead, you can use a single ListBox with a header-based grouping. The GroupStyle panel can be changed to a horizontal horizontal stack panel to achieve your user interface. I tried it this way 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>
+2
source

More articles:


All Articles