How to customize Esri’s Silverlight TimeSlider

The Esri ArcGIS SIlverlight Toolkit SDK is a companion of Esri’s ArcGIS API for Silverlight. The toolkit includes a number of useful controls including a magnifier, scale bar and an info window to display map popup windows. This post will demonstrate how to customize (or style) the toolkit’s TimeSlider control.

To view a live application click here.
To download the full source code click here.

By default, the toolkit’s TimeSlider looks like this:

With a style applied it is possible to transform the TimeSlider to look like this:

To achieve this appearance you but include the follow two styles as a resource. The first style is for the Thumb.

<Style x:Key="SleekThumb" TargetType="Thumb">
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="IsTabStop" Value="False"/>
    <Setter Property="Height" Value="12"/>
    <Setter Property="Width" Value="12"/>
    <Setter Property="Cursor" Value="Hand"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Grid>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse Fill="{TemplateBinding Background}"
                             Height="{TemplateBinding Height}"
                             Width="{TemplateBinding Width}"
                             Stroke="{TemplateBinding BorderBrush}"
                             StrokeThickness="{TemplateBinding BorderThickness}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And then the TimeSlider itself.

<Style x:Key="SleekTimeSlider" TargetType="esri:TimeSlider">
    <Setter Property="IsTabStop" Value="False" />
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="esri:TimeSlider">
                <Grid>
                    <!--VisualState wiring - not used-->
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Disabled"/>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused" />
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
 
                    <!-- Slider core -->
                    <Grid x:Name="HorizontalTrack">
                        <!--Hide tick marks (but still used for snapping)-->
                        <esriToolkitPrimitives:TickBar x:Name="TickMarks"
                                                       Margin="0,0,0,0"
                                                       IsHitTestVisible="False">
                            <esriToolkitPrimitives:TickBar.TickMarkTemplate>
                                <DataTemplate>
                                    <Grid />
                                </DataTemplate>
                            </esriToolkitPrimitives:TickBar.TickMarkTemplate>
                        </esriToolkitPrimitives:TickBar>
 
                        <!--Background Track-->
                        <Rectangle Height="3" Margin="5,0"
                                   StrokeThickness="{TemplateBinding BorderThickness}"
                                   Fill="LightGray"/>
 
                        <!--Left repeater button-->
                        <RepeatButton
                            x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton"                                                            
                            IsTabStop="False"                                  
                            HorizontalAlignment="Stretch"
                            Opacity="0" />
 
                        <!--Minimum thumb-->
                        <Thumb
                            x:Name="MinimumThumb"                           
                            DataContext="{TemplateBinding Value}"
                            ToolTipService.ToolTip="{Binding Start}" 
                            ToolTipService.Placement="Top"
                            HorizontalAlignment="Left"
                            Foreground="{TemplateBinding Foreground}"
                            Style="{StaticResource SleekThumb}" />
 
                        <!--Middle thumb-->
                        <Thumb
                            x:Name="HorizontalTrackThumb"                                                                                                                          
                            IsTabStop="False"
                            Cursor="Hand"
                            HorizontalAlignment="Left"               
                            Foreground="{TemplateBinding Foreground}">
                            <Thumb.Template>
                                <ControlTemplate>
                                    <Rectangle Height="3"
                                               Fill="{TemplateBinding Foreground}" />
                                </ControlTemplate>
                            </Thumb.Template>
                        </Thumb>
 
                        <!--Maximum thumb-->
                        <Thumb
                            x:Name="MaximumThumb"                                    
                            DataContext="{TemplateBinding Value}"
		          ToolTipService.ToolTip="{Binding End}" 
                            ToolTipService.Placement="Top"
                            HorizontalAlignment="Left"
                            Foreground="{TemplateBinding Foreground}"
                            Style="{StaticResource SleekThumb}" />
 
                        <!--Right repeater button-->
                        <RepeatButton
                            x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton"    
                            IsTabStop="False"                                    
                            HorizontalAlignment="Stretch"
                            Opacity="0" />
                    </Grid>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The XAML page containing two styles above must have the following namespaces defined.

xmlns:esri="http://schemas.esri.com/arcgis/client/2009"
xmlns:esriToolkitPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;
                                 assembly=ESRI.ArcGIS.Client.Toolkit"

Finally, apply the style to the TimeSlider as shown below.

<esri:TimeSlider
    Grid.Row="1"
    x:Name="TimeSlider"
    TimeMode="TimeExtent"
    Foreground="Black"
    Style="{StaticResource SleekTimeSlider}" />

In closing, the controls included in the ArcGIS Silverlight Toolkit are no different from other controls with respect to styling and templating. To assist with styling other toolkit controls I would recommend browse the toolkit’s source code on codeplex. Alternatively you can just tweak the XAML in the post to fit your needs.