GridView 的 DataTemplate 中的焦点控制答案

【问题标题】：Focus control within DataTemplate of GridViewGridView 的 DataTemplate 中的焦点控制
【发布时间】：2018-01-06 22:57:45
【问题描述】：

我有一个 GridView，它使用 DataTemplate 提供 UI，以便用户可以管理对数据服务的订阅。 DataTemplate 包含文本和图像以及按钮和切换按钮。在移动和桌面上使用此功能，用户可以点击或单击控件中的按钮。在桌面上，您甚至可以在控件内 Tab 并选择按钮。但是在 Xbox 上我只能专注于每个 DataTemplate 项目，我不能让它专注于里面的按钮，有没有办法在不启用 Xbox 上的鼠标模式的情况下解决这个问题？

<DataTemplate x:Key="DataTemplate1">
        <Grid Background="#33FFFFFF">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Image HorizontalAlignment="Center" Height="100" VerticalAlignment="Center" Width="80" Source="{Binding TEAMID, Converter={StaticResource uriConverter}}" Grid.RowSpan="3"/>
            <TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="{Binding TEAMNAME}" VerticalAlignment="Top" Grid.Column="1"/>
            <Button Content="Unsubscribe" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="1" Grid.Column="1" Tag="{Binding TEAMID}" Tapped="Button_Tapped"/>
            <ToggleButton x:Name="subscribe_tb" Content="&#xE840;" HorizontalAlignment="Center" FontFamily="Segoe MDL2 Assets" Tag="{Binding TEAMID}" IsChecked="{Binding isPinned}" Grid.Row="3" Grid.Column="1" Unchecked="subscribe_tb_Unchecked" Checked="subscribe_tb_Checked"/>
        </Grid>
</DataTemplate>

【问题讨论】：

所以当你导航时，它只是忽略了里面的按钮，或者你看不到任何焦点视觉？
焦点视觉在外框（基本上是网格）周围，您不能使用控制器将焦点移动到里面的按钮，只能移动到下一个数据模板项等
这可能是一个长镜头，但我认为您可以尝试首先在您的GridView 上启用IsFocusEngagementEnabled，然后在您的GridViewItem 样式中将IsTabStop 设置为False。跨度>
不幸的是，将 IsFocusEngagementEnabled 添加到 GridView 意味着整个 GridView 都有焦点，然后您必须选择它才能将焦点放在里面的 GridViewItems 上。
这可能是为了更好的实践。想象一下，当用户想要将控件集中在该控件下方时，他需要先检查GridView 中的所有内容。但如果你不想要这个，没关系。您是否也尝试禁用 GridViewItem 的 IsTabStop？

标签： xaml gridview uwp uwp-xaml xbox-one

【解决方案1】：

通过改变GridView.ItemContainerStyle的Style解决：

<GridView.ItemContainerStyle>
                <Style TargetType="GridViewItem">
                    <Setter Property="IsFocusEngagementEnabled" Value="True"/>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
</GridView.ItemContainerStyle>

【讨论】：