WPF Range Slider Control
[New version fo Range Slider here]
I know that you guys are waiting for the sorting of the DataGridView control, and I apologize for not completing it
yet. I needed a range slider, so I had to stop for 2 days to create this control… While I was at it I also
created a Magnifier (which is a normal slider but centered i.e when you release the thumb it goes back in the mid
point. more info below)…
The range slider is basically just like a normal slider control but you can select a range instead of a single
point. You can even drag the middle part(which is the selected range area) to move back and forward… It is very
easy to restyle this control, Basically there are 5 main properties that you can set
CenterThumbStyle – this is the area of the selected range (this is a thumb control)
LeftThumbStyle – this is the left slider thumb which is used to expand the range
RightThumbStyle – - this is the right slider thumb which is used to expand the range
LeftRepeatButtonStyle – this is the left edge of the slider (When click on the button you move the range selected
to the left)
RightRepeatButtonStyle – this is the right edge of the slider (When click on the button you move the range selected
to the right)
These properties all accept a style as parameter so that you can re style the control however you want.
Whenever the range is changed an event is raised providing you with the new range (RangeSelectionChanged).
A demo for the range slider + full source code is provided here…
The magnifier is a very simple control. Basically it is a normal slider yet, this slider goes back at the mid-
point(with a nice animation) when the user releases the slider thumb. When the user is holding the thumb to the
left or to the right a Magnified event is raised every x (where x is a TimeSpan set by the user). This can be used
to make a magnifing effect or even shrinking effect accordingly… have a look at the demo to get a better feel of
this control….
Any question, suggestions or comments please feel free to post. It is always nice to hear feedback…
Have fun coding….
Regards
P.S if you have some ideas or need a specific custom control please let me know so that I added to the backlog of
the controls to include in the AvalonControlLibrary
14 Comments »
Leave a comment
: About :
Marlon me = new Marlon();
while(me.UseCSharp) me.Happy = true;
I am currently working at Infusion Development as a Sofware Consultant. I love C# and addicted to the WPF technology…. Here in my blog you will find posts mainly on WPF yet sometimes I blog on other .Net stuff…. I also have an OpenSource project AvalonControlsLibrary that I constantly work on….. I am also an MVP for Client App (see my profile here)
I also happen to have the most beautiful daughter, Jasmine; Thanks Jasmine for being in my life, without you my life would be a mess
Besides programming I also like… mmm… what do I like… ooups, I think I need a hobby or something…..
Anyway, I hope you like my blog, feedback is always appreciated……..
Thanks for the support
Marlon
marlongrech AT gmail DOT com
All posting is provided “AS IS” with no warranties, and confers no rights.
I’m a WPF Disciple
I am an insider …. muhhhaaaa
-
C# Disciple
More Photos Awards
Vote Me
I’m not sure why, maybe I did something stupid.. but If I modify the style you are using inside RangeSliderTest.xaml, nothing would change when I hit F5 to test the project.
How can I link the resource you built into my own project?
Can you send me the XAMl so that I can see if there is something wrong, and yes you can use my code in your project
Hi, I’m really interested in your range slider control, but I’m having real problems getting the downloads from your site (any of them) any ideas why I wouldn’t be able to get the files from your download server?
Very nice control. It actually helped me a lot for a project I’m working on. Thanks for publishing it!
-Bob
I am necessary wish to find
Hi Vedflieft,
I didn’t understand what you are trying to say can you re explain?
Regards
Range slider got an update in AvalonControlsLibrary v2. all properties are not Dependency properties and also the RangeSelectionChanged event has been updated to a RoutedEvent
Contact me if you have any issues at marlongrech AT GMAIL DOT COM
Regards
Is that possible to have text above the ticks in the slider?
e.g values of the range
Well you can do anything you want if you supply a ControlTemplate…. If you want send me exactly what you need and I can create a control template for you to give you an example
Thanks so much, this will be a big help with one of my projects
Where’s the screenshots? Just do ctrl-printscreen and paste in Paint, save as png and upload with wordpress.
Hi Marlon,
I used XAML bindings for the properties RangeStart, RangeStop, RangeStartSelected and RangeStopSelected. So the PropertyChanged order isn’t determined. A PropertyChanged on RangeStart and RangeStop will cause a calculation of the movableRange field, PropertyChanged on RangeStartSelected and RangeStopSelected will not, so the default for movableRange will be used. And the default is 0, and it’s a divisor. A calculation of movableRange with the RangeStart and RangeStop (and MinRange) defaults will result 1. I suggest to set the initial value of the field movableRange to 1 also, this will prevent strange errors if data binding is used.
Regards
Nick
You will look at my slider please.
http://simplecod.wordpress.com/category/windows-presentation-foundation-wpf/
[...] 17, 2009 I’m using Marlon Grech’s Avalon Controls Library Range Slider. It’s a 2 thumb slider with a middle section, so its really 3 thumb. The middle piece will [...]
Pingback by WPF Range Slider « Tech Tock | November 17, 2009 |