WPF ComboBox Dropdropdown SelectedItem 背景

Question

我使用 FlatComboBox Style。一切都按照我想要的方式工作。我只是想改变一件事，DropDown 中的 Selected Item 的 Background。我怎样才能改变颜色？我正在使用 Windows 8 和 .Net 4。但是解决方案也应该运行与旧的 Windows 版本。我将此样式保存在 ResourceDictionary.

中

我的样式代码：

<!-- Flat ComboBox -->
<SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" />
<SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
<SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
<SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />

<ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="20" />
        </Grid.ColumnDefinitions>
        <Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" CornerRadius="0" BorderThickness="1, 1, 1, 1" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
        <Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder" CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
        <Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" HorizontalAlignment="Center" Fill="#444" VerticalAlignment="Center" />
    </Grid>
    <ControlTemplate.Triggers>
        <Trigger Property="UIElement.IsMouseOver" Value="True">
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
        </Trigger>
        <Trigger Property="ToggleButton.IsChecked" Value="True">
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
        </Trigger>
        <Trigger Property="UIElement.IsEnabled" Value="False">
            <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
            <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
            <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
            <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
            <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

<Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
    <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
    <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
    <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
    <Setter Property="TextElement.Foreground" Value="Black"/>
    <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid>
                    <ToggleButton Name="ToggleButton" Grid.Column="2" ClickMode="Press" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
                    <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False" HorizontalAlignment="Left" VerticalAlignment="Center" Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                                ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                    <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center"
                                Focusable="True" >
                        <TextBox.Template>
                            <ControlTemplate TargetType="TextBox" >
                                <Border Name="PART_ContentHost" Focusable="False" />
                            </ControlTemplate>
                        </TextBox.Template>
                    </TextBox>
                    <!-- Popup showing items -->
                    <Popup Name="Popup" Placement="Bottom" Focusable="False" AllowsTransparency="True" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" PopupAnimation="Slide">
                        <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                            <Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0" CornerRadius="0" BorderThickness="1,1,1,1" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
                            <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                            </ScrollViewer>
                        </Grid>
                    </Popup>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ItemsControl.HasItems" Value="False">
                        <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                    </Trigger>
                    <Trigger Property="UIElement.IsEnabled" Value="False">
                        <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                    </Trigger>
                    <Trigger Property="ItemsControl.IsGrouping" Value="True">
                        <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                    </Trigger>
                    <Trigger Property="ComboBox.IsEditable" Value="True">
                        <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                        <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                        <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<!-- End of Flat ComboBox -->

可行的解决方案 当 ItemsSource 是 DataTable.

时，我必须将 TextBlock 替换为 ContentPresenter 才能正常工作

<Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ComboBoxItem">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ComboBoxItem">
                            <Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2">
                                <!--<TextBlock Text="{TemplateBinding Content}" Margin="2" />-->
                                <ContentPresenter />
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Red" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="AliceBlue" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>

Answer 1

您可以为 ComboBox 的 ItemContainerStyle 定义样式（带触发器）。

<Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
    <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
    <!-- .... -->
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ComboBoxItem">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Gray" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Setter.Value>
    </Setter>
</Style>
<!-- End of Flat ComboBox -->

编辑

我post我的整个WindowXAML:

<Window x:Class="WpfApplication1.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:sys="clr-namespace:System;assembly=mscorlib"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <!-- Flat ComboBox -->
        <SolidColorBrush x:Key="ComboBoxNormalBorderBrush" Color="#e3e9ef" />
        <SolidColorBrush x:Key="ComboBoxNormalBackgroundBrush" Color="#fff" />
        <SolidColorBrush x:Key="ComboBoxDisabledForegroundBrush" Color="#888" />
        <SolidColorBrush x:Key="ComboBoxDisabledBackgroundBrush" Color="#eee" />
        <SolidColorBrush x:Key="ComboBoxDisabledBorderBrush" Color="#888" />

        <ControlTemplate TargetType="ToggleButton" x:Key="ComboBoxToggleButtonTemplate">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition Width="20" />
                </Grid.ColumnDefinitions>
                <Border Grid.ColumnSpan="2" Name="Border" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}" CornerRadius="0" BorderThickness="1, 1, 1, 1" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
                <Border Grid.Column="1" Margin="1, 1, 1, 1" BorderBrush="#444" Name="ButtonBorder" CornerRadius="0, 0, 0, 0" BorderThickness="0, 0, 0, 0" Background="{StaticResource ComboBoxNormalBackgroundBrush}" />
                <Path Name="Arrow" Grid.Column="1" Data="M0,0 L0,2 L4,6 L8,2 L8,0 L4,4 z" HorizontalAlignment="Center" Fill="#444" VerticalAlignment="Center" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="UIElement.IsMouseOver" Value="True">
                    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
                </Trigger>
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="WhiteSmoke"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="#FF8D979E"/>
                </Trigger>
                <Trigger Property="UIElement.IsEnabled" Value="False">
                    <Setter Property="Panel.Background" TargetName="Border" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
                    <Setter Property="Panel.Background" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBackgroundBrush}"/>
                    <Setter Property="Border.BorderBrush" TargetName="ButtonBorder" Value="{StaticResource ComboBoxDisabledBorderBrush}"/>
                    <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                    <Setter Property="Shape.Fill" TargetName="Arrow" Value="#999"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>

        <Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}">
            <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
            <Setter Property="FrameworkElement.OverridesDefaultStyle" Value="True"/>
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
            <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
            <Setter Property="TextElement.Foreground" Value="Black"/>
            <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
            <Setter Property="Control.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <ToggleButton Name="ToggleButton" Grid.Column="2" ClickMode="Press" Focusable="False" IsChecked="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                Template="{StaticResource ComboBoxToggleButtonTemplate}"/>
                            <ContentPresenter Name="ContentSite" Margin="5, 3, 23, 3" IsHitTestVisible="False" HorizontalAlignment="Left" VerticalAlignment="Center" Content="{TemplateBinding ComboBox.SelectionBoxItem}"
                                ContentTemplate="{TemplateBinding ComboBox.SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                            <TextBox Name="PART_EditableTextBox" Margin="3, 3, 23, 3" IsReadOnly="{TemplateBinding IsReadOnly}" Visibility="Hidden" Background="Transparent" HorizontalAlignment="Left" VerticalAlignment="Center"
                                Focusable="True" >
                                <TextBox.Template>
                                    <ControlTemplate TargetType="TextBox" >
                                        <Border Name="PART_ContentHost" Focusable="False" />
                                    </ControlTemplate>
                                </TextBox.Template>
                            </TextBox>
                            <!-- Popup showing items -->
                            <Popup Name="Popup" Placement="Bottom" Focusable="False" AllowsTransparency="True" IsOpen="{TemplateBinding ComboBox.IsDropDownOpen}" PopupAnimation="Slide">
                                <Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding FrameworkElement.ActualWidth}" MaxHeight="{TemplateBinding ComboBox.MaxDropDownHeight}">
                                    <Border Name="DropDownBorder" Background="White" Margin="0, 1, 0, 0" CornerRadius="0" BorderThickness="1,1,1,1" BorderBrush="{StaticResource ComboBoxNormalBorderBrush}"/>
                                    <ScrollViewer Margin="4" SnapsToDevicePixels="True">
                                        <ItemsPresenter KeyboardNavigation.DirectionalNavigation="Contained" />
                                    </ScrollViewer>
                                </Grid>
                            </Popup>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ItemsControl.HasItems" Value="False">
                                <Setter Property="FrameworkElement.MinHeight" TargetName="DropDownBorder" Value="95"/>
                            </Trigger>
                            <Trigger Property="UIElement.IsEnabled" Value="False">
                                <Setter Property="TextElement.Foreground" Value="{StaticResource ComboBoxDisabledForegroundBrush}"/>
                            </Trigger>
                            <Trigger Property="ItemsControl.IsGrouping" Value="True">
                                <Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
                            </Trigger>
                            <Trigger Property="ComboBox.IsEditable" Value="True">
                                <Setter Property="KeyboardNavigation.IsTabStop" Value="False"/>
                                <Setter Property="UIElement.Visibility" TargetName="PART_EditableTextBox" Value="Visible"/>
                                <Setter Property="UIElement.Visibility" TargetName="ContentSite" Value="Hidden"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemContainerStyle">
                <Setter.Value>
                    <Style TargetType="ComboBoxItem">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="ComboBoxItem">
                                    <Border Background="{TemplateBinding Background}" BorderThickness="0" Margin="2">
                                        <TextBlock Text="{TemplateBinding Content}" Margin="2" />
                                    </Border>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>

                        <Style.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Background" Value="Red" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="AliceBlue" />
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- End of Flat ComboBox -->
    </Window.Resources>

    <DockPanel>
        <ComboBox Height="24" Width="190" Style="{StaticResource ComboBoxFlatStyle}">
            <ComboBox.Items>
                <sys:String>One</sys:String>
                <sys:String>Two</sys:String>
                <sys:String>Three</sys:String>
                <sys:String>Four</sys:String>
                <sys:String>Five</sys:String>
            </ComboBox.Items>
        </ComboBox>
    </DockPanel>
</Window>

这是结果：

Answer 2

将以下内容添加到您的 ComboBox-Style：

<Style.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green" />
</Style.Resources>

在我有一个 ComboBox 的应用程序中，我使用以下样式定义更改了所选项目的背景画笔：

<Style TargetType="{x:Type ComboBox}">
    <Setter Property="IsReadOnly" Value="True" />
    <Setter Property="IsEditable" Value="False" />
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate>
                <TextBlock Text="{Binding}" Foreground="Black" />
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsSelected" Value="True">
            <Setter Property="BorderBrush" Value="{StaticResource fokusBrush}" />
            <Setter Property="BorderThickness" Value="1.3" />
            <Setter Property="Margin" Value="2.5" />
        </Trigger>
    </Style.Triggers>
    <Style.Resources>
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#C2E58F" />
    </Style.Resources>
</Style>

也许这对你有用。

我在 App.xaml 中使用您的风格创建了一个新的 WPF 项目。当我将以下内容添加到 <Style x:Key="ComboBoxFlatStyle" TargetType="{x:Type ComboBox}"> 时，下拉列表中所选项目的背景为红色：

<Style.Resources>
    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Red"></SolidColorBrush>
</Style.Resources>

我的虚拟组合框看起来像：

 <ComboBox HorizontalAlignment="Left" Margin="101,64,0,0" VerticalAlignment="Top" Width="120"
                  Style="{StaticResource ComboBoxFlatStyle}" >
            <ComboBox.Items>
                <ComboBoxItem Content="Blub1"></ComboBoxItem>
                <ComboBoxItem Content="Blub1"></ComboBoxItem>
                <ComboBoxItem Content="Blub1"></ComboBoxItem>
            </ComboBox.Items>
        </ComboBox>

现在，如果您打开下拉菜单并将光标移到某个项目上 -> 该项目的背景为红色。

WPF ComboBox Dropdropdown SelectedItem 背景

WPF ComboBox Dropdropdown SelectedItem Background

c#

wpf

combobox

drop-down-menu