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視覺的焦點，當用戶使用TAB鍵改變焦點元素。您可以刪除焦點視覺效果，但它現在會讓您的應用程序變得更難以訪問，因爲人們無法使用鍵盤來導航您的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> 

Answer 2

灰色邊框是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 />，但我更喜歡這樣做。

希望這回答了你的問題！