Customizing WP7 Slider in different ways

published on: 3/22/2011 | Views: N/A | Tags: Styling UI Blend

by WindowsPhoneGeek

In this article I am going to talk about how to customize the Silverlight for Windows Phone 7 Slider control in various ways.

To begin with lets first create a sample Windows Phone 7 application project. Here is how the default slider should looks like in WP7:

 

In order to customize the Style of the Slider  I will use Expression Blend.

Customizing WP7 Slider with a Simple Thumb

In this example I will demonstrate how to implement a simple Slider Thumb with Rectangular shape. Here are the steps:

1.) The first thing you need to know is to open your Visual Studio project  in Expression Blend as can be seen in the following screenshot:

2.) After that just add a Slider in MainPage.xaml. Right click over it and select "EditTemplate" -> "Edit a Copy". You will notice that the ControlTemplate of the Slider has HorizontalTemplate and VerticalTemplate parts, whatever you make with the slider always make sure that the Horizontal and Vertical Templates are both consistent.

NOTE: Do not forget to sett the Thumb style to the HorizontalTemplate and VerticalTemplate as well.

3.)Next, find the "HorizontalThumb" element. Right click over it and select "Edit Current" to modify the default template or "Edit a Copy"(this option will create a copy of the default template. Note that "Edit Current" will edit the current template so if you want to have more that one custom Styles/Templates you will have to use "Edit a Copy" so that you will be able to create a multiple modified copies of the template ).

4.) We will add a  simple Rectangle filled with the PhoneForegroundBrush. Note that it is better idea to use some of the default colors so that you are sure that the slider will looks like consistent in all themes:

<ControlTemplate x:Key="ThumbControlTemplate1" TargetType="Thumb">
    <Rectangle Fill="{StaticResource PhoneForegroundBrush}"  Height="60" Width="50" />
</ControlTemplate>

Here is how the full source should looks like:

<ControlTemplate x:Key="PhoneSimpleRepeatButton" TargetType="RepeatButton">
    <Rectangle Fill="Transparent"/>
</ControlTemplate>
<ControlTemplate x:Key="ThumbControlTemplate1" TargetType="Thumb">
    <Rectangle Fill="{StaticResource PhoneForegroundBrush}"  Height="60" Width="50" />
</ControlTemplate>

<Style x:Key="SliderStyle1" TargetType="Slider">
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Maximum" Value="10"/>
    <Setter Property="Minimum" Value="0"/>
    <Setter Property="Value" Value="0"/>
    <Setter Property="Background" Value="{StaticResource PhoneContrastBackgroundBrush}"/>
    <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                      ...
                    </VisualStateManager.VisualStateGroups>
                    <Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="0"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Rectangle x:Name="HorizontalTrack" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
                        <Rectangle x:Name="HorizontalFill" Grid.Column="0" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <Thumb x:Name="HorizontalThumb" Grid.Column="1" Margin="-1,0,0,30" RenderTransformOrigin="0.5,0.5" Template="{StaticResource ThumbControlTemplate1}" Width="1">
                            <Thumb.RenderTransform>
                                <ScaleTransform ScaleY="1" ScaleX="32"/>
                            </Thumb.RenderTransform>
                        </Thumb>
                    </Grid>
                    <Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="0"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="12,0" Opacity="0.2" Grid.RowSpan="3" Width="12"/>
                        <Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="12,0" Grid.Row="2" Width="12"/>
                        <RepeatButton x:Name="VerticalTrackLargeChangeDecreaseRepeatButton" IsTabStop="False" Grid.Row="0" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <RepeatButton x:Name="VerticalTrackLargeChangeIncreaseRepeatButton" IsTabStop="False" Grid.Row="2" Template="{StaticResource PhoneSimpleRepeatButton}"/>
                        <Thumb x:Name="VerticalThumb" Height="1" Margin="0,-1,0,0" Grid.Row="1" RenderTransformOrigin="0.5,0.5" Template="{StaticResource ThumbControlTemplate1}">
                            <Thumb.RenderTransform>
                                <ScaleTransform ScaleY="32" ScaleX="1"/>
                            </Thumb.RenderTransform>
                        </Thumb>
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Slider Style="{StaticResource SliderStyle1}" />

5.) That is all. Just build and run the project. The final result should looks like:

Customizing WP7 Slider with a Path Thumb

In this example I will demonstrate how to create a Slider Path Thumb in different ways.  We will use Expression Blend as demonstrated in "Adding Slider  Simple Thumb" example above. The only difference is that in this case we will use a Path instead of Rectangle. For more information about Paths take a look at our article: "Drawing in WP7: #3 Understanding Path shapes"

Example1: The easiest way to create a Path Thumb is just to add something like this in the Thumb ControlTemplate :

<ControlTemplate x:Key="ThumbControlTemplate3" TargetType="Thumb">
    <Path Data="M-0.10898013,26 L0.45319372,-4 L1.1411285,24 L0.54695189,51" Fill="#FF206397" Margin="-0.109,-4,-0.141,-3" Stretch="Fill" UseLayoutRounding="False"/>
</ControlTemplate>

And here is the result:

Example2: Now we will use the Expression Blend Pen Tool in order to design a custom shape. The final generated Path will be added into the Thumb ControlTemplate :

<ControlTemplate x:Key="ThumbControlTemplate2" TargetType="Thumb">
    <Path Data="M0.74033684,3.7538435 L1.0691971,-18.545076 L1.3896754,3.0000548 L1.9822172,5 L1.5147151,18.999968 L1.7329427,44 L1.0780305,27.999977 L0.51622009,43.999977 L0.61015403,18.999968 L0.12967618,6.6619554" Fill="#FF24CE0D" Margin="0.128,-18.545,-0.984,4" Stretch="Fill" UseLayoutRounding="False"/>
</ControlTemplate>

Here is the result:

Customizing WP7 Slider Fill area

Here is one more example of how to customize the fill area of the WP7 Slider:

<ControlTemplate x:Key="PhoneSimpleThumb" TargetType="Thumb">
    <Rectangle Fill="Transparent"/>
</ControlTemplate>

<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="0"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Rectangle x:Name="HorizontalTrack" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50" Opacity="0.2"/>
    <Rectangle x:Name="HorizontalFill" Grid.Column="0" Fill="{TemplateBinding Foreground}" Height="30" IsHitTestVisible="False" Margin="0,22,0,50"/>
    <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" Grid.Column="0" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
    <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" Grid.Column="2" IsTabStop="False" Template="{StaticResource PhoneSimpleRepeatButton}"/>
    <Thumb x:Name="HorizontalThumb" Grid.Column="1" Margin="-1,0,0,0" RenderTransformOrigin="0.5,0.5" Template="{StaticResource PhoneSimpleThumb}" Width="1">
        <Thumb.RenderTransform>
            <ScaleTransform ScaleY="1" ScaleX="32"/>
        </Thumb.RenderTransform>
    </Thumb>
</Grid>

You can see all examples from this articles demonstrated in the following video:

That was all about how to customize the WP7 Slider in different ways. You can find the full source code here:

I hope that the article was helpful.

You can also follow us on Twitter @winphonegeek

Comments

Add comment to 'Customizing WP7 Slider in different ways'

Title Your Name

Comment