ArcGIS API for Silverlight - Library Reference
Loop Property
See Also  Example Send comments on this topic
ESRI.ArcGIS.Client.Toolkit Namespace > TimeSlider Class : Loop Property

Gets or sets a value indicating whether the animating of the TimeSlider thumb(s) will restart playing when the end of the TickBar is reached.

Syntax

Visual Basic (Declaration) 
Public Property Loop As Boolean
C# 
public bool Loop {get; set;}

Remarks

The Loop Property of True allows continuous playing of the thumb(s) across the TickBar of the TimeSlider. A False value means the thumb(s) will stop at the last Interval (i.e. the MaximumValue) in the TickBar when it is reached.

The default Loop value of the TimeSlider is False.

Example

How to use:

Click the 'Initialize the TimeSlider' button to initialize all the TimeSlider functions (PlayPauseButton, NextButton, PreviousButton). Then push the play button to start the animations. Check on/off the Loop CheckBox to see the different effects of the Loop Property. The code example demonstrates a modified Control Template of the TimeSlider.

The XAML code in this example is used in conjunction with the code-behind (C# or VB.NET) to demonstrate the functionality.

The following screen shot corresponds to the code example in this page.

Modifying the Control Template of a TimeSlider to have a CheckBox to control the TimeSlider.Loop Property.

XAMLCopy Code
<!-- 
Don't forget to add the xml namespace reference:
xmlns:esriToolkitPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;assembly=ESRI.ArcGIS.Client.Toolkit" 
-->
<Grid x:Name="LayoutRoot">
  <Grid.Resources>
  
    <!-- 
    Tip: Use x:Key Attribute and not x:Name Attribute for defining the name of the Resources so that
    you can access the Resource in the code-behind file. 
    -->
    
    <!-- The 'RedMarkerSymbol' will be used as the default symbol for the Graphics. -->
    <esri:SimpleMarkerSymbol x:Key="RedMarkerSymbol" Color="Red" Size="12" Style="Circle" />
    
    <!-- 
    Define a SpatialReference object that has the same WKID as the ArcGISTiledMapServiceLayer in
    the Map. This will allow for the Graphics in the GraphicsLayer to line up properly. 
    -->
    <esri:SpatialReference x:Key="theSpatialReference" WKID="102100"/>
    
    <!--
    The majority of the XAML that defines the ControlTemplate for the Bookmark Control was obtained
    by using Microsoft Blend. See the blog post entitled: 'Use control templates to customize the 
    look and feel of ArcGIS controls' at the following Url for general How-To background:
    http://blogs.esri.com/Dev/blogs/silverlightwpf/archive/2010/05/20/Use-control-templates-to-customize-the-look-and-feel-of-ArcGIS-controls.aspx
    -->
    <Style x:Key="TimeSliderStyle1" TargetType="esri:TimeSlider">
      <Setter Property="IsTabStop" Value="True"/>
      <Setter Property="Foreground">
        <Setter.Value>
          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#00ffffff"/>
            <GradientStop Color="#FF326FC0" Offset="0.5"/>
            <GradientStop Color="#00ffffff" Offset="1"/>
          </LinearGradientBrush>
        </Setter.Value>
      </Setter>
      <Setter Property="Background" Value="White"/>
      <Setter Property="BorderBrush" Value="Black"/>
      <Setter Property="BorderThickness" Value="1"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="esri:TimeSlider">
            <Grid>
              <Grid.Resources>
                <Style x:Key="PlayPauseToggleButtonStyle" TargetType="ToggleButton">
                  <Setter Property="Background" Value="#FF1F3B53"/>
                  <Setter Property="Foreground" Value="#FF000000"/>
                  <Setter Property="Padding" Value="3"/>
                  <Setter Property="BorderThickness" Value="1"/>
                  <Setter Property="BorderBrush">
                    <Setter.Value>
                      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FFA3AEB9" Offset="0"/>
                        <GradientStop Color="#FF8399A9" Offset="0.375"/>
                        <GradientStop Color="#FF718597" Offset="0.375"/>
                        <GradientStop Color="#FF617584" Offset="1"/>
                      </LinearGradientBrush>
                    </Setter.Value>
                  </Setter>
                  <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate TargetType="ToggleButton">
                        <Grid>
                          <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                              <VisualState x:Name="Normal"/>
                              <VisualState x:Name="MouseOver">
                                <Storyboard>
                                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                  </DoubleAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Pressed">
                                <Storyboard>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
                                    <SplineColorKeyFrame KeyTime="0" Value="#FF6DBDD1"/>
                                  </ColorAnimationUsingKeyFrames>
                                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                  </DoubleAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#D8FFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#8CFFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
                                    <SplineColorKeyFrame KeyTime="0" Value="#3FFFFFFF"/>
                                  </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Disabled">
                                <Storyboard>
                                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement">
                                    <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>
                                  </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                              <VisualState x:Name="Checked">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlayContent">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                      <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PauseContent">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                      <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Unchecked">
                                <Storyboard>
                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlayContent">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                      <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Visible</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                                  <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PauseContent">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                      <DiscreteObjectKeyFrame.Value>
                                        <Visibility>Collapsed</Visibility>
                                      </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                  </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                              <VisualState x:Name="Focused">
                                <Storyboard>
                                  <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement">
                                    <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                  </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                              </VisualState>
                              <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                          </VisualStateManager.VisualStateGroups>
                          <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="White" CornerRadius="3">
                            <Grid Background="{TemplateBinding Background}" Margin="1">
                              <Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
                              <Rectangle x:Name="BackgroundGradient">
                                <Rectangle.Fill>
                                  <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
                                    <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                    <GradientStop Color="#F9FFFFFF" Offset="0.375"/>
                                    <GradientStop Color="#E5FFFFFF" Offset="0.625"/>
                                    <GradientStop Color="#C6FFFFFF" Offset="1"/>
                                  </LinearGradientBrush>
                                </Rectangle.Fill>
                              </Rectangle>
                            </Grid>
                          </Border>
                          <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid x:Name="PlayContent" FlowDirection="LeftToRight" Height="9" Margin="1" Width="9">
                              <Path Data="M0,0 L0,9 9,4.5 0,0" Fill="{TemplateBinding Foreground}"/>
                            </Grid>
                            <Grid x:Name="PauseContent" Height="9" Margin="1" Visibility="Collapsed" Width="9">
                              <Rectangle Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Width="3"/>
                              <Rectangle Fill="{TemplateBinding Foreground}" HorizontalAlignment="Right" Width="3"/>
                            </Grid>
                          </Grid>
                          <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
                          <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
                        </Grid>
                      </ControlTemplate>
                    </Setter.Value>
                  </Setter>
                </Style>
              </Grid.Resources>
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                         
                <!-- Add a placeholder for our Loop Checkbox. -->
                <ColumnDefinition Width="Auto"/>
                 
              </Grid.ColumnDefinitions>
              <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                  <VisualState x:Name="Normal"/>
                  <VisualState x:Name="MouseOver"/>
                  <VisualState x:Name="Disabled">
                    <Storyboard>
                      <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HorizontalTrackRectangleDisabledOverlay">
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MinimumThumbDisabledOverlay">
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                      <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MaximumThumbDisabledOverlay">
                        <DiscreteObjectKeyFrame KeyTime="0">
                          <DiscreteObjectKeyFrame.Value>
                            <Visibility>Visible</Visibility>
                          </DiscreteObjectKeyFrame.Value>
                        </DiscreteObjectKeyFrame>
                      </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="FocusStates">
                  <VisualState x:Name="Focused">
                    <Storyboard>
                      <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement">
                        <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                      </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                  </VisualState>
                  <VisualState x:Name="Unfocused"/>
                </VisualStateGroup>
              </VisualStateManager.VisualStateGroups>
              <ToggleButton x:Name="PlayPauseButton" Grid.Column="0" Height="17" Style="{StaticResource PlayPauseToggleButtonStyle}" VerticalAlignment="Center" Width="17"/>
              <Rectangle Grid.Column="1" Fill="{TemplateBinding Background}" Margin="0,2,0,2" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}"/>
              <Grid x:Name="HorizontalTrack" Grid.Column="1">
                <esriToolkitPrimitives:TickBar x:Name="TickMarks" Grid.Column="0" IsHitTestVisible="False" Margin="5,0,5,0">
                  <esriToolkitPrimitives:TickBar.TickMarkTemplate>
                    <DataTemplate>
                      <Rectangle Height="{TemplateBinding Height}" Opacity="0.5" Stroke="Black" StrokeThickness="0.5" Width="1"/>
                    </DataTemplate>
                  </esriToolkitPrimitives:TickBar.TickMarkTemplate>
                </esriToolkitPrimitives:TickBar>
                <RepeatButton x:Name="HorizontalTrackLargeChangeDecreaseRepeatButton" HorizontalAlignment="Stretch" IsTabStop="False" Opacity="0"/>
                <Thumb x:Name="MinimumThumb" Cursor="Hand" DataContext="{TemplateBinding Value}" HorizontalAlignment="Left" IsTabStop="False" ToolTipService.Placement="Top" ToolTipService.ToolTip="{Binding Start}" Width="10"/>
                <Rectangle x:Name="MinimumThumbDisabledOverlay" Fill="White" HorizontalAlignment="Left" Opacity=".55" RadiusY="2" RadiusX="2" Visibility="Collapsed" Width="10"/>
                <Thumb x:Name="HorizontalTrackThumb" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Left" IsTabStop="False">
                  <Thumb.Template>
                    <ControlTemplate>
                      <Rectangle Fill="{TemplateBinding Foreground}"/>
                    </ControlTemplate>
                  </Thumb.Template>
                </Thumb>
                <Border x:Name="HorizontalTrackRectangleDisabledOverlay" Background="Red" CornerRadius="5" HorizontalAlignment="Left" Opacity="1" Visibility="Collapsed"/>
                <Thumb x:Name="MaximumThumb" Cursor="Hand" DataContext="{TemplateBinding Value}" HorizontalAlignment="Left" IsTabStop="False" ToolTipService.Placement="Top" ToolTipService.ToolTip="{Binding End}" Width="10"/>
                <Rectangle x:Name="MaximumThumbDisabledOverlay" Fill="White" HorizontalAlignment="Left" Height="Auto" Opacity=".55" RadiusY="2" RadiusX="2" Visibility="Collapsed" Width="10"/>
                <RepeatButton x:Name="HorizontalTrackLargeChangeIncreaseRepeatButton" HorizontalAlignment="Stretch" IsTabStop="False" Opacity="0"/>
              </Grid>
              <Rectangle x:Name="FocusVisualElement" Grid.Column="1" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
              <Button x:Name="PreviousButton" Grid.Column="2" Height="17" Padding="3,0" VerticalAlignment="Center" Width="17">
                <Grid>
                  <Path Data="M 5,0 L 5,9 0,4.5 5,0" Fill="Black"/>
                 <Rectangle Fill="Black" HorizontalAlignment="Left" Height="9" Margin="6,0,0,0" VerticalAlignment="Top" Width="1"/>
                </Grid>
              </Button>
              <Button x:Name="NextButton" Grid.Column="3" Height="17" Padding="3,0" VerticalAlignment="Center" Width="17">
                <Grid>
                  <Path Data="M 0,0 L 0,9 5,4.5 0,0" Fill="Black" Margin="1.5,0,0,0"/>
                  <Rectangle Fill="Black" HorizontalAlignment="Left" Height="9" VerticalAlignment="Top" Width="1"/>
                </Grid>
              </Button>
              
              <!-- 
              Add a CheckBox that will provide the ability for the user to turn on/off the Loop
              Property of the TimeSlider. Code-behind functions were added for the Checked and
              Unchecked states of the CheckBox.
              -->
              <CheckBox x:Name="MyLooper" Grid.Column="4" Height="17" Width="50" Padding="3,0" Margin="2"
                        VerticalAlignment="Center" Content="Loop" 
                        Checked="MyLooper_Checked" Unchecked="MyLooper_Unchecked"
                        IsChecked="True"/>
        
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    
  </Grid.Resources>
  
  <!-- 
  Add a Map control with an ArcGISTiledMapServiceLayer and a GraphicsLayer. The Map.TimeExtent is
  bound to the MyTimeSlider (TimeSlider) control. The MyTimeSlider will control what TimeExtent (i.e.
  slices of time) can be viewed in the Map control.
        
  The GraphicsLayer will contain several Graphics based upon MapPoint geometries (which use the 
  defined SpatialReference) which use the RedMarkerSymbol as the default symbolization, and have various 
  TimeExtent values set. When the specific Graphic elements have a TimeExtent that falls within the 
  Map.TimeExtent will they be displayed based upon the MyTimeSlider settings.
  -->
  <esri:Map Background="White" HorizontalAlignment="Left" Margin="12,150,0,0" Name="Map1" 
          VerticalAlignment="Top" Height="318" Width="341" 
          TimeExtent="{Binding ElementName=MyTimeSlider, Path=Value}">
  
    <esri:ArcGISTiledMapServiceLayer ID="PhysicalTiledLayer" 
                 Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" />
    
    <!-- 
    It is important to provide the GraphicsLayer with an 'ID' Attribute so to be able to access it
    in the code-behind file. 
    -->
    <esri:GraphicsLayer ID="MyGraphicsLayer" >
    
      <esri:GraphicsLayer.Graphics>
      
        <!-- 
        Each Graphic added to the GraphicsLayer will have it's symbology, TimeExtent and geometry defined. 
        -->
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/04 12:00:01 UTC" >
          <esri:MapPoint X="-7356594.25" Y="4752385.95" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/07 06:30:00 UTC">
          <esri:MapPoint X="5654893.89" Y="3718746.02" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/10 05:15:15 UTC">
          <esri:MapPoint X="-13654893.89" Y="-1718746.02" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/14 03:03:00 UTC">
          <esri:MapPoint X="3654893.89" Y="7718746.02" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/18 09:11:51 UTC">
          <esri:MapPoint X="6801033.36" Y="10325547.30" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/20 01:00:03 UTC">
          <esri:MapPoint X="-5468910.57" Y="1741081.03" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        <esri:Graphic Symbol="{StaticResource RedMarkerSymbol}" TimeExtent="2000/08/22 18:23:43 UTC">
          <esri:MapPoint X="-4614958.43" Y="-326382.05" SpatialReference="{StaticResource theSpatialReference}"/>
        </esri:Graphic>
        
      </esri:GraphicsLayer.Graphics>
    </esri:GraphicsLayer>
  </esri:Map>
  
  <!-- 
  Add a TimeSlider to control the display of what geographic features are displayed in the Map Control
  based upon a specified TimeExtent. In the case of this sample code, when the specific Graphic elements 
  have a TimeExtent that falls within the Map.TimeExtent will they be displayed based upon the MyTimeSlider 
  settings.
  
  Tip: It is the x:Name Attribute that allows you to access the TimeSlider Control in the code-behind file. 
    
  The Loop Attribute of True allows continuous playing of the TimeSlider once it initialized in the code-behind.
      
  The PlaySpeed Attribute follows the format of "hh:mm:ss" where, hh = hours (0 to 24), mm = minutes (0 to 60),
  and ss = seconds (0 to 60). In this example the PlaySpeed increments the time intervals every tenth of a second
  (i.e. 0.1).
      
  The TimeMode Attribute of CumulativeFromStart means there is a fixed start date/time (2000/08/04 00:00:00 UTC
  in this example) that does not change and an end date/time that adjusts as the specified Interval (one day 
  in this example which is set in the code-behind) increases. As the 'thumb' of the TimeSlider control moves
  to the right along the slider track the TimeExtent Interval of the TimeSlider increases.
      
  The MinimumValue Attribute specifies the starting date/time of the TimeSlider track.
      
  The MaximumValue Attribute specifies the ending date/time of the TimeSlider track.
    
  The Value Attribute specifies the date/time location of the thumb along the TimeSlider track. The thumb can 
  have a start date/time and end date/time set for a TimeExtent which will display a window of time as the
  thumb moves along the TimeSlider track but this is best for TimeMode Attribute of 'TimeExtent'. Since
  this example is showing a TimeMode of 'CumulativeFromStart' it is best to have the thumb just use a single
  date/time specified for the Value set to the same date/time as the MinimumValue.
    
  The last thing needed to enable the full capabilities of a TimeSlider (i.e. having the PlayPause, Next, 
  and Previous buttons) is to set the Intervals Property. In Silverlight, this can only be done in code-behind to 
  construct the Collection Type of IEnumerable(Of Date). Without the TimeSlider.Intervals being set the user 
  has to manually move the thumb across the TimeSlider track to change the Map.TimeExtent and thereby see what 
  Graphics can be displayed for that date/time window.
  -->
  <esri:TimeSlider x:Name="MyTimeSlider" 
                    Loop="True" PlaySpeed="0:0:0.1"
                    TimeMode="CumulativeFromStart"                 
                    MinimumValue="2000/08/04 00:00:00 UTC"
                    MaximumValue="2000/08/24 00:00:00 UTC"
                    Height="22" Margin="12,122,0,0" 
                    Value="2000/08/04 00:00:00 UTC"
                    HorizontalAlignment="Left" VerticalAlignment="Top" Width="341" 
                    Style="{StaticResource TimeSliderStyle1}"/>
            
  <!-- Provide the instructions on how to use the sample code. -->
  <TextBlock Height="87" HorizontalAlignment="Left" Name="TextBlock1" VerticalAlignment="Top" Width="455" 
           TextWrapping="Wrap" Margin="12,0,0,0" 
           Text="Click the 'Initialize the TimeSlider' button to initialize all the TimeSlider functions 
             (PlayPauseButton, NextButton, PreviousButton). Then push the play button to start the animations. 
             Check on/off the Loop CheckBox to see the different effects of the Loop Property. The code example 
             demonstrates a modified Control Template of the TimeSlider." />
            
  <!-- Add a button to perform the work of fully initiaizing the TimeSlider. -->
  <Button Content="Initialize the TimeSlider" Height="23" HorizontalAlignment="Left" 
        Margin="12,93,0,0" Name="Button1" VerticalAlignment="Top" Width="341" Click="Button1_Click"/>
            
</Grid>
C#Copy Code
private void Button1_Click(object sender, System.Windows.RoutedEventArgs e)
{
  // This function sets up TimeSlider Intervals that define the tick marks along the TimeSlider track. Intervals 
  // are a Collection of IEnumerable<DateTime> objects. When the TimeSlider.Intervals Property is set along with 
  // the other necessary TimeSlider Properties, the full functionality of the TimeSlider is enabled. This full 
  // functionality includes buttons for PlayPause, Next, and Previous.
  
  // Obtain the start and end DateTime values from the TimeSlider named MyTimeSlider that was defined in XAML.
  DateTime myMinimumDate = MyTimeSlider.MinimumValue;
  DateTime myMaximumDate = MyTimeSlider.MaximumValue;
  
  // Create a TimeExtent based upon the start and end date/times.
  ESRI.ArcGIS.Client.TimeExtent myTimeExtent = new ESRI.ArcGIS.Client.TimeExtent(myMinimumDate, myMaximumDate);
  
  // Create a new TimeSpan (1 day in our case).
  TimeSpan myTimeSpan = new TimeSpan(1, 0, 0, 0);
  
  // Create an empty Collection of IEnumerable<DateTime> objects.
  System.Collections.Generic.IEnumerable<Date> myIEnumerableDates = null;
  
  // Load all of DateTimes into the Collection of IEnumerable<DateTime> objects using the 
  // TimeSlider.CreateTimeStopsByTimeInterval is a Shared/Static function.
  myIEnumerableDates = ESRI.ArcGIS.Client.Toolkit.TimeSlider.CreateTimeStopsByTimeInterval(myTimeExtent, myTimeSpan);
  
  // Set the TimeSlider.Intervals which define the tick marks along the TimeSlider track to the IEnumerable<DateTime> 
  // objects.
  MyTimeSlider.Intervals = myIEnumerableDates;
}
  
private void MyLooper_Checked(object sender, System.Windows.RoutedEventArgs e)
{
  // Enabling Looping.
  MyTimeSlider.Loop = true;
}
  
private void MyLooper_Unchecked(object sender, System.Windows.RoutedEventArgs e)
{
  // Disable Looping.
  MyTimeSlider.Loop = false;
}
VB.NETCopy Code
Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
            
  ' This function sets up TimeSlider Intervals that define the tick marks along the TimeSlider track. Intervals 
  ' are a Collection of IEnumerable(Of Date) objects. When the TimeSlider.Intervals Property is set along with 
  ' the other necessary TimeSlider Properties, the full functionality of the TimeSlider is enabled. This full 
  ' functionality includes buttons for PlayPause, Next, and Previous.
  
  ' Obtain the start and end Date/Time values from the TimeSlider named MyTimeSlider that was defined in XAML.
  Dim myMinimumDate As Date = MyTimeSlider.MinimumValue
  Dim myMaximumDate As Date = MyTimeSlider.MaximumValue
  
  ' Create a TimeExtent based upon the start and end date/times.
  Dim myTimeExtent As New ESRI.ArcGIS.Client.TimeExtent(myMinimumDate, myMaximumDate)
  
  ' Create a new TimeSpan (1 day in our case).
  Dim myTimeSpan As New TimeSpan(1, 0, 0, 0)
  
  ' Create an empty Collection of IEnumerable(Of Date) objects.
  Dim myIEnumerableDates As System.Collections.Generic.IEnumerable(Of Date)
  
  ' Load all of Dates into the Collection of IEnumerable(Of Date) objects using the 
  ' TimeSlider.CreateTimeStopsByTimeInterval is a Shared/Static function.
  myIEnumerableDates = ESRI.ArcGIS.Client.Toolkit.TimeSlider.CreateTimeStopsByTimeInterval(myTimeExtent, myTimeSpan)
  
  ' Set the TimeSlider.Intervals which define the tick marks along the TimeSlider track to the IEnumerable(Of Date) 
  ' objects.
  MyTimeSlider.Intervals = myIEnumerableDates
  
End Sub
            
Private Sub MyLooper_Checked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  ' Enabling Looping.
  MyTimeSlider.Loop = True
End Sub
            
Private Sub MyLooper_Unchecked(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)
  ' Disable Looping.
  MyTimeSlider.Loop = False
End Sub

Requirements

Target Platforms: Windows XP Professional, Windows Server 2003 family, Windows Vista, Windows Server 2008 family, Windows 7

See Also

© ESRI, Inc. All Rights Reserved.