CODEWITHSUNDEEP
c#wpfslider
Noob Guy
Noob Guy

Reputation: 3

Is it possible to have multiple backgrounds for Slider Trackbar Control in WPF?

I am trying to create a multi color slider. I have three colors Red,Green,Blue. I am trying to set the color of 0-33 Red, 34-66 Green, 67-100 Blue of the slider Track bar

I am confused on how to do this.

I was able to set the background of slider but I am getting a gradient I want something similar to this but not a gradient just solid colors.

var brush = new LinearGradientBrush(new GradientStopCollection() { 
                new GradientStop(Colors.Red, 0.0),
                new GradientStop(Colors.Blue, 0.3),
                new GradientStop(Colors.Green, 0.6),
            });
            TestBar.Background = brush;

I am trying to do something dynamic Like if I have a class like this

class SomeObject {
    public int From;
    public int To;
    public string Color;
}

I can change the track bars colors without any issue.

Upvotes: 0

Views: 707

Answers (1)

Rich N
Rich N

Reputation: 9485

I tried to do what I think you want here, using a full custom control. The code is on GitHub. There may be easier ways to do this, but because you want the Background of the control split into three and colored I thought the logical thing to do was to put three Rectangles into the Control Template and color them.

enter image description here

The code contains a ColorSlider control, with dependency properties Color1, Color2, Color3 (of type Brush) for the three colors, and Width1, Width2, Width3 (doubles) for the three widths.

To do this we set up a ColorSlider class which registers the dependency properties (excerpt):

public class ColorSlider : Slider
{
    public static readonly DependencyProperty Width1Property = DependencyProperty.Register("Width1", typeof(double), typeof(ColorSlider), new UIPropertyMetadata(0.0));
    [TypeConverter(typeof(LengthConverter))]
    public double Width1
    {
        get { return (double)GetValue(Width1Property); }
        set { SetValue(Width1Property, value); }
    }

We need a copy of the Slider Control Template targetting the ColorSlider and then with a Stackpanel in its grid as below (excerpt clearly):

                <StackPanel Grid.Row="1" Panel.ZIndex="-1" Orientation="Horizontal">
                    <Rectangle Fill="{TemplateBinding Color1}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width1}" />
                    <Rectangle Fill="{TemplateBinding Color2}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width2}" />
                    <Rectangle Fill="{TemplateBinding Color3}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width3}" />
                </StackPanel>

Now we can create a color slider and set these properties:

<local:ColorSlider x:Name="MyColorSlider" Template="{DynamicResource ColorSliderControlTemplate}" Width="200" Height="50"
Color1="Red" Color2="Green" Color3="Blue" Width1="68" Width2="66" Width3="66"></local:ColorSlider>

And we can set them dynamically from code:

            MyColorSlider.Width3 = 20;
            MyColorSlider.Color1 = new SolidColorBrush(Colors.Orange);

Hope that helps, it's obviously a little basic.

Upvotes: 1

Related Questions