Georgiana M
Georgiana M

Reputation: 431

How to custom a slider bar with different color border based on slider ticks?

I have to create a slider that has certain given tick values (e.g 100,304,605,..). I want to style a slider in such a way that for example from 0-100 the bar to have a color, and from 100-304 a different color and so on.

Here is an e.g. of what I would like to achieve.

enter image description here

Here is my .xaml code:

<Slider Style="{StaticResource MyCustomStyleForSlider}" //the style to be applied
Name="MyTimeSlider" 
Width="130" 
Minimum="0" 
Maximum="{Binding MaxTimeFrames}" 
Value="{Binding TimeFrame}" 
TickPlacement="BottomRight" 
TickFrequency="1" 
IsMoveToPointEnabled="True" 
Margin="1,4,1,1" 
VerticalAlignment="Center" 
HorizontalAlignment="Center"/>

Upvotes: 2

Views: 804

Answers (2)

omerts
omerts

Reputation: 8838

If you just want to override the regular slider template, it is pretty lengthy, but here is an example:http://pastebin.com/XVuRLuWp (code to long to paste here).

In order to change the background focus on x:Key="HorizontalSliderTrackNormalBackground". I have already made it show a couple of different colors.

Upvotes: 1

brunnerh
brunnerh

Reputation: 184526

Would subclass Slider and add a dependency property that supplies a list of colors or brushes to be used. In the class i would recalculate a LinearGradient for the Background whenever the Ticks property (which supplies a list of ticks that separate the areas) changes. To make hard cuts add a different color at the same offset as the previous gradient stop, should be fairly straightforward.

Upvotes: 1

Related Questions