TimeSlider FeatureLayer Online

This sample displays an interval (in years) of earthquakes on the Map using an ESRI.ArcGIS.Client.Toolkit TimeSlider control. The Earthquakes are based on a FeatureLayer that has valid TimeExtents set and has a Renderer set using SimpleMarkerSymbols. Earthquake data is valid from 1970 to 2009. To use the sample, adjust the minimum and maximum values on the TimeSlider to specify a range in years for earthquakes to display. The minimum TimeSlider interval that can be set is 2 years. Push the play button to automate the earthquakes on the map. It is also possible to use the forward and rewind buttons to manually cycle through the interval of earthquakes being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.TimeFeatureLayer"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <esri:SimpleMarkerSymbol x:Key="MySmallMarkerSymbol" Color="#FF0098E6" Size="5" Style="Circle" />
            <esri:SimpleMarkerSymbol x:Key="MyMediumMarkerSymbol" Color="#FFFCEC01" Size="8" Style="Circle" />
            <esri:SimpleMarkerSymbol x:Key="MyLargeMarkerSymbol" Color="#FFF60D0B" Size="12" Style="Circle" />
            <esri:ClassBreaksRenderer x:Key="MyClassBreaksRenderer" Field="Magnitude" >
                <esri:ClassBreaksRenderer.Classes>
                    <esri:ClassBreakInfo MinimumValue="0" MaximumValue="6" Symbol="{StaticResource MySmallMarkerSymbol}" />
                    <esri:ClassBreakInfo MinimumValue="6" MaximumValue="8" Symbol="{StaticResource MyMediumMarkerSymbol}" />
                    <esri:ClassBreakInfo MinimumValue="8" MaximumValue="10" Symbol="{StaticResource MyLargeMarkerSymbol}" />
                </esri:ClassBreaksRenderer.Classes>
            </esri:ClassBreaksRenderer>
            <LinearGradientBrush x:Key="PanelGradient" EndPoint="0.5,1" StartPoint="0.5,0">
                <LinearGradientBrush.RelativeTransform>
                    <TransformGroup>
                        <ScaleTransform CenterY="0.5" CenterX="0.5"/>
                        <SkewTransform CenterY="0.5" CenterX="0.5"/>
                        <RotateTransform Angle="176" CenterY="0.5" CenterX="0.5"/>
                        <TranslateTransform/>
                    </TransformGroup>
                </LinearGradientBrush.RelativeTransform>
                <GradientStop Color="#FF145787" Offset="0.16"/>
                <GradientStop Color="#FF3D7FAC" Offset="0.502"/>
                <GradientStop Color="#FF88C5EF" Offset="0.984"/>
            </LinearGradientBrush>
        </Grid.Resources>
        <esri:Map x:Name="MyMap" 
            TimeExtent="{Binding ElementName=MyTimeSlider, Path=Value}" WrapAround="True">
            <esri:ArcGISTiledMapServiceLayer ID="BaseLayer"
                    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer" />
            <esri:FeatureLayer ID="EarthquakesLayer"
                    Initialized="FeatureLayer_Initialized"
                    Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/Since_1970/MapServer/0"
                    Renderer="{StaticResource MyClassBreaksRenderer}"
                    OutFields="*">
                <esri:FeatureLayer.MapTip>
                    <Border CornerRadius="10" BorderBrush="Black" BorderThickness="2" Margin="0,0,15,15" Background="{StaticResource PanelGradient}">                  
                            <StackPanel Margin="7">
                            <TextBlock Text="{Binding [Name]}" FontWeight="Bold" Foreground="White"  />
                            <StackPanel Orientation="Vertical">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Date: " Foreground="White" />
                                    <TextBlock Text="{Binding [Date_]}" Foreground="White" />
                                </StackPanel>
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock Text="Magnitude: " Foreground="White" />
                                    <TextBlock Text="{Binding [Magnitude]}" Foreground="White" />
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </Border>
                </esri:FeatureLayer.MapTip>
            </esri:FeatureLayer>
        </esri:Map>
        <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,10,0" >
            <Rectangle Fill="{StaticResource PanelGradient}" Stroke="Gray"  RadiusX="10" RadiusY="10" Margin="0,0,0,5" >
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Border Background="#FFFFFFFF" BorderBrush="DarkGray" CornerRadius="5" Margin="10,10,10,15"
                    Width="250" HorizontalAlignment="Center" VerticalAlignment="Top" >
                <StackPanel Margin="5">
                    <TextBlock Text="Earthquakes" FontSize="16" HorizontalAlignment="Center" Foreground="Black"/>
                    <StackPanel DataContext="{Binding ElementName=MyTimeSlider, Path=Value}" Orientation="Horizontal" Margin="5"
                            HorizontalAlignment="Center">
                        <TextBlock Text="{Binding Start.Year}" FontSize="12" Foreground="Black" />
                        <TextBlock Text=" -&gt; " FontSize="12" Foreground="Black" />
                        <TextBlock Text="{Binding End.Year}" FontSize="12" Foreground="Black" />
                    </StackPanel>
                    <esri:TimeSlider x:Name="MyTimeSlider" 
                        Height="20" TimeMode="TimeExtent"
                        MinimumValue="{Binding ElementName=MyMap, Path=Layers[EarthquakesLayer].TimeExtent.Start, Mode=OneWay}" 
                        MaximumValue="{Binding ElementName=MyMap, Path=Layers[EarthquakesLayer].TimeExtent.End, Mode=OneWay}"
                        Value="{Binding ElementName=MyMap, Path=Layers[EarthquakesLayer].TimeExtent, Mode=OneWay}" >
                    </esri:TimeSlider>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</UserControl>

C#

using System;
using System.Collections.Generic;
using System.Windows.Controls;
using ESRI.ArcGIS.Client;
using System.Windows.Data;

namespace ArcGISWPFSDK
{
    public partial class TimeFeatureLayer : UserControl
    {
        public TimeFeatureLayer()
        {
            InitializeComponent();
        }

        private void FeatureLayer_Initialized(object sender, EventArgs e)
        {
            List<DateTime> intervals = new List<DateTime>();
            DateTime dt = MyTimeSlider.MinimumValue;
            while (dt < MyTimeSlider.MaximumValue)
            {
                intervals.Add(dt);
                dt = dt.AddYears(2);
            }

            MyTimeSlider.Intervals = intervals;
        }
    }
}

VB.NET

Imports System.Collections.Generic
Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client
Imports System.Windows.Data

Namespace ArcGISWPFSDK
    Partial Public Class TimeFeatureLayer
        Inherits UserControl
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub FeatureLayer_Initialized(sender As Object, e As EventArgs)
            Dim intervals As New List(Of DateTime)()
            Dim dt As DateTime = MyTimeSlider.MinimumValue
            While dt < MyTimeSlider.MaximumValue
                intervals.Add(dt)
                dt = dt.AddYears(2)
            End While

            MyTimeSlider.Intervals = intervals
        End Sub
    End Class
End Namespace