如何在 UWP 中更改 ListBoxItem 的选择突出显示颜色？答案

【问题标题】：How to change selection highlight colour of a ListBoxItem in UWP?如何在 UWP 中更改 ListBoxItem 的选择突出显示颜色？
【发布时间】：2019-12-24 05:16:39
【问题描述】：

我想更改 ListBoxItem 的选择突出显示颜色

左侧的拆分视图窗格有一个包含 ListBoxItems 的 ListBox。默认选择颜色是蓝色，我想自定义它，但我无法更改它。

我找不到任何属性来更改 UWP 中 ListBoxItem 的选择突出显示颜色。

【问题讨论】：

对于未来的样式编码，您可以简单地拖放控件并右键单击控件 --> 编辑模板 --> 编辑副本 --> 按确定，现在您可以看到样式将得到添加到 xaml 代码中，现在您可以根据需要编辑此模板 :) 现在您只需复制该样式代码并将其粘贴到您的 Appx.xaml 文件中，然后通过密钥在所有应用程序中使用它 :)跨度>

标签： c# xaml uwp windows-10-universal uwp-xaml

【解决方案1】：

你可以改变ListBoxItem的style来改变选择高亮颜色。在style中你应该改变所有包含'Selected'关键字的状态来改变Fill属性为您想要的颜色（我将颜色更改为红色，如下所示）。

<Style x:Key="ListBoxItemStyle1" TargetType="ListBoxItem">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TabNavigation" Value="Local"/>
    <Setter Property="Padding" Value="{StaticResource ListBoxItemPadding}"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}">
                    <Grid.Resources>
                        <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                            <Setter Property="FontFamily" Value="XamlAutoFontFamily"/>
                            <Setter Property="FontWeight" Value="SemiBold"/>
                            <Setter Property="TextWrapping" Value="Wrap"/>
                            <Setter Property="LineStackingStrategy" Value="MaxHeight"/>
                            <Setter Property="TextLineBounds" Value="Full"/>
                            <Setter Property="OpticalMarginAlignment" Value="TrimSideBearings"/>
                        </Style>
                        <Style x:Key="BodyContentPresenterStyle" BasedOn="{StaticResource BaseContentPresenterStyle}" TargetType="ContentPresenter">
                            <Setter Property="FontWeight" Value="Normal"/>
                        </Style>
                    </Grid.Resources>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="SelectedPressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Rectangle x:Name="PressedBackground" Fill="Transparent" Control.IsTemplateFocusTarget="True"/>
                    <ContentPresenter x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后给ListBox设置样式

<ListBox Width="100" ItemContainerStyle="{StaticResource ListBoxItemStyle1}">

【讨论】：

兄弟，我将此添加到资源字典中，但我收到错误消息无法为包括样式标签在内的所有标签分配指定的值

【解决方案2】：

您可以自定义ListView的ListViewItem样式，可以在generic.xaml找到，位于C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic\generic.xaml。路径可能不同，但你可以搜索。

在generic.xaml，你可以看到所有控件的模板。然后搜索<Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle">，复制整个样式，新建一个名为ListViewItem.xaml 的资源字典。该文件应该是：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style TargetType="ListViewItem" x:Key="ListViewItemRevealStyle">
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
        <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
        <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="AllowDrop" Value="False" />
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="FocusVisualMargin" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewItem">
                    <ListViewItemPresenter ContentTransitions="{TemplateBinding ContentTransitions}"
                        x:Name="Root"
                        Control.IsTemplateFocusTarget="True"
                        FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                        SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                        CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                        CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                        DragBackground="{ThemeResource ListViewItemDragBackground}"
                        DragForeground="{ThemeResource ListViewItemDragForeground}"
                        FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                        FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                        PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                        PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                        PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                        SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                        SelectedForeground="{ThemeResource ListViewItemForegroundSelected}"
                        SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                        PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                        SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                        DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                        DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                        ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                        ContentMargin="{TemplateBinding Padding}"
                        CheckMode="{ThemeResource ListViewItemCheckMode}"
                        RevealBackground="{ThemeResource ListViewItemRevealBackground}"
                        RevealBorderThickness="{ThemeResource ListViewItemRevealBorderThemeThickness}"
                        RevealBorderBrush="{ThemeResource ListViewItemRevealBorderBrush}">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="Selected" />

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PointerOverSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPointerOver}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="PointerOverPressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="PressedSelected">
                                    <VisualState.Setters>
                                        <Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
                                        <Setter Target="Root.RevealBorderBrush" Value="{ThemeResource ListViewItemRevealBorderBrushPressed}" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                            <VisualStateGroup x:Name="DisabledStates">
                                <VisualState x:Name="Enabled" />

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="Root.RevealBorderThickness" Value="0" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                    </ListViewItemPresenter>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

在这个文件中搜索SelectedBackground，如果你想改变背景为橙色，然后写SelectedBackground="Orange"。另请注意另一个名为SelectedPointerOverBackground 的属性，您也可以根据需要更改值。

全部完成后，将ListViewItem.xaml添加到App.xaml，以便应用识别您自己的风格。 App.xaml 应该是这样的：

<Application
    x:Class="App2.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App2">

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ListViewItem.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

然后将您的 ListView 项目样式更改为

<ListView ItemContainerStyle="{StaticResource ListViewItemRevealStyle}">

Bingo，按 F5 构建并运行。

上述步骤可能有点复杂，但值得。以后你可能想改变文本框的样式或其他东西，你也可以按照这个教程。

【讨论】：

兄弟，我要了 ListBox
哦，我的.......但是对于ListBoxItem，你也可以按照上面的步骤，注意，正如 Faywang - MSFT 所写。

【解决方案3】：

最简单的方法是给你的列表框设置皮肤是在 app.xaml 中定义相应的画笔，只需在你的 Application 元素中添加如下内容：

<Application.Resources>
    <ResourceDictionary>            
        <!--
        To workout the names of the brushes you need to lookup the relevant control in the following file:
        C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.18362.0\Generic\generic.xaml
        For instance ListBoxItem
        -->            
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <!-- Selected & SelectedUnfocused -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="#11FFFFFF" />
                <SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="#11FFFFFF" />
                <!-- SelectedPointerOver -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="#11FFFFFF" />
                <SolidColorBrush x:Key="SystemControlHighlightAltBaseHighBrush" Color="#11FFFFFF" />
                <!-- SelectedPressed -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="#11FFFFFF" />
            </ResourceDictionary>

            <ResourceDictionary x:Key="Light">
                <!-- Selected & SelectedUnfocused -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentLowBrush" Color="#11000000" />
                <SolidColorBrush x:Key="SystemControlHighlightBaseHighBrush" Color="#11000000" />
                <!-- SelectedPointerOver -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentMediumBrush" Color="#11000000" />
                <SolidColorBrush x:Key="SystemControlHighlightAltBaseHighBrush" Color="#11000000" />
                <!-- SelectedPressed -->
                <SolidColorBrush x:Key="SystemControlHighlightListAccentHighBrush" Color="#11000000" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>

【讨论】：