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!
When developing a new UserControls you usually would like to enable your own custom style, I found the following way very useful.
This example shows you how to create a Slider:
I used Microsoft Expression Design to create my own thumb for a Slider control.
After you had finished drawing your new Thumb, export the XAML using the Microsoft Expression Design.
Export using the following way:
Select Resource dictionary, in the Group By select Layers this will export the Drawing Created by you into the XAML and will differentiate elements in the drawing by Layers. - Now you can use the drawing as a ResourceDictionary
If you like to edit you drawing in Microsoft Expression Blend select the export to Canvas, select Export editable TextBlocks if your drawing contains Text.
1. Create your own ResourceDictionary and copy your XAML into it.
2. Copy the simple style User Control XAML into your ResourceDictionary. This is how it should look like: (I am only replacing the Thumb in the slider)
<Track.Thumb>
<Thumb Style="{DynamicResource SimpleSliderThumb}"/>
</Track.Thumb>
...
<!--Simple Simple SliderThumb - The Thumb is the draggable part of a Slider-->
<Style x:Key="SimpleSliderThumb" d:IsControlPart="True" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Width" Value="14"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Ellipse x:Name="Ellipse" Fill="{DynamicResource NormalBrush}"
Stroke="{DynamicResource NormalBorderBrush}" StrokeThickness="1"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill"
Value="{DynamicResource MouseOverBrush}"
TargetName="Ellipse"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill"
Value="{DynamicResource DisabledBackgroundBrush}"
TargetName="Ellipse"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
3. Now take your own custom style and replace the style relevant.
<RadialGradientBrush x:Key="Path1Brush" RadiusX="0.684617" RadiusY="0.684615"
Center="0.492308,1.16154"GradientOrigin="0.492308,1.16154">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<RotateTransform CenterX="0.492308" CenterY="1.16154" Angle="-90"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#FFFF1313" Offset="0"/>
<GradientStop Color="#FF9B4444" Offset="0.429688"/>
<GradientStop Color="#FFF08787" Offset="1"/>
</RadialGradientBrush>
<RadialGradientBrush x:Key="Path2Brush" RadiusX="0.874381" RadiusY="0.488538"
Center="0.4988,0.953051" GradientOrigin="0.4988,0.953051">
<RadialGradientBrush.RelativeTransform>
<TransformGroup>
<RotateTransform CenterX="0.4988" CenterY="0.953051" Angle="-90"/>
</TransformGroup>
</RadialGradientBrush.RelativeTransform>
<GradientStop Color="#00FFFCF9" Offset="0.68457"/>
<GradientStop Color="#B8FFFFFF" Offset="1"/>
</RadialGradientBrush>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Canvas Width="11.6" Height="11.6477" Background="Transparent" >
<Path x:Name="Path1" Fill="{DynamicResource Path1Brush}" Width="11.6"
Height="11.6" Canvas.Left="0" Canvas.Top="0.0477295" Stretch="Fill"
Data="F1 M 5.80002,0.0477295C 9.00323,0.0477295 11.6,2.64435
11.6,5.84775C 11.6,9.05096 9.00323,11.6477 5.80002,11.6477C 2.5968,
11.6477 0,9.05096 0,5.84775C 0,2.64435 2.5968,0.0477295 5.80002,0.0477295"/>
<Path x:Name="Path2" Fill="{DynamicResource Path2Brush}" Width="11.526"
Height="6.43983" Canvas.Left="0.0370712" Canvas.Top="0" Stretch="Fill"
Data="F1 M 5.80006,0C 8.98283,0 11.5631,2.58005 11.5631,5.76297C 11.5631,7.30338
8.67518,5.44769 5.88872,5.49701C 2.91804,5.5495 0.0370712,
7.40518 0.0370712,5.76297C 0.0370712,2.58005 2.61729,0 5.80006,0"/>
</Canvas>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Fill" Value="{DynamicResource Path1Brush}" TargetName="Path1"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" Value="{DynamicResource Path2Brush}" TargetName="Path2"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
4. Link the ResourceDictionary to your Simple Style:
5. Create a slider and apply the style on to the slider like so:
<Slider HorizontalAlignment="Right" Margin="0,0,141,40" VerticalAlignment="Bottom"
Width="177" x:Name="VistaSlider1" Style="{DynamicResource VistaSlider}">
<Slider.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="ResourceDictionary1.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Slider.Resources>
</Slider>
You should end up with something looking like this:
Enjoy!
In this blog will try to feature insights about developing Winforms, Designers, Controls and many solutions I had cooked up.
I will also explorer useful tools and technologies from Microsoft.