问题描述

我有类似 Windows 8 开始菜单的输出.

I have the Output something like Windows 8 Start Menu.

这是我的输出的屏幕截图:

Here is screen-shot of my Output:

通过从 这个问题.

XAML 用于实现以下输出:

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>

所以，从上面的代码你可能已经明白 Group 和 Ledger 是 listbox1 的两项.其他四个是listbox2的项目.

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.

要求:

假设，ListboxA 中的 ItemA1 被选中.

Suppose, ItemA1 is selected in listboxA.

案例 1:新行为

如果 ListBoxA 在 Item1 的右侧没有任何项目，那么当我按右箭头键时，焦点应移动到 listboxB 的 ItemB1.同样，如果 listboxA 的 ItemA2 被选中，那么焦点应该移到 ListBoxB 的 ItemB2.

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.

案例 2:默认行为

如果 ListBoxA 在 ItemA1 的右侧有一些项目，则应通过按右箭头键选择该项目.我默认有这种行为，但我不想打扰它.我的意思是在实现 Case1 时，我不想放弃默认行为.

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.

推荐答案

您当前的 xaml 代码在这里工作正常.请参考此链接以获取 KeyBoardNavigation 键盘导航

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

您只需将 KeyboardNavigation.DirectionalNavigation="Continue" KeyboardNavigation.TabNavigation="Continue" 添加到列表框，它就会按预期工作.

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>

这篇关于MoveFocus 从一个列表框到另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！