UWP 删除 Gridview 中的焦点边框

Question

我对通用 Windows 平台 (UWP) 和 XAML 还是很陌生。

我有一个 GridView，它显示垂直堆叠的数据。这很好，但是当我按住 GridView.ItemTemplate/DataTemplate 之一时，我得到一个灰色边框：

我尝试将这些属性放在各种项目上，但没有成功：

FocusVisualPrimaryThickness="0" 
FocusVisualSecondaryThickness="0" 
FocusVisualPrimaryBrush="Black" 
FocusVisualSecondaryBrush="Black" 
FocusVisualMargin="0"

我也注意到这些属性。这是否意味着它尚未实施？：

这是我的代码：

<GridView x:Name="IconGridView"
                  Canvas.ZIndex="2"
                  Grid.Row="0"
                  Margin="398,728,402,107"
                  ItemClick="Clicked_On_Video_Preview_Image"
                  IsItemClickEnabled="True"
                  IsSwipeEnabled="True"
                  ItemsSource="{x:Bind _videoItems}"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ScrollViewer.HorizontalScrollMode="Enabled"
                  ScrollViewer.VerticalScrollMode="Disabled"
                  BorderThickness="0"  
                  SelectionMode="None"
                  BorderBrush="Black"
                  Background="Black" IsHoldingEnabled="False">

            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid Orientation="Vertical" Background="Black" />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>

            <GridView.ItemTemplate>
                <DataTemplate x:DataType="model:VideoItem">
                    <StackPanel Margin="30,0,30,0" HorizontalAlignment="Center" BorderThickness="0" BorderBrush="Black" Background="Black" Height="245">
                        <Grid>
                            <Border Name="PreviewBorder" BorderThickness="2" BorderBrush="#000000" Margin="0,55,0,55">
                                <Image Height="135" Width="240" Source="{x:Bind ThumbnailFilename}" Loaded="Video_Preview_Loaded" Stretch="UniformToFill" />
                            </Border>
                            <Image Margin="0,55,0,55" Height="29" Width="29" Source="Assets/play_vit.png" />
                            <TextBlock Margin="0,185,0,0" Text="{x:Bind Title}" CharacterSpacing="200" TextWrapping="WrapWholeWords" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="12" Foreground="white" Width="240" Height="45"/>
                        </Grid>
                    </StackPanel>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>

Answer 1

灰色边框是GridViewItem 模板的一部分。如果你想修改它，你需要创建你自己的模板。

您可以通过右键单击设计器中的控件，单击编辑样式，然后单击编辑副本轻松地做到这一点，这将为您提供默认样式和模板可根据您自己的需要进行修改。

就我而言，我根本不想修改模板，只是想摆脱它，所以我只是将模板替换为 ContentPresenter 以仅显示我自己的内容，如下所示：

<Style TargetType="GridViewItem">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="GridViewItem">
                <ContentPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                                  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                  Margin="{TemplateBinding Padding}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

如果您想知道所有这些 TemplateBinding 绑定来自哪里，我只是从默认样式中复制了它们。我本来可以写<ContentPresenter />，但我更喜欢这样写。

希望这回答了你的问题！

Answer 2

这是当用户使用 TAB 键更改焦点元素时为每个 GridViewItem 显示的焦点视觉对象。您可以移除焦点视觉效果，但现在它会降低您的应用的可访问性，因为人们将无法使用键盘来导航您的 UI（并且叙述者将无法读出焦点项目）。

<GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
        <Setter Property="IsTabStop" Value="False" />
    </Style>
</GridView.ItemContainerStyle>

相反，如果你想改变焦点视觉的外观，你需要在每个 GridViewItem 上设置Focus* 属性：

<GridView.ItemContainerStyle>
    <Style TargetType="GridViewItem">
        <Setter Property="FocusVisualPrimaryBrush" Value="Red" />
        <Setter Property="FocusVisualSecondaryBrush" Value="Blue" />
        <!-- etc -->
    </Style>
</GridView.ItemContainerStyle>