如何在 GridView 中的 ListViewItemPresenter 中更改 SelectedBackground

Question

我在 HubSection 中有一个可点击的网格视图：

<HubSection >
                    <DataTemplate>
                        <GridView IsItemClickEnabled="True" ItemClick="Hub_OnClick">
                            <RelativePanel >
                           <TextBlock Text="NiceText" />
                            </RelativePanel>
                        </GridView>
                    </DataTemplate>
                </HubSection>

现在每次我单击该中心时，GridView (SelectedBackground) 周围都会出现一个蓝色边框。

在 LiveVisualTree 中，它显示边框来自 GridViewItem 内的 "ListViewItemPresenter" 控件。因此，我修改了原始控件的样式并将其粘贴到 Page.Resources 标记中。

<!-- Default style for Windows.UI.Xaml.Controls.ListViewItem -->
<Style TargetType="ListViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="12,0,12,0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}"/>
<Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}"/>
<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="ListViewItem">
      <ListViewItemPresenter
          ContentTransitions="{TemplateBinding ContentTransitions}"
          SelectionCheckMarkVisualEnabled="True"
          CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          CheckBoxBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
          DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
          DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
          FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
          FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
          PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
          PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
          PointerOverForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          <!-- here -->
          SelectedBackground="White"
          SelectedForeground="{ThemeResource SystemControlHighlightAltBaseHighBrush}"
          SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
          PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
          SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
          DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
          DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
          ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
          ContentMargin="{TemplateBinding Padding}"
          CheckMode="Inline"/>
    </ControlTemplate>
  </Setter.Value>
</Setter>
</Style>

但这对我不起作用。 SelectedBackground-Border 仍然是蓝色的。但为什么？我的错误在哪里？

Answer 1

您应该覆盖 GridViewItem 样式并将新样式设置为 GridView。在页面资源中声明您的新样式：

<Page.Resources>
    <Style TargetType="GridViewItem" x:Key="CustomGridViewStyle">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="TabNavigation" Value="Local"/>
        <Setter Property="IsHoldingEnabled" Value="True"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Margin" Value="0,0,4,4"/>
        <Setter Property="MinWidth" Value="{ThemeResource GridViewItemMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource GridViewItemMinHeight}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="GridViewItem">
                    <ListViewItemPresenter
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    SelectionCheckMarkVisualEnabled="True"
                    CheckBrush="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                    CheckBoxBrush="{ThemeResource SystemControlBackgroundChromeMediumBrush}"
                    DragBackground="{ThemeResource ListViewItemDragBackgroundThemeBrush}"
                    DragForeground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
                    FocusBorderBrush="{ThemeResource SystemControlForegroundAltHighBrush}"
                    FocusSecondaryBorderBrush="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"
                    PointerOverBackground="{ThemeResource SystemControlHighlightListLowBrush}"
                    PointerOverForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    SelectedBackground="Transparent"
                    SelectedForeground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                    SelectedPointerOverBackground="{ThemeResource SystemControlHighlightListAccentMediumBrush}"
                    PressedBackground="{ThemeResource SystemControlHighlightListMediumBrush}"
                    SelectedPressedBackground="{ThemeResource SystemControlHighlightListAccentHighBrush}"
                    DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                    DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                    ReorderHintOffset="{ThemeResource GridViewItemReorderHintThemeOffset}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                    ContentMargin="{TemplateBinding Padding}"
                    CheckMode="Overlay"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

和设置：

<HubSection >
    <DataTemplate>
        <GridView IsItemClickEnabled="True"
                ItemClick="Hub_OnClick"
                ItemContainerStyle="{StaticResource CustomGridViewStyle}">
            <RelativePanel >
                <TextBlock Text="NiceText" />
            </RelativePanel>
        </GridView>
    </DataTemplate>
</HubSection>

p.s。您还可以覆盖 Exanded style

如何在 GridView 中的 ListViewItemPresenter 中更改 SelectedBackground

How to change SelectedBackground in ListViewItemPresenter inside a GridView

c#

xaml

gridview

windows-runtime

uwp