RangeSlider support Control Templates….
Hello,
yep the title of this post says it all.. I refactored the Range slider so that now it can support control templates… so basically instead of setting all those syle (this was how you could restyle the control in the previous version), now you can just create on control template to restyle the control however you desire…
The parts you can restyle are named as follows
“PART_RangeSliderContainer” (StackPanel), this control acts as the container of all the other inner element. Please note that the oraintation for this control will always be Horizontal even if you re style, since the Range slider only supports horizontal oriantation for now….
“PART_LeftEdge” (RepeatButton), This is the left side of the range slider. (in the demo there is the text click me)
“PART_RightEdge” (RepeatButton), This is the right side of the range slider(in the demo there is the text click me)
“PART_LeftThumb” Thumb, This is the thumb on the left side. the users use this thumb to expnad/shrink the selected range
“PART_MiddleThumb” (Thumb), This is the middle part of the slider. users use this part to move the range back and forward by dragging this thumb.
“PART_RightThumb” (Thumb), This is the thumb on the right side. the users use this thumb to expnad/shrink the selected range
an example of such a control template would be something like the following
<ControlTemplate TargetType=”{x:Type local:RangeSlider}” x:Key=”rangeSliderTemplate”> <StackPanel Name=”PART_RangeSliderContainer”> <RepeatButton Name=”PART_LeftEdge” Background=”AliceBlue” Content=”click me”/> <Thumb Name=”PART_LeftThumb” Cursor=”SizeWE”/><!–This size of this thumb will auto matically change by the control to 10–> <Thumb Name=”PART_MiddleThumb” Background=”AntiqueWhite” Cursor=”ScrollAll” MinWidth=”10″/> <Thumb Name=”PART_RightThumb” Cursor=”SizeWE”/><!–This size of this thumb will auto matically change by the control to 10–> <RepeatButton Name=”PART_RightEdge” Background=”AliceBlue” Content=”click me”/> </StackPanel> </ControlTemplate>
if you have any problems please contact me on this blog or send an email at marlongrech@gmail.com
Download Source Code + Demo Project
7 Comments »
Leave a Reply
I’m a WPF Disciple
I am an insider …. muhhhaaaa
C# Disciple
More PhotosAwards
Vote Me
[...] WPF Range Slider Control [New version fo Range Slider here] [...]
Pingback by WPF Range Slider Control « C# Disciples | October 20, 2007 |
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
Nice range slider. I am trying to make the left and right thumbs snap to integral values. Do you have any advice on how I can do that?
Thanks
Ash
Is it possible to add another range?
Great control but is it possible to add ticks, values on the ticks and the ability to snap to integral values?
Like Marlon said you can add ticks and values on top of the slider by modifying the control template. I added a grid with all of the possible values of the ticks in the control template above the area of the range slider. HTH
I find that the default control template is very ugly and does not look like a Slider control at all, so I made the following modified template (designed as a horizontal slider only, just like the original control).
Remember to set the ‘Height’ property to some value above 30 when creating the slider. This ControlTemplate shows the value of the start and end of the selected range right beside the two thumbs; just remove the Content bindings ({Binding Path=…}) if you don’t want to show these values. The <style> and <controltemplate> must be placed inside a <Resources> dictionary.
<Style TargetType=”RepeatButton” x:Key=”SliderFlank”>
<!– Show time beneath the TrackBackground –>
<Setter Property=”VerticalContentAlignment” Value=”Bottom”/>
<Setter Property=”Padding” Value=”0 0 0 0″/>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”RepeatButton”>
<!– Enable hit-testing (IsHitTestVisible=true doesn’t work, but a transparent background does) –>
<Grid Background=”Transparent”>
<ContentPresenter
x:Name=”contentPresenter”
Content=”{TemplateBinding Content}”
ContentTemplate=”{TemplateBinding ContentTemplate}”
VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”
HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}”
Margin=”{TemplateBinding Padding}”/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate TargetType=”{x:Type local:RangeSlider}” x:Key=”RangeSliderTemplate”>
<Grid>
<Border Name=”TrackBackground” Grid.Row=”1″
Margin=”0 0 0 4″ CornerRadius=”2″ Height=”6″
BorderThickness=”1″>
<Border.Background>
<LinearGradientBrush StartPoint=”0,0″ EndPoint=”0,1″>
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color=”#FFF” Offset=”0.0″/>
<GradientStop Color=”#EEE” Offset=”1.0″/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush StartPoint=”0,0″ EndPoint=”0,1″>
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color=”#CCC” Offset=”0.0″/>
<GradientStop Color=”#444″ Offset=”1.0″/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
<StackPanel Name=”PART_RangeSliderContainer”>
<RepeatButton Name=”PART_LeftEdge” Background=”AliceBlue” HorizontalContentAlignment=”Right” Style=”{StaticResource SliderFlank}”
Content=”{Binding Path=RangeStartSelected, RelativeSource={RelativeSource TemplatedParent}}” />
<Thumb Name=”PART_LeftThumb” Cursor=”SizeWE”/>
<Thumb Name=”PART_MiddleThumb” Canvas.ZIndex=”-1″ Background=”AntiqueWhite” Cursor=”ScrollAll” MinWidth=”8″ Margin=”-2 4″/>
<Thumb Name=”PART_RightThumb” Cursor=”SizeWE”/>
<RepeatButton Name=”PART_RightEdge” Background=”AliceBlue” HorizontalContentAlignment=”Left” Style=”{StaticResource SliderFlank}”
Content=”{Binding Path=RangeStopSelected, RelativeSource={RelativeSource TemplatedParent}}”/>
</StackPanel>
</Grid>
</ControlTemplate>