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

Question

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

左侧的拆分视图窗格有一个包含 ListBoxItems.The 默认选择颜色为蓝色的列表框，我想对其进行自定义，但我无法更改它。

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

Answer 1

您可以自定义 ListView 的 ListViewItem 样式，可以在 generic.xaml 中找到，位于 C:\Program Files (x86)\Windows Kits\DesignTime\CommonConfiguration\Neutral\UAP.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 构建并运行。

以上步骤可能有点复杂，但值得。以后可能想改个TextBox的样式什么的，也可以按照这个教程来做。

Answer 2

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

<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}">

Answer 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\DesignTime\CommonConfiguration\Neutral\UAP.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>

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

How to change selection highlight colour of a ListBoxItem in UWP?

c#

xaml

uwp

windows-10-universal

uwp-xaml