locked
ComboBox Foreground, the Arrow

    Question

  • Hello,

    i have a black Background and when i want to use a ComboBox the arrow to open the list remains black. How can i change it to appear like the ComboBox Text and this is white?

    Thank you
    Markus

            <ComboBox x:Name="ComboBox1" 
                      ItemsSource="{Binding Obj_List}" 
                      DisplayMemberPath="FileName" Margin="80, 0, 0, 0"
                      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
                      Foreground="{ThemeResource ApplicationForegroundThemeBrush}"
                      IsDropDownOpen="False"
                      BorderThickness="0"/>
    


    Thursday, March 26, 2015 12:36 PM

Answers

  • You need to override the default control template of the ComboBox. I have written a blog post about to override the template to change the background colour of a ComboBox in WPF. The concepts are the same for a ComboBox in a Windows Store App: http://blog.magnusmontin.net/2014/04/30/changing-the-background-colour-of-a-combobox-in-wpf-on-windows-8/.

    Right-click on the ComboBox element in design mode in Visual Studio and select the “Edit template” option and then the “Edit a copy…” option. This will copy the default template to your XAML markup and you can then modify it according to your requirements.

    Hope that helps.

    Please remember to mark helpful posts as answer to close your threads and then start a new thread if you have a new question.

    • Marked as answer by Markus222 Thursday, March 26, 2015 3:16 PM
    Thursday, March 26, 2015 1:06 PM
  • >>I just need the arrow in the text Color...Is there a easier way?

    No, there is no property that lets you change the colour of the arrow so you must override (define your own) template.

    >>what must i change?

    I am currently working from a Windows 7 computer so I cannot generate the actual template that is used for the ComboBox in a Windows Store App but the arrow is probably defined by some kind of Path element. On Windows 7 it looks like this:

    <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>

          



    You then change the Fill property from Black to something else to change the colour of the arrow.

    So search for a Path element or similar in the generated XAML markup and then change its Fill property or similiar.

    Hope that helps.                        

    Please remember to mark all helpful posts as answer to close your threads and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by Markus222 Thursday, March 26, 2015 3:15 PM
    Thursday, March 26, 2015 2:50 PM

All replies

  • You need to override the default control template of the ComboBox. I have written a blog post about to override the template to change the background colour of a ComboBox in WPF. The concepts are the same for a ComboBox in a Windows Store App: http://blog.magnusmontin.net/2014/04/30/changing-the-background-colour-of-a-combobox-in-wpf-on-windows-8/.

    Right-click on the ComboBox element in design mode in Visual Studio and select the “Edit template” option and then the “Edit a copy…” option. This will copy the default template to your XAML markup and you can then modify it according to your requirements.

    Hope that helps.

    Please remember to mark helpful posts as answer to close your threads and then start a new thread if you have a new question.

    • Marked as answer by Markus222 Thursday, March 26, 2015 3:16 PM
    Thursday, March 26, 2015 1:06 PM
  • Hello Magnus,

    thank you. But this copies a lot to MainPage.xaml. I just need the arrow in the text Color. The < (rotated 90 degrees left). When i use the FileOpenPicker this arrow is white but in my program it is black...

    If i use your suggestion (i think it's a bit much, because it is only the arrow) what must i change? Is there a easier way?

    Regards
    Markus

    Thursday, March 26, 2015 1:57 PM
  • >>I just need the arrow in the text Color...Is there a easier way?

    No, there is no property that lets you change the colour of the arrow so you must override (define your own) template.

    >>what must i change?

    I am currently working from a Windows 7 computer so I cannot generate the actual template that is used for the ComboBox in a Windows Store App but the arrow is probably defined by some kind of Path element. On Windows 7 it looks like this:

    <Path x:Name="Arrow" Data="{StaticResource DownArrowGeometry}" Fill="Black" HorizontalAlignment="Center" Margin="3,1,0,0" VerticalAlignment="Center"/>

          



    You then change the Fill property from Black to something else to change the colour of the arrow.

    So search for a Path element or similar in the generated XAML markup and then change its Fill property or similiar.

    Hope that helps.                        

    Please remember to mark all helpful posts as answer to close your threads and then start a new thread if you have a new question. Please don't ask several questions in the same thread.

    • Marked as answer by Markus222 Thursday, March 26, 2015 3:15 PM
    Thursday, March 26, 2015 2:50 PM
  • Hello Magnus,

    yes! Thank you.

    Below is the old and the new code in  <ComboBox.Resources>

    Regards
    Markus

    <TextBlock x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" 
               Grid.Column="1" 
               Foreground="{ThemeResource ComboBoxArrowForegroundThemeBrush}" 
               FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}" 
               FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right" 
               IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row="1" Text="&#xE011;"  
               VerticalAlignment="Center"/>
    
    <TextBlock x:Name="DropDownGlyph" AutomationProperties.AccessibilityView="Raw" 
               Grid.Column="1" 
              Foreground="{ThemeResource ApplicationForegroundThemeBrush}" 
              FontWeight="Bold" FontSize="{ThemeResource ComboBoxArrowThemeFontSize}"
              FontFamily="{ThemeResource SymbolThemeFontFamily}" HorizontalAlignment="Right"
              IsHitTestVisible="False" Margin="0,0,6,4" Grid.Row="1" Text="&#xE011;" 
              VerticalAlignment="Center"/>
    
    

    Thursday, March 26, 2015 3:15 PM