TimeSlider MapService

This sample demonstrates using a TimeSlider control to display local time aware data. An ArcGISLocalDynamicMapServiceLayer is is used to display the local hurricane data. The legend (a screenshot of the legend in ArcMap) provides a key to the symbology used along a hurricanes path to indicate the stage of the hurricane.

To use the sample, push the play button on the TimeSlider control to automate the display the hurricanes on the map. It is also possible to use the forward and rewind buttons to manually cycle through the hurricanes' being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.LocalTimeMapService"
    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"
    xmlns:esriToolkitPrimitives="clr-namespace:ESRI.ArcGIS.Client.Toolkit.Primitives;assembly=ESRI.ArcGIS.Client.Toolkit">
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <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" Extent="-15141796.142,113237.394,5976634.055,8887493.525" MinimumResolution="2445.98490512499" WrapAround="True" TimeExtent="{Binding ElementName=MyTimeSlider, Path=Value}" >
            <esri:ArcGISLocalTiledLayer ID="BaseLayer" Path="..\\Data\\TPKs\\Topographic.tpk"/>
            <esri:ArcGISLocalDynamicMapServiceLayer ID="HurricaneLayer" 
                    Path="..\\Data\\MPKs\\TimeAwareHurricanes.mpk"
                    Initialized="ArcGISLocalDynamicMapServiceLayer_Initialized" />
        </esri:Map>
        <Grid HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="100,10,100,30" >
            <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"
                   HorizontalAlignment="Center" VerticalAlignment="Top" >
                <StackPanel Margin="5">
                    <Grid>
                        <TextBlock  
                        Text="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.Start, Mode=OneWay}" 
                        HorizontalAlignment="Left" Foreground="Black"/>
                        <TextBlock
                        Text="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.End, Mode=OneWay}" 
                        HorizontalAlignment="Right" Foreground="Black" />
                    </Grid>
                    <esri:TimeSlider x:Name="MyTimeSlider" 
                        Loop="True" PlaySpeed="0:0:1.5"
                        TimeMode="TimeExtent"                 
                        MinimumValue="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.Start, Mode=OneWay}"
                        MaximumValue="{Binding ElementName=MyMap, Path=Layers[HurricaneLayer].TimeExtent.End, Mode=OneWay}"                        
                        Height="20" />
                </StackPanel>
            </Border>
        </Grid>
        <Border Background="{StaticResource PanelGradient}" BorderThickness="1" CornerRadius="5"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Margin="20,20,20,30" Padding="10" BorderBrush="Black">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="30" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <TextBlock Text="Hurricane Stages" Foreground="White" Grid.Row="0" FontSize="16">
                    <TextBlock.Effect>
                        <DropShadowEffect ShadowDepth="1" />
                    </TextBlock.Effect>
                </TextBlock>
                <Border Background="White" Grid.Row="1" Padding="2" CornerRadius="5">
                    <Image x:Name="LegendImage" Source="/Assets/Images/localhurricane_legend.png" Stretch="None"
                   Margin="5" />
                </Border>
            </Grid>
        </Border>
        <ProgressBar x:Name="MyProgressBar" IsIndeterminate="True" VerticalAlignment="Bottom" Width="200" Height="20" Margin="10" Visibility="{Binding Path=IsBusy, Converter={StaticResource BooleanToVisibilityConverter}}"></ProgressBar>
    </Grid>
</UserControl>

C#

using System.Windows.Controls;
using ESRI.ArcGIS.Client.Toolkit;
using ESRI.ArcGIS.Client;
using System;
using System.ComponentModel;

namespace ArcGISWPFSDK
{
    public partial class LocalTimeMapService : UserControl, INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private bool _isBusy = true;

        public bool IsBusy
        {
            get
            {
                return _isBusy;
            }
            set
            {
                _isBusy = value;

                if (PropertyChanged != null)
                {

                    PropertyChanged(this, new PropertyChangedEventArgs("IsBusy"));
                }
            }
        }    
    
        public LocalTimeMapService()
        {
            InitializeComponent();
        }

        private void ArcGISLocalDynamicMapServiceLayer_Initialized(object sender, System.EventArgs e)
        {
            TimeExtent extent = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue);
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, TimeSpan.FromDays(2));
            MyTimeSlider.Value = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddDays(2));
            DataContext = this;
            IsBusy = false;
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client.Toolkit
Imports ESRI.ArcGIS.Client
Imports System.ComponentModel

Namespace ArcGISWPFSDK
    Partial Public Class LocalTimeMapService
        Inherits UserControl
        Implements INotifyPropertyChanged
        Public Event PropertyChanged As PropertyChangedEventHandler Implements INotifyPropertyChanged.PropertyChanged
        Private _isBusy As Boolean = True
        Public Property IsBusy() As Boolean
            Get
                Return _isBusy
            End Get
            Set(value As Boolean)
                _isBusy = value

                RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs("IsBusy"))
            End Set
        End Property
        Public Sub New()
            InitializeComponent()
        End Sub

        Private Sub ArcGISLocalDynamicMapServiceLayer_Initialized(sender As Object, e As System.EventArgs)
            Dim extent As New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue)
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(extent, TimeSpan.FromDays(2))
            MyTimeSlider.Value = New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddDays(2))
            DataContext = Me
            IsBusy = False
        End Sub
    End Class
End Namespace