如何在 GridView 内的 ListViewItemPresenter 中更改 SelectedBackground

Posted 2023-04-12

【中文标题】如何在 GridView 内的 ListViewItemPresenter 中更改 SelectedBackground

【英文标题】：How to change SelectedBackground in ListViewItemPresenter inside a GridView

【发布时间】：2016-12-06 22:05:27

【问题描述】：

我在 HubSection 中有一个 Clickable-Gridview：

<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 仍然是蓝色的。但为什么？我的错在哪里？

【参考方案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>

附言你也可以覆盖Exanded style