RangeSlider support Control Templates….

Posted on by

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

 

 

8 thoughts on “RangeSlider support Control Templates….”

  1. Pingback: WPF Range Slider Control « C# Disciples

  2. 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

    Reply

  3. 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

    Reply

  6. 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

    Reply

  7. 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>

    Reply

Leave a comment