Windows 10 中的 XAML ComboBox 选定项背景颜色

Posted 2023-04-01

技术标签:

【中文标题】Windows 10 中的 XAML ComboBox 选定项背景颜色【英文标题】：XAML ComboBox Selected Item Background Color in Windows 10 【发布时间】：2017-07-06 05:06:16 【问题描述】：

我对 WPF 和 XAML 比较陌生，并且在 Windows 10 中遇到了 ComboBox 和背景颜色的问题。我创建了一个 ComboBox 控件模板，这在很大程度上解决了我的问题。但是，当打开 ComboBox 时，作为当前选定项目的项目具有浅色背景，由于前景是白色的，因此难以阅读。我需要使所选项目的背景更暗。我一直在寻找答案无济于事。我错过了什么？

这是我目前看到的：

这里是 ComboBox 声明：

<ComboBox x:Name="_comboBoxUserName" Height="23" Margin="4" VerticalAlignment="Top" SelectionChanged="_userName_SelectionChanged" IsEditable="True" Style="DynamicResource ComboBoxStyle" Foreground="StaticResource BrushICWhite" Background="StaticResource BrushICBlue" Template="DynamicResource ComboBoxCT" ItemContainerStyle="DynamicResource ComboBoxItemStyle"/>

这里是 ComboBox 控件模板：编辑：我编辑了模板以包含我添加的 SolidColorBrush 元素。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">

<ControlTemplate x:Key="ComboBoxCT" TargetType="x:Type ComboBox">
    <Grid x:Name="Placement" SnapsToDevicePixels="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Popup x:Name="PART_Popup" AllowsTransparency="True" Grid.ColumnSpan="2" IsOpen="Binding IsDropDownOpen, RelativeSource=RelativeSource TemplatedParent" PopupAnimation="DynamicResource x:Static SystemParameters.ComboBoxPopupAnimationKey" Placement="Bottom">
            <Themes:SystemDropShadowChrome x:Name="Shdw" Color="Transparent" MaxHeight="TemplateBinding MaxDropDownHeight" MinWidth="Binding ActualWidth, ElementName=Placement">
                <Border x:Name="DropDownBorder" BorderBrush="DynamicResource x:Static SystemColors.WindowFrameBrushKey" BorderThickness="1" Background="DynamicResource x:Static SystemColors.WindowBrushKey">
                    <ScrollViewer x:Name="DropDownScrollViewer">
                        <Grid RenderOptions.ClearTypeHint="Enabled">
                            <Canvas HorizontalAlignment="Left" Height="0" VerticalAlignment="Top" Width="0">
                                <Rectangle x:Name="OpaqueRect" Fill="Binding Background, ElementName=DropDownBorder" Height="Binding ActualHeight, ElementName=DropDownBorder" Width="Binding ActualWidth, ElementName=DropDownBorder"/>
                            </Canvas>
                            <ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Contained" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels"/>
                        </Grid>
                    </ScrollViewer>
                </Border>
            </Themes:SystemDropShadowChrome>
        </Popup>
        <Themes:ListBoxChrome x:Name="Border" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" Grid.ColumnSpan="2" RenderMouseOver="TemplateBinding IsMouseOver" RenderFocused="TemplateBinding IsKeyboardFocusWithin"/>
        <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment" IsReadOnly="Binding IsReadOnly, RelativeSource=RelativeSource TemplatedParent" Margin="TemplateBinding Padding" VerticalContentAlignment="TemplateBinding VerticalContentAlignment">
            <TextBox.Style>
                <Style TargetType="x:Type TextBox">
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="AllowDrop" Value="True"/>
                    <Setter Property="MinWidth" Value="0"/>
                    <Setter Property="MinHeight" Value="0"/>
                    <Setter Property="FocusVisualStyle" Value="x:Null"/>
                    <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>
                    <Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="x:Type TextBox">
                                <ScrollViewer x:Name="PART_ContentHost" Background="Transparent" Focusable="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TextBox.Style>
        </TextBox>
        <ToggleButton Grid.Column="1" IsChecked="Binding IsDropDownOpen, Mode=TwoWay, RelativeSource=RelativeSource TemplatedParent">
            <ToggleButton.Style>
                <Style TargetType="x:Type ToggleButton">
                    <Setter Property="OverridesDefaultStyle" Value="True"/>
                    <Setter Property="IsTabStop" Value="False"/>
                    <Setter Property="Focusable" Value="False"/>
                    <Setter Property="ClickMode" Value="Press"/>
                    <Setter Property="Background" Value="Transparent"/>
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="x:Type ToggleButton">
                                <Themes:ButtonChrome x:Name="Chrome" BorderBrush="TemplateBinding BorderBrush" Background="TemplateBinding Background" RenderMouseOver="TemplateBinding IsMouseOver" RenderPressed="TemplateBinding IsPressed" RoundCorners="False" SnapsToDevicePixels="True" Width="DynamicResource x:Static SystemParameters.VerticalScrollBarWidthKey">
                                    <Path x:Name="Arrow" Data="M0,0L3.5,4 7,0z" Fill="Black" HorizontalAlignment="Center" Margin="0,1,0,0" VerticalAlignment="Center"/>
                                </Themes:ButtonChrome>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsChecked" Value="True">
                                        <Setter Property="RenderPressed" TargetName="Chrome" Value="True"/>
                                    </Trigger>
                                    <Trigger Property="IsEnabled" Value="False">
                                        <Setter Property="Fill" TargetName="Arrow" Value="#FFAFAFAF"/>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </ToggleButton.Style>
        </ToggleButton>
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="IsKeyboardFocusWithin" Value="True">
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
        <Trigger Property="IsDropDownOpen" Value="True">
            <Setter Property="RenderFocused" TargetName="Border" Value="True"/>
        </Trigger>
        <Trigger Property="HasItems" Value="False">
            <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="DynamicResource x:Static SystemColors.GrayTextBrushKey"/>
            <Setter Property="Background" Value="#FFF4F4F4"/>
        </Trigger>
        <MultiTrigger>
            <MultiTrigger.Conditions>
                <Condition Property="IsGrouping" Value="True"/>
                <Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False"/>
            </MultiTrigger.Conditions>
            <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
        </MultiTrigger>
        <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
            <Setter Property="Margin" TargetName="Shdw" Value="0,0,5,5"/>
            <Setter Property="Color" TargetName="Shdw" Value="#71000000"/>
        </Trigger>
        <Trigger Property="CanContentScroll" SourceName="DropDownScrollViewer" Value="False">
            <Setter Property="Canvas.Top" TargetName="OpaqueRect" Value="Binding VerticalOffset, ElementName=DropDownScrollViewer"/>
            <Setter Property="Canvas.Left" TargetName="OpaqueRect" Value="Binding HorizontalOffset, ElementName=DropDownScrollViewer"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Background" Color="#005f7e"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Border" Color="#005f7e"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Background" Color="#005f7e"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Border" Color="#005f7e"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Background" Color="#005f7e"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Border" Color="#005f7e"/>    
<Style x:Key="ComboBoxItemStyle" TargetType="x:Type ComboBoxItem">
    <Setter Property="Background" Value="StaticResource BrushICBlue" />
    <Setter Property="BorderBrush" Value="StaticResource BrushICBlue" />
</Style>

【问题讨论】：

【参考方案1】：

将ControlTemplate 中TextBox 的SelectionBrush 属性设置为您选择的Brush：

<TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="TemplateBinding HorizontalContentAlignment" IsReadOnly="Binding IsReadOnly, RelativeSource=RelativeSource TemplatedParent" Margin="TemplateBinding Padding" VerticalContentAlignment="TemplateBinding VerticalContentAlignment" 
SelectionBrush="Black">

您可能还想将同一 TextBox 的 SelectionOpacity 属性设置为 1。

编辑：

您需要覆盖ComboBoxItem 的模板。更改“ComboBoxItem.ItemsviewSelectedNoFocus.Background”SolidColorBrush的Color：

<Style x:Key="FocusVisual">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate>
                <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="DynamicResource x:Static SystemColors.ControlTextBrushKey" StrokeThickness="1" StrokeDashArray="1 2"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHover.Background" Color="#1F26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHover.Border" Color="#A826A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Background" Color="Black"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelected.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Background" Color="#2E0080FF"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedHover.Border" Color="#99006CD9"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Background" Color="Red"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewSelectedNoFocus.Border" Color="#FFDADADA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewFocus.Border" Color="#FF26A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHoverFocus.Background" Color="#5426A0DA"/>
<SolidColorBrush x:Key="ComboBoxItem.ItemsviewHoverFocus.Border" Color="#FF26A0DA"/>
<Style x:Key="ComboBoxItemStyle" TargetType="x:Type ComboBoxItem">
    <Setter Property="Background" Value="StaticResource BrushICBlue" />
    <Setter Property="BorderBrush" Value="StaticResource BrushICBlue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="x:Type ComboBoxItem">
                <Border x:Name="Bd" BorderBrush="TemplateBinding BorderBrush" BorderThickness="TemplateBinding BorderThickness" Background="TemplateBinding Background" Padding="TemplateBinding Padding" SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="TemplateBinding HorizontalContentAlignment" SnapsToDevicePixels="TemplateBinding SnapsToDevicePixels" VerticalAlignment="TemplateBinding VerticalContentAlignment"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" TargetName="Bd" Value="DynamicResource x:Static SystemColors.GrayTextBrushKey"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="False"/>
                            <Condition Property="IsMouseOver" Value="True"/>
                            <Condition Property="IsKeyboardFocused" Value="False"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewHover.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewHover.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True"/>
                            <Condition Property="IsMouseOver" Value="False"/>
                            <Condition Property="IsKeyboardFocused" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewSelected.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewSelected.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True"/>
                            <Condition Property="IsMouseOver" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewSelectedHover.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewSelectedHover.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="True"/>
                            <Condition Property="IsMouseOver" Value="False"/>
                            <Condition Property="IsKeyboardFocused" Value="False"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewSelectedNoFocus.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewSelectedNoFocus.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="False"/>
                            <Condition Property="IsMouseOver" Value="False"/>
                            <Condition Property="IsKeyboardFocused" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewFocus.Border"/>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsSelected" Value="False"/>
                            <Condition Property="IsMouseOver" Value="True"/>
                            <Condition Property="IsKeyboardFocused" Value="True"/>
                        </MultiTrigger.Conditions>
                        <Setter Property="Background" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewHoverFocus.Background"/>
                        <Setter Property="BorderBrush" TargetName="Bd" Value="StaticResource ComboBoxItem.ItemsviewHoverFocus.Border"/>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

【讨论】：

遗憾的是，这并没有为我解决问题。在插入的图像中，问题是组合框已被单击并且列表中有两个项目。顶部项目是当前项目，看起来是空白的白色，但它在非常浅灰色的背景上显示白色数字。我需要使该列表项的背景变暗。也许您可以提供一个可重现的问题样本？阅读本文并相应地编辑您的问题：***.com/help/mcve。您引用了一些尚未包含的画笔，并且您发布的示例 ComboBox 中没有任何项目。我的问题似乎描述得很糟糕。问题不在于 ComboBox 的文本框部分，而在于列表项。列表中有两个项目。这两个项目包含数字 18015551777 和 14004441444，第一个项目是当前选定的项目，因此该项目的内容 - 18015551777 - 显示在组合框的文本框部分。但是，如您所见，您无法读取项目列表中的第一项，因为背景对于白色前景来说太亮了。第二个列表项显示得很好，因为它使用了指定的背景颜色。是不是鼠标移到的那个项目太轻了？鼠标没有悬停在任何项目上。太轻的就是默认项。

以上是关于Windows 10 中的 XAML ComboBox 选定项背景颜色的主要内容，如果未能解决你的问题，请参考以下文章

以编程方式从 Windows Phone 8.1 XAML 中的 ListView 中的特定 ListViewItem 到达 TextBlock

背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

将数据从组合框获取到 datagridview

从另一类 Windows 手机访问页面的按钮控件？

Windows 10 UWP 应用程序在启动时崩溃（错误模块名称：Windows.UI.Xaml.dll）

用于设计 Windows 10 应用程序的 GUI？还是仅通过 XAML？