如何更改组合框中下拉菜单的选定项的背景颜色(UWP/XAML)

6yt4nkrj  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(208)

我正在努力处理ComboBox控件的样式,更具体地说,是从下拉菜单中选择项的背景色。
所选项目是否采用特定的主题键颜色?
在下面的例子中,我想改变的背景颜色是浅灰色。

3df52oht

3df52oht1#

如果你想改变ComboBoxItem的风格,你需要修改ComboBoxItem的默认风格。ComboBoxItem使用一些系统值作为不同状态的背景。我做了一个简单的演示,你可以参考。

XAML:

<Page.Resources>
    <Style TargetType="ComboBoxItem" x:Key="MyItemStyle">
        <Setter Property="Foreground" Value="{ThemeResource ComboBoxItemForeground}" />
        <Setter Property="Background" Value="{ThemeResource ComboBoxItemRevealBackground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrush}" />
        <Setter Property="BorderThickness" Value="{ThemeResource ComboBoxItemRevealBorderThemeThickness}" />
        <Setter Property="TabNavigation" Value="Local" />
        <Setter Property="Padding" Value="{ThemeResource ComboBoxItemRevealThemePadding}" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBoxItem">
                    <Grid x:Name="LayoutRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}" Control.IsTemplateFocusTarget="True">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                        <Setter Target="LayoutRoot.Background" Value="Azure" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPointerOver}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Disabled">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundDisabled}" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>

                                <VisualState x:Name="Pressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundPressed}" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundPressed}" />
                                        <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerDownThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>

                                <VisualState x:Name="Selected">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="Yellow" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelected}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelected}" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedUnfocused}" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedUnfocused}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedUnfocused}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="SelectedDisabled">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="{ThemeResource ComboBoxItemRevealBackgroundSelectedDisabled}" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedDisabled}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedDisabled}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="SelectedPointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="Red" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPointerOver}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPointerOver}" />
                                        <Setter Target="LayoutRoot.(RevealBrush.State)" Value="PointerOver" />
                                    </VisualState.Setters>

                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="LayoutRoot" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedPressed">
                                    <VisualState.Setters>
                                        <Setter Target="LayoutRoot.Background" Value="Green" />
                                        <Setter Target="LayoutRoot.BorderBrush" Value="{ThemeResource ComboBoxItemRevealBorderBrushSelectedPressed}" />
                                        <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource ComboBoxItemForegroundSelectedPressed}" />
                                        <Setter Target="LayoutRoot.(RevealBrush.State)" Value="Pressed" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>
                            <VisualStateGroup x:Name="InputModeStates">
                                <VisualState x:Name="InputModeDefault" />
                                <VisualState x:Name="TouchInputMode">
                                    <VisualState.Setters>
                                        <Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeTouchPadding}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="GameControllerInputMode">
                                    <VisualState.Setters>
                                        <Setter Target="ContentPresenter.Margin" Value="{ThemeResource ComboBoxItemRevealThemeGameControllerPadding}" />
                                    </VisualState.Setters>
                                </VisualState>

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter"
                        Content="{TemplateBinding Content}"
                        ContentTransitions="{TemplateBinding ContentTransitions}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        Foreground="{TemplateBinding Foreground}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        Margin="{TemplateBinding Padding}" />

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid>
    <ComboBox x:Name="FontsCombo" Header="Fonts" Height="200" Width="200" 
      ItemsSource="{x:Bind fonts}" DisplayMemberPath="Source" ItemContainerStyle="{StaticResource MyItemStyle}"/>
</Grid>

我更改了指针滑过颜色、选定颜色、选定指针滑过颜色和选定按下颜色。

相关问题