Friday, December 16, 2011

How to customize Esri’s Silverlight TimeSlider

image

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:

image

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

image

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.

1 comment: