WPF Tip: Slider Indication
In my last post I have demonstrated how to create your own style into the Simple Style, In this post I will show how to provide your newly created Slider with a unique status Indication.
Last time we created our own style using Expression Design and applying the pre-fabricated design into the Simple Style . As you can see there are two styles relevant to Increase Decrease behavior: SimpleScrollRepeatButtonStyle.
<Track Grid.Row="1" x:Name="PART_Track">
<Track.Thumb>
<Thumb Style="{DynamicResource SimpleSliderThumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyle}" Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
</Track>
Step 1: Rename the style to differentiate theme from one another:
<Track Grid.Row="1" x:Name="PART_Track">
<Track.Thumb>
<Thumb Style="{DynamicResource SimpleSliderThumb}"/>
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyleIncrease}" Command="Slider.IncreaseLarge"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton Style="{DynamicResource SimpleScrollRepeatButtonStyleDeCrease}" Command="Slider.DecreaseLarge"/>
</Track.DecreaseRepeatButton>
</Track>
Step 2: Create the the two different Styles (remember to keep theme different).
<Style x:Key="SimpleScrollRepeatButtonStyleIncrease" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Path x:Name="DownloadProgressSlider" Width="736" Height="6.42206" Canvas.Left="25.6802" Canvas.Top="498.937" Stretch="Fill" Data="F1 M 25.6802,498.937L 761.68,498.937L 761.68,505.359L 25.6802,505.359L 25.6802,498.937 Z ">
<Path.Fill>
<RadialGradientBrush RadiusX="0.5" RadiusY="57.3025" Center="0.5,0.5" GradientOrigin="0.5,0.5">
<RadialGradientBrush.RelativeTransform>
<TransformGroup/>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#FF77E1FE" Offset="0.429688"/>
<GradientStop Color="#FF0027C4" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SimpleScrollRepeatButtonStyleDecrease" TargetType="{x:Type RepeatButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Grid>
<Path x:Name="DownloadProgressSlider" Width="736" Height="6.42206" Canvas.Left="25.6802" Canvas.Top="498.937" Stretch="Fill" Data="F1 M 25.6802,498.937L 761.68,498.937L 761.68,505.359L 25.6802,505.359L 25.6802,498.937 Z ">
<Path.Fill>
<RadialGradientBrush RadiusX="0.5" RadiusY="57.3025" Center="0.5,0.5" GradientOrigin="0.5,0.5">
<RadialGradientBrush.RelativeTransform>
<TransformGroup/>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="Transparent" Offset="0"/>
<GradientStop Color="Transparent" Offset="1"/>
</RadialGradientBrush>
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Instead of looking like this:
Now your Slider should look something like this:
Now we can tell the progress on our slider.
Enjoy!