WinUI 3中如何在事件触发时设置ComboBox控件样式？

我在WinUI 3中设置ComboBox控件样式时遇到一个问题：鼠标悬停在ComboBox上时，背景变为透明，而ComboBox文本是白色、窗口背景也是白色，导致文本完全看不清。我想修改ComboBoxBackgroundPointerOver或者前景色来避免这个问题，但不想重新设计整个ControlTemplate。

当前使用的样式代码 #

<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
        <Setter Property="Foreground" Value="#FFFFFF" />
        <Setter Property="Background" Value="#BF311A" />
        <Setter Property="BorderBrush" Value="#58585A" />
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="MaxDropDownHeight" Value="200"/>
        <Setter Property="MinWidth" Value="200"/>
        <Setter Property="Padding" Value="10"/>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ComboBoxItem">
                    <Setter Property="Background" Value="#7E1416"/>
                    <Setter Property="Foreground" Value="#FFFFFF"/>
                    <Setter Property="BorderThickness" Value="0"/>
                    <Setter Property="VerticalAlignment" Value="Bottom"/>
                    <Setter Property="Padding" Value="10"/>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

已尝试的无效方法 #

• 修改ComboBox的Resources覆盖ComboBoxBackgroundPointerOver，但未生效，且无法通过样式统一设置：

<ComboBox
        ItemsSource="{Binding Runs}"
        Style="{StaticResource ComboBoxStyle}">
    <ComboBox.Resources>
        <Color x:Key="BlackColour">#000000</Color>
        <Color x:Key="WhiteColour">#FFFFFF</Color>
        <StaticResource x:Key="ComboBoxBackgroundPointerOver" ResourceKey="BlackColour"/>
        <StaticResource x:Key="ComboBoxBackground" ResourceKey="BlackColour"/>
    </ComboBox.Resources>
</ComboBox>

• 尝试VisualStateManager，但不符合统一样式设置的需求；WinUI3不支持Style.Triggers，不想用ControlTemplate重写整个控件。

可行解决方案 #

方案1：在样式内覆盖系统资源键 #

WinUI3的ComboBox视觉状态依赖系统定义的资源键，直接在样式内部覆盖这些资源，就能统一应用到所有使用该样式的ComboBox，无需重写ControlTemplate。

修改后的样式代码：

<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
    <!-- 原有基础设置 -->
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="Background" Value="#BF311A" />
    <Setter Property="BorderBrush" Value="#58585A" />
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="MaxDropDownHeight" Value="200"/>
    <Setter Property="MinWidth" Value="200"/>
    <Setter Property="Padding" Value="10"/>
    
    <!-- 覆盖悬停状态的背景资源 -->
    <Setter Property="Resources">
        <Setter.Value>
            <ResourceDictionary>
                <!-- 设置悬停时的背景色，可替换为你需要的颜色 -->
                <SolidColorBrush x:Key="ComboBoxBackgroundPointerOver" Color="#BF311A"/>
                <!-- 若需要修改悬停时的前景色，取消下面注释 -->
                <!-- <SolidColorBrush x:Key="ComboBoxForegroundPointerOver" Color="#000000"/> -->
            </ResourceDictionary>
        </Setter.Value>
    </Setter>

    <!-- 原有下拉项样式设置 -->
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ComboBoxItem">
                <Setter Property="Background" Value="#7E1416"/>
                <Setter Property="Foreground" Value="#FFFFFF"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="VerticalAlignment" Value="Bottom"/>
                <Setter Property="Padding" Value="10"/>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

方案2：基于默认模板修改视觉状态 #

无需完全重写控件模板，仅在样式中添加VisualStateManager设置来调整悬停状态：

<Style x:Key="ComboBoxStyle" TargetType="ComboBox">
    <!-- 原有基础设置 -->
    <Setter Property="Foreground" Value="#FFFFFF" />
    <Setter Property="Background" Value="#BF311A" />
    <Setter Property="BorderBrush" Value="#58585A" />
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="MaxDropDownHeight" Value="200"/>
    <Setter Property="MinWidth" Value="200"/>
    <Setter Property="Padding" Value="10"/>

    <!-- 修改模板中的悬停状态 -->
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ComboBox">
                <Grid x:Name="LayoutRoot">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <VisualState.Setters>
                                    <!-- 设置悬停时的背景色 -->
                                    <Setter Target="BackgroundElement.Fill" Value="#BF311A"/>
                                    <!-- 若需要修改悬停时的前景色，取消下面注释 -->
                                    <!-- <Setter Target="ContentPresenter.Foreground" Value="#000000"/> -->
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <!-- 保留默认模板的核心结构，确保控件功能正常 -->
                    <Border x:Name="BackgroundElement"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            CornerRadius="{TemplateBinding CornerRadius}"
                            Control.IsTemplateFocusTarget="True"/>
                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                      Content="{TemplateBinding SelectionBoxItem}"
                                      ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
                                      ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>
                    <Button x:Name="DropDownButton"
                            Background="Transparent"
                            BorderBrush="Transparent"
                            BorderThickness="0"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Center"
                            Style="{StaticResource ComboBoxDropDownButtonStyle}"/>
                    <Popup x:Name="FlyoutPopup">
                        <Border x:Name="PopupBorder"
                                Background="{ThemeResource ComboBoxDropDownBackground}"
                                BorderBrush="{ThemeResource ComboBoxDropDownBorderBrush}"
                                BorderThickness="{ThemeResource ComboBoxDropDownBorderThickness}"
                                CornerRadius="{ThemeResource ComboBoxCornerRadius}">
                            <ScrollViewer x:Name="ScrollViewer"
                                          AutomationProperties.AccessibilityView="Raw"
                                          BringIntoViewOnFocusChange="False"
                                          HorizontalScrollBarVisibility="Disabled"
                                          VerticalScrollBarVisibility="Auto">
                                <ItemsPresenter x:Name="ItemsPresenter"
                                                Margin="{ThemeResource ComboBoxDropdownContentMargin}"
                                                KeyboardNavigation.DirectionalNavigation="Contained"/>
                            </ScrollViewer>
                        </Border>
                    </Popup>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

    <!-- 原有下拉项样式设置 -->
    <Setter Property="ItemContainerStyle">
        <Setter.Value>
            <Style TargetType="ComboBoxItem">
                <Setter Property="Background" Value="#7E1416"/>
                <Setter Property="Foreground" Value="#FFFFFF"/>
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="VerticalAlignment" Value="Bottom"/>
                <Setter Property="Padding" Value="10"/>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

内容的提问来源于stack exchange，提问作者eric-v