Question

我正在使用WPF扩展库WatermarkedComboBox，当我将鼠标悬停在ComboBoxItem上时，我希望背景更改为浅灰色而不是默认的蓝色。

<!-- Combo Box -->
    <xctk:WatermarkComboBox Style="{StaticResource MonthComboBoxDropDown}" ItemsSource="{Binding ListOfMonths}" SelectedItem="{Binding SelectedMonth, ValidatesOnDataErrors=True}" Margin="0,0,20,0">
                        <xctk:WatermarkComboBox.Watermark>
                            <TextBlock Text="Month" Foreground="{StaticResource OffsetWhiteBrush}"/>
                        </xctk:WatermarkComboBox.Watermark>
                        <xctk:WatermarkComboBox.Resources>
                            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Pink" />
                        </xctk:WatermarkComboBox.Resources>
                        <xctk:WatermarkComboBox.ItemContainerStyle>
                            <Style TargetType="{x:Type ComboBoxItem}">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" Value="Pink" />
                                        <Setter Property="Foreground" Value="Yellow" />
                                        <Setter Property="BorderThickness" Value="5" />
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </xctk:WatermarkComboBox.ItemContainerStyle>
                    </xctk:WatermarkComboBox>


<!-- Combo box styling -->

    <Style x:Key="MonthComboBoxDropDown" TargetType="{x:Type ComboBox}"  BasedOn="{StaticResource TextBoxErrorStyle}">
            <Setter Property="Foreground" Value="{StaticResource WhiteColorBrush}" />
            <Setter Property="FontSize" Value="{StaticResource FontSize20}" />
            <Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
                                <ToggleButton.Template>
                                    <ControlTemplate>
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="5*" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Border Name="Border" Grid.ColumnSpan="2" Background="{StaticResource DarkGreyBrush}" BorderThickness="0" />
                                            <Path x:Name="Arrow" Grid.Column="1"  Fill="{StaticResource WhiteColorBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                                        </Grid>
                                        <ControlTemplate.Triggers>
                                            <Trigger Property="ToggleButton.IsChecked" Value="true">
                                                <Setter TargetName="Border" Property="Background" Value="{StaticResource LightGreyBrush}" />
                                            </Trigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </ToggleButton.Template>
                            </ToggleButton>
                            <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3" />
                            <TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" MinWidth="120" />
                            <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Slide">
                                <Grid  Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                    <Border x:Name="DropDownBorder" Background="{StaticResource DarkGreyBrush}" />
                                    <ScrollViewer SnapsToDevicePixels="True" Foreground="{StaticResource WhiteColorBrush}" FontFamily="{StaticResource LatoRegular}" FontSize="{StaticResource FontSize20}" VerticalAlignment="Center">
                                        <StackPanel IsItemsHost="True" />
                                    </ScrollViewer>

                                </Grid>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

当我将鼠标悬停在组合框中的项目上时，它看起来像这样

我设法进行了前景和边框的更改，但是我又如何进行背景更改？

Answer 1

添加到您的ComboBox样式中，将HighlightBrush更改为灰色

<Style x:Key="MonthComboBoxDropDown" TargetType="{x:Type ComboBox}"  BasedOn=" {StaticResource TextBoxErrorStyle}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Gray"/>
            <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="DarkGray"/>
        </Style.Resources>
        <Setter Property="Foreground" Value="{StaticResource WhiteColorBrush}" />
        <Setter Property="FontSize" Value="{StaticResource FontSize20}" />
        <Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ComboBox}">
                    <Grid>
                        <ToggleButton Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" >
                            <ToggleButton.Template>
                                <ControlTemplate>
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="5*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Border Name="Border" Grid.ColumnSpan="2" Background="{StaticResource DarkGreyBrush}" BorderThickness="0" />
                                        <Path x:Name="Arrow" Grid.Column="1"  Fill="{StaticResource WhiteColorBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
                                    </Grid>
                                    <ControlTemplate.Triggers>
                                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                                            <Setter TargetName="Border" Property="Background" Value="{StaticResource LightGreyBrush}" />
                                        </Trigger>
                                    </ControlTemplate.Triggers>
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>
                        <ContentPresenter Name="ContentSite" IsHitTestVisible="False"  Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3" />
                        <TextBox x:Name="PART_EditableTextBox" Visibility="Hidden" MinWidth="120" />
                        <Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True"  Focusable="False" PopupAnimation="Slide">
                            <Grid  Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
                                <Border x:Name="DropDownBorder" Background="{StaticResource DarkGreyBrush}" />
                                <ScrollViewer SnapsToDevicePixels="True" Foreground="{StaticResource WhiteColorBrush}" FontFamily="{StaticResource LatoRegular}" FontSize="{StaticResource FontSize20}" VerticalAlignment="Center">
                                    <StackPanel IsItemsHost="True" />
                                </ScrollViewer>

                            </Grid>
                        </Popup>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
  </Style>

Answer 2

<Style x:Key="ComboBox" TargetType="{x:Type ComboBoxItem}">
        <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 ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" 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>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="Bd" Value="{StaticResource LightGreyBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

要覆盖样式，我必须覆盖ComboBoxItem ControlTemplate。

鼠标悬停时更改ComboBoxItem背景-WPF

2 个答案: