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.
