TimeSlider Image Service Online

This sample displays an interval (in months) of images on the earth using an ESRI.ArcGIS.Client.Toolkit TimeSlider control. The images are based on an ArcGISImageServiceLayer using the MosaicRule of esriMosaicCenter. The image data is for the year 2004 and shows seasonal variations in vegetation and snowfall. To use the sample, push the play button to automate the images on the map. It is also possible to use the forward and rewind buttons to manually cycle through the images being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.TimeImageService"
    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" Background="White">
        <Grid.Resources>
            <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, Mode=OneWay}" WrapAround="True">

            <esri:ArcGISImageServiceLayer Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/World/MODIS/ImageServer" >
                <esri:ArcGISImageServiceLayer.MosaicRule>
                    <esri:MosaicRule MosaicMethod="esriMosaicCenter" />
                </esri:ArcGISImageServiceLayer.MosaicRule>
            </esri:ArcGISImageServiceLayer>

        </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" >
                    <StackPanel HorizontalAlignment="Center">
                        <TextBlock HorizontalAlignment="Center" FontSize="16" Text="Surface of the World" Foreground="Black"/>
                        <TextBlock HorizontalAlignment="Center" FontSize="14" Text="Month by Month" Foreground="Black"/>
                    </StackPanel>
                    <StackPanel DataContext="{Binding ElementName=MyTimeSlider, Path=Value}" 
                            Orientation="Horizontal" Margin="5" HorizontalAlignment="Center">
                        <TextBlock Text="{Binding End.Month}" FontSize="12" Foreground="Black"/>
                        <TextBlock Text="/" FontSize="12" Foreground="Black" />
                        <TextBlock Text="{Binding End.Year}" FontSize="12" Foreground="Black" />
                    </StackPanel>
                    <esri:TimeSlider x:Name="MyTimeSlider"
                        Loaded="MyTimeSlider_Loaded"
                        TimeMode="TimeInstant"
                                                Height="20"  
                        MinimumValue="2004/01/01" 
                                                MaximumValue="2004/12/01"
                        Value="2004/01/01"/>
                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</UserControl>
 

C#

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;

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

        private void MyTimeSlider_Loaded(object sender, RoutedEventArgs e)
        {
            List<DateTime> DateTimeMonths = new List<DateTime>();
            for (int i = 1; i <= 12; i++)
            {
                DateTimeMonths.Add(new DateTime(2004, i, 1, 0, 0, 0, DateTimeKind.Utc));
            }

            MyTimeSlider.Intervals = DateTimeMonths;
        }
    }
}

VB.NET

Imports System.Collections.Generic
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Documents

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

        Private Sub MyTimeSlider_Loaded(sender As Object, e As RoutedEventArgs)
            Dim DateTimeMonths As New List(Of DateTime)()
            For i As Integer = 1 To 12
                DateTimeMonths.Add(New DateTime(2004, i, 1, 0, 0, 0, _
                 DateTimeKind.Utc))
            Next

            MyTimeSlider.Intervals = DateTimeMonths
        End Sub
    End Class
End Namespace