How to change the color of the arrow of the combobox in uwp

Question

Hi

I would like to modify the color of the arrow of the combobox how can i do ?

Answer 1

Hello,

Welcome to Microsoft Q&A!

If you want to change the color of Arrow in the ComboBox, you can try to modify the default style of ComboBox. You can right-Click on your ComboBox from the visual designer, then click on Edit Template -> Edit a copy. This will create the default template for the ComboBox . In the style, you will find the following line:

<FontIcon x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource ComboBoxDropDownGlyphForeground}" FontSize="12" Glyph="&#xE0E5;" HorizontalAlignment="Right" IsHitTestVisible="False" Margin="0,10,10,10" Grid.Row="1" VerticalAlignment="Center"/>

This FontIcon which named DropDownGlyph represents the Arrow and its Foreground is set as {ThemeResource ComboBoxDropDownGlyphForeground}, so you can change the Foreground to the color you want(e.g. Foreground="Red"). In addition, in the Focused VisualState, when the ComboBox gets focus, it will set the Foreground of DropDownGlyph as {ThemeResource ComboBoxDropDownGlyphForegroundFocused}, you also need to change its Foreground setting in the style, for example:

<VisualState x:Name="Focused">
    <Storyboard>
        ......
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red"/>
        </ObjectAnimationUsingKeyFrames>
     </Storyboard>
</VisualState>

Or you can override these theme brushes resources used by ComboBox.

<Page.Resources>
        <SolidColorBrush x:Key="ComboBoxDropDownGlyphForeground" Color="Red" />
        <SolidColorBrush x:Key="ComboBoxDropDownGlyphForegroundFocused" Color="Red" />
</Page.Resources>