Sturm Sturm - 8 months ago 61
C# Question

Change slider bar color

It should be very easy to do this but I haven't fount the information that I need. I want as simple as changing the color of the slider bar:

enter image description here

I'm using ModernUI and the default bar color is very similar to my background and I want to make it a bit lighter.


I found two approaches:

  1. You can customize your slider by insert corresponding brushes in appropriate Slider.Resources section.

  2. You can add brushes to separate xaml file with dictionary and then merge it with corresponding slider in the Slider.Resources. In some cases it fits better because you can change colors of few controls at once.

Any does not need to changing of the control's template.

Both approaches are presented below:


<Grid Style="{StaticResource ContentRoot}">


        <!-- Slider with default theme and colors from ModernUI -->

        <!-- Slider with custom colors from approach 1 -->
                <SolidColorBrush x:Key="SliderSelectionBackground" Color="Green" />
                <SolidColorBrush x:Key="SliderSelectionBorder" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBackground" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBorder" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Green" />
                <SolidColorBrush x:Key="SliderThumbBorderHover" Color="Green" />

        <!-- Slider with custom colors from approach 2 -->
                        <ResourceDictionary Source="Dictionary1.xaml"/>




<ResourceDictionary xmlns=""

<SolidColorBrush x:Key="SliderSelectionBackground" Color="Blue" />
<SolidColorBrush x:Key="SliderSelectionBorder" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackground" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundDragging" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBackgroundHover" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorder" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderDisabled" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderDragging" Color="Blue" />
<SolidColorBrush x:Key="SliderThumbBorderHover" Color="Blue" />


As result you get following: