Change slider bar color

Question

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

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

Solution 1

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:

Page1.xaml

<Grid Style="{StaticResource ContentRoot}">

    <StackPanel>

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

        <!-- Slider with custom colors from approach 1 -->
        <Slider>
            <Slider.Resources>
                <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.Resources>
        </Slider>

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

    </StackPanel>

</Grid>

Dictionary1.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<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" />

</ResourceDictionary>

As result you get following:

Solution 2

You should be able to change it editing the template.

Right click your Slider, Edit Template -> Edit Copy.;.

A new window will appear asking you where VS should put the XAML code for the ControlTemplate and Styles. Chek the tags and such.

Good luck!

Edit:
Ok, here it goes.

Assuming that you already have a ModernUI App, create a new folder called Assets, right click it Add -> New Item... -> ModernUI Theme. Call it whatever you like it.

Inside the newly created XAML file insert these SolidColorBrush under the AccentColor Color tag:

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

Each one of these represents a state of the Thumb (the slider "rectangle"). After that open your App.xaml file and include your theme there (this is what my file looks like):

<Application x:Class="ModernUIApp1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
                <ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
                <ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

The <ResourceDictionary Source="/Assets/ModernUI.Theme1.xaml" /> bit represents my theme. Setting all the colors to Red, this is what it looked like:

I guess that's more clear! Hope you like it.

EDIT:
It will change when you apply your theme. But, as you're familiar with styles, I'm sending the complete template. What you can do is create a UserDictionary with only this template and when you you want to use it, change the slider Template property. You'll want to change only the Thumb Tags. Pastebin code

And if you want to change only THIS one put the template between <Windows.Resources> or <Slider.Resources> - Another option would be create your own control

Solution 3

Foreground property is used to fill the "completed" part of the slider with a particular color. (Background does the uncompleted part.)

<Slider Value="40" Maximum="100" Foreground="Red" />

Solution 4

Here you have the templates you should use: Slider Styles and Templates

The property you are looking to edit is the TrackBackground.BackGround.

If you define a style for this control template and put it either in you app.xaml or in the window.resources or in any other file, as long as you give it a key you can use it in a specific slider through the "Style" property of that slider using that same key.

Solution 5

Windows 8.1 Store/Phone Apps.

Add this to the App.xaml and change the color values to your liking:

<ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>                
            <ResourceDictionary x:Key="Default">                    
                <SolidColorBrush x:Key="SliderTrackDecreaseBackgroundThemeBrush" Color="#FFFF0000" />
                <SolidColorBrush x:Key="SliderTrackDecreasePointerOverBackgroundThemeBrush" Color="#FF00FF00" />
                <SolidColorBrush x:Key="SliderTrackDecreasePressedBackgroundThemeBrush" Color="#FF0000FF" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Light">

            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrastBlack">

            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrastWhite">

            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>

You probably only want to change the slider for the default theme and probably only the three color values shown above. For all colors / resources that you can change, see this link at MSDN: Slider styles and templates.

View more solutions

Comments

[Sturm]

Thank you, but wouldn't that change all sliders default colors? I only need to change THIS slider. I usually create a new Style for my controls, in this case set BasedOn property referring to the ModernUI style of that control. But I don't know how to do that for the slider and that is what I was asking for. But anyway, thank you.

[trinaldi]

Yeah, as I said above! There's a lot of ways!

[Jeremy Thompson]

I dont think this qualifies as a community wiki. Its worth the points. +1

[trinaldi]

I set it as wiki in case someone else have another idea!