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
22 Comments »
Leave a Reply
I’m a WPF Disciple
I am an insider …. muhhhaaaa
C# Disciple
More PhotosAwards
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 |
If the RangeSelectedStart and RangeSelectedStop values are bound (using {Binding startvalue} for example) the bindings are removed, as soon as the control changes the value. If the value is changed manually, the control will display the new value but if the control updates it’s value, the binding gets lost:
GetBindingExpression(RangeStartSelectedProperty) == null –> false
SetValue(RangeStartSelectedProperty, value);
GetBindingExpression(RangeStartSelectedProperty) == null –> true
Anyone has an idea? :/
Tristan,
I have no idea, but I tried as follows and it works.
namespace WpfApplication1
{
class Window1VM
{
private int _S = 20;
public int S
{
get { return _S; }
set
{
// set a breakpoint
_S = value;
}
}
private int _E = 90;
public int E
{
get { return _E; }
set
{
// set a breakpoint
_E = value;
}
}
}
}
Regards, Nick
Posting XAML isn’t really supported, next try..
<Window
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:l=”clr-namespace:WpfApplication1″
xmlns:c=”clr-namespace:AC.AvalonControlsLibrary.Controls;assembly=AvalonControlsLibrary”
Title=”Window1″ Height=”300″ Width=”300″>
<Window.DataContext>
<l:Window1VM />
</Window.DataContext>
<Grid>
<c:RangeSlider RangeStart=”0″ RangeStop=”100″
RangeStartSelected=”{Binding S, Mode=TwoWay}”
RangeStopSelected=”{Binding E, Mode=TwoWay}” />
</Grid>
</Window>
Hey guys,
thank you – you solved my problem. Actually I only forgot the bindingmode… thought TwoWay was the default behavior?
How ever – it works now. Thank you very much!
First I thought TwoWay is the default behavior, too. Then I learned, this depends on the definition of the DependencyProperty. “By default, data binding Mode for dependency properties defaults to OneWay.” http://msdn.microsoft.com/en-us/library/ms753358.aspx (Scroll to bottom for an example)
There seems to be a memory leak with the RangeSlider. It’s really obvious in my datatemplate / itemscontrol anyone else see this?
Very nice article. I really enjoyed it reading. And it also cleared lot of my doubts about WPF Slider Control. Check these article too its also having nice post with wonderful explanation on WPF Slider Control in WPF.
http://www.mindstick.com/Articles/c4d9ba57-3e87-4f65-b3b8-91a0e1b1f22d/?Slider%20Control%20in%20WPF
http://www.c-sharpcorner.com/uploadfile/mahesh/slider-control-in-wpf/
Thanks Everyone for your nice post.
Is it alright if I repost a few of your articles so long as I provide credit and sources back to wordpress.
com? My website is on the exact same focus as yours and my readers would undoubtedly gain from a lot
of the articles you give here. Please let me know if this would be fine.
Cheers