Question

当我打开一个组合框并将鼠标悬停在某个项目上时，我遇到了更改颜色的问题。我尝试更改SolidColorBrush，但没有任何反应，我使用自定义模板为我的组合框，我不知道要改变什么来获得我想要的结果。

这是我的代码：

  <ControlTemplate x:Key="cmbTemplate" TargetType="{x:Type ComboBox}">

        <Grid x:Name="templateRoot" SnapsToDevicePixels="True">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
            </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="shadow" Color="Transparent" Height="100" MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{Binding ActualWidth, ElementName=templateRoot}">
                    <Border x:Name="DropDownBorder" BorderBrush="{DynamicResource {x:Static SystemColors.WindowFrameBrushKey}}" BorderThickness="1" Background="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" Width="248">
                        <ScrollViewer x:Name="DropDownScrollViewer">
                            <Grid x:Name="grid" RenderOptions.ClearTypeHint="Enabled">
                                <Canvas x:Name="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>
            <ToggleButton x:Name="toggleButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" 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="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="{x:Type ToggleButton}">
                                    <Border x:Name="templateRoot" BorderBrush="#FFACACAC" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                                        <Border.Background>
                                            <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                <GradientStop Color="#FFF0F0F0" Offset="0"/>
                                                <GradientStop Color="#FFE5E5E5" Offset="1"/>
                                            </LinearGradientBrush>
                                        </Border.Background>
                                        <Border x:Name="splitBorder" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" Margin="0" SnapsToDevicePixels="True" Width="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}">
                                            <Path x:Name="Arrow" Data="F1M0,0L2.667,2.66665 5.3334,0 5.3334,-1.78168 2.6667,0.88501 0,-1.78168 0,0z" Fill="#FF606060" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center"/>
                                        </Border>
                                    </Border>
                                    <ControlTemplate.Triggers>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="false"/>
                                                <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="false"/>
                                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="true"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFABADB3"/>
                                            <Setter Property="Background" TargetName="splitBorder" Value="Transparent"/>
                                            <Setter Property="BorderBrush" TargetName="splitBorder" Value="Transparent"/>
                                        </MultiDataTrigger>
                                        <Trigger Property="IsMouseOver" Value="True">
                                            <Setter Property="Fill" TargetName="Arrow" Value="Black"/>
                                        </Trigger>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot">
                                                <Setter.Value>
                                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                        <GradientStop Color="#FFECF4FC" Offset="0"/>
                                                        <GradientStop Color="#FFDCECFC" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#d2c71a"/>
                                        </MultiDataTrigger>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="true"/>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF7EB4EA"/>
                                            <Setter Property="Background" TargetName="splitBorder">
                                                <Setter.Value>
                                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                        <GradientStop Color="#FFEBF4FC" Offset="0"/>
                                                        <GradientStop Color="#FFDCECFC" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="BorderBrush" TargetName="splitBorder" Value="#FF7EB4EA"/>
                                        </MultiDataTrigger>
                                        <Trigger Property="IsPressed" Value="True">
                                            <Setter Property="Fill" TargetName="Arrow" Value="Black"/>
                                        </Trigger>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="true"/>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot">
                                                <Setter.Value>
                                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                        <GradientStop Color="#FFDAECFC" Offset="0"/>
                                                        <GradientStop Color="#FFC4E0FC" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/>
                                        </MultiDataTrigger>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsPressed, RelativeSource={RelativeSource Self}}" Value="true"/>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FF569DE5"/>
                                            <Setter Property="Background" TargetName="splitBorder">
                                                <Setter.Value>
                                                    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                                        <GradientStop Color="#FFDAEBFC" Offset="0"/>
                                                        <GradientStop Color="#FFC4E0FC" Offset="1"/>
                                                    </LinearGradientBrush>
                                                </Setter.Value>
                                            </Setter>
                                            <Setter Property="BorderBrush" TargetName="splitBorder" Value="#FF569DE5"/>
                                        </MultiDataTrigger>
                                        <Trigger Property="IsEnabled" Value="False">
                                            <Setter Property="Fill" TargetName="Arrow" Value="#FFBFBFBF"/>
                                        </Trigger>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="false"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot" Value="#FFF0F0F0"/>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFD9D9D9"/>
                                        </MultiDataTrigger>
                                        <MultiDataTrigger>
                                            <MultiDataTrigger.Conditions>
                                                <Condition Binding="{Binding IsEnabled, RelativeSource={RelativeSource Self}}" Value="false"/>
                                                <Condition Binding="{Binding IsEditable, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ComboBox}}}" Value="true"/>
                                            </MultiDataTrigger.Conditions>
                                            <Setter Property="Background" TargetName="templateRoot" Value="White"/>
                                            <Setter Property="BorderBrush" TargetName="templateRoot" Value="#FFBFBFBF"/>
                                            <Setter Property="Background" TargetName="splitBorder" Value="Transparent"/>
                                            <Setter Property="BorderBrush" TargetName="splitBorder" Value="Transparent"/>
                                        </MultiDataTrigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </ToggleButton.Style>
            </ToggleButton>
            <Border x:Name="Border" Background="White" Margin="{TemplateBinding BorderThickness}">
                <TextBox x:Name="PART_EditableTextBox" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsReadOnly="{Binding IsReadOnly, RelativeSource={RelativeSource TemplatedParent}}" Margin="7,19,3,-62" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Height="Auto" TextWrapping="NoWrap" Width="240">
                    <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="Height" Value="250"/>
                            <Setter Property="Padding" 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" Margin="0,0,0,32"/>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </TextBox.Style>
                </TextBox>
            </Border>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Opacity" TargetName="Border" Value="0.56"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
            <Trigger Property="HasDropShadow" SourceName="PART_Popup" Value="True">
                <Setter Property="Margin" TargetName="shadow" Value="0,0,5,5"/>
                <Setter Property="Color" TargetName="shadow" Value="#71000000"/>
            </Trigger>
            <Trigger Property="HasItems" Value="False">
                <Setter Property="Height" TargetName="DropDownBorder" Value="95"/>
            </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="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>

Answer 1

以下是关于如何修改ComboBoxItem外观的简单（丑陋）方法：

<强>风格

 <Style x:Key="ItemStyle" TargetType="{x:Type ComboBoxItem}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                        <Border x:Name="gd" Background="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}},Path=Background}">

                            <ContentPresenter />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="ComboBoxItem.IsMouseOver" Value="True">
                                <Setter TargetName="gd"  Property="Background" Value="DarkBlue"></Setter>
                                <Setter TargetName="gd"  Property="TextElement.Foreground" Value="White"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<强>用法

 <ComboBox Height="50">
            <ComboBox.Style>
                <Style TargetType="ComboBox">
                    <Setter Property="Template" Value="{StaticResource cmbTemplate}"/>
                    <Setter Property="ItemContainerStyle" Value="{StaticResource ItemStyle}" ></Setter>
                </Style>

            </ComboBox.Style>
            <ComboBoxItem>Item1</ComboBoxItem>
            <ComboBoxItem>Item2</ComboBoxItem>
            <ComboBoxItem>Item3</ComboBoxItem>
        </ComboBox>

据我所知，除了修改ControlTemplate的整个ComboBoxItem外，别无他法。

WPF组合框悬停改变颜色模板

1 个答案: