Temporal Renderer Points Online

This sample displays the cumulative activity (in 2 hour increments) 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 as well as more complex animations using a MarkerSymbol.ControlTemplate. Earthquake data is valid for the last 7 days from the USGS in 2 hour increments. To use the sample, 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 cumulative earthquakes being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.TemporalRendererPoints"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:esri="http://schemas.esri.com/arcgis/client/2009">

    <Grid x:Name="LayoutRoot" Background="White">

        <Grid.Resources>
            <esri:MarkerSymbol x:Key="ResonateMarkerSymbol">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Canvas>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Offset)" Storyboard.TargetName="ellipse">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0.372"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:00.5" Value="0.453"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:01" Value="0.704"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:01.5" Value="0.968"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[4].(GradientStop.Offset)" Storyboard.TargetName="ellipse">
                                                <EasingDoubleKeyFrame KeyTime="0:0:00.5" Value="0.58"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:01" Value="0.784"/>
                                                <EasingDoubleKeyFrame KeyTime="0:0:01.5" Value="0.992"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <DoubleAnimation BeginTime="0"
                                                Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                From="1" To="0" Duration="0:0:01.5" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse x:Name="ellipse" Height="70" StrokeThickness="3" Width="70" 
                                     Canvas.Left="-35" Canvas.Top="-35">
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#FFC82727"/>
                                        <GradientStop Color="#FF141413" Offset="0.255"/>
                                        <GradientStop Color="#FF700C0B" Offset="0.115"/>
                                        <GradientStop Color="#D3373433" Offset="0.381"/>
                                        <GradientStop Color="#00F3EBE9" Offset="0.667"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Rectangle x:Name="rectangle" Width="20" Height="20" Canvas.Left="-10" Canvas.Top="-10"
                                       IsHitTestVisible="False">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="/Assets/Images/quake-30x30.png" />
                                </Rectangle.Fill>
                            </Rectangle>
                        </Canvas>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>

            <esri:SimpleMarkerSymbol x:Key="MySmallMarkerSymbol" Size="8"  >
                <esri:SimpleMarkerSymbol.Color>
                    <RadialGradientBrush>
                        <GradientStop Color="Yellow" Offset="0.778"/>
                        <GradientStop Color="#FF0E0D07" Offset="1"/>
                    </RadialGradientBrush>
                </esri:SimpleMarkerSymbol.Color>
            </esri:SimpleMarkerSymbol>
            <esri:SimpleMarkerSymbol x:Key="MyMediumMarkerSymbol" Size="12" >
                <esri:SimpleMarkerSymbol.Color>
                    <RadialGradientBrush>
                        <GradientStop Color="Orange" Offset="0.778"/>
                        <GradientStop Color="#FF0E0D07" Offset="1"/>
                    </RadialGradientBrush>
                </esri:SimpleMarkerSymbol.Color>
            </esri:SimpleMarkerSymbol>
            <esri:SimpleMarkerSymbol x:Key="MyLargeMarkerSymbol" Size="18">
                <esri:SimpleMarkerSymbol.Color>
                    <RadialGradientBrush>
                        <GradientStop Color="Red" Offset="0.778"/>
                        <GradientStop Color="#FF0E0D07" Offset="1"/>
                    </RadialGradientBrush>
                </esri:SimpleMarkerSymbol.Color>
            </esri:SimpleMarkerSymbol>

            <!-- Temporal renderer -->
            <esri:TemporalRenderer x:Key="MyTemporalRenderer">

                <esri:TemporalRenderer.LatestObservationRenderer>
                    <esri:SimpleRenderer Symbol="{StaticResource ResonateMarkerSymbol}"  />
                </esri:TemporalRenderer.LatestObservationRenderer>

                <esri:TemporalRenderer.ObservationRenderer>
                    <esri:ClassBreaksRenderer Field="magnitude" >
                        <esri:ClassBreaksRenderer.Classes>
                            <esri:ClassBreakInfo MinimumValue="0" MaximumValue="4" Symbol="{StaticResource MySmallMarkerSymbol}" />
                            <esri:ClassBreakInfo MinimumValue="4" MaximumValue="7" Symbol="{StaticResource MyMediumMarkerSymbol}" />
                            <esri:ClassBreakInfo MinimumValue="7" MaximumValue="10" Symbol="{StaticResource MyLargeMarkerSymbol}" />
                        </esri:ClassBreaksRenderer.Classes>
                    </esri:ClassBreaksRenderer>
                </esri:TemporalRenderer.ObservationRenderer>

                <esri:TemporalRenderer.SymbolAger>
                    <esri:RampInterpolator>
                        <esri:RampInterpolator.OpacityRange>
                            <esri:OpacityRange From="1" To=".1" />
                        </esri:RampInterpolator.OpacityRange>
                    </esri:RampInterpolator>
                </esri:TemporalRenderer.SymbolAger>

            </esri:TemporalRenderer>
            <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 Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
            <esri:FeatureLayer ID="MyEarthquakeFeatureLayer" 
                               Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0"
                               OutFields="magnitude"
                               Renderer="{StaticResource MyTemporalRenderer}"/>
        </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 - Last 7 days" FontSize="12" HorizontalAlignment="Center" Foreground="Black"/>
                    <StackPanel DataContext="{Binding ElementName=MyTimeSlider, Path=Value}" Orientation="Horizontal" Margin="5"
                            HorizontalAlignment="Center">
                        <TextBlock Text="{Binding Start.Month}" FontSize="12" Foreground="Black" />
                        <TextBlock Text="/" FontSize="12" Foreground="Black"/>
                        <TextBlock Text="{Binding Start.Day}" FontSize="12" Foreground="Black"/>
                        <TextBlock Text=" " FontSize="12" Foreground="Black" />
                        <TextBlock Text="{Binding Start.Hour}" FontSize="12" Foreground="Black"/>
                        <TextBlock Text=":00" FontSize="12" Foreground="Black" />
                        <TextBlock Text=" -&gt; " FontSize="12" Foreground="Black" />
                        <TextBlock Text="{Binding End.Month}" FontSize="12" Foreground="Black" />
                        <TextBlock Text="/" FontSize="12" Foreground="Black" />
                        <TextBlock Text="{Binding End.Day}" FontSize="12" Foreground="Black" />
                        <TextBlock Text=" " FontSize="12" Foreground="Black"/>
                        <TextBlock Text="{Binding End.Hour}" FontSize="12" Foreground="Black" />
                        <TextBlock Text=":00" FontSize="12" Foreground="Black"/>
                    </StackPanel>

                    <esri:TimeSlider x:Name="MyTimeSlider" PlaySpeed="00:00:01.5" Loaded="MyTimeSlider_Loaded" 
                        Height="20" TimeMode="CumulativeFromStart">
                    </esri:TimeSlider>

                </StackPanel>
            </Border>
        </Grid>
    </Grid>
</UserControl>

C#

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

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

        private void MyTimeSlider_Loaded(object sender, RoutedEventArgs e)
        {
            MyTimeSlider.MinimumValue = DateTime.Now.Subtract(TimeSpan.FromDays(7)).ToUniversalTime();
            MyTimeSlider.MaximumValue = DateTime.Now.ToUniversalTime();
            MyTimeSlider.Value = new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddHours(2));
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(
                new TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue), new TimeSpan(0, 2, 0, 0));
        }
    }
}

VB.NET

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

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

        Private Sub MyTimeSlider_Loaded(sender As Object, e As RoutedEventArgs)
            MyTimeSlider.MinimumValue = DateTime.Now.Subtract(TimeSpan.FromDays(7)).ToUniversalTime()
            MyTimeSlider.MaximumValue = DateTime.Now.ToUniversalTime()
            MyTimeSlider.Value = New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MinimumValue.AddHours(2))
            MyTimeSlider.Intervals = TimeSlider.CreateTimeStopsByTimeInterval(New TimeExtent(MyTimeSlider.MinimumValue, MyTimeSlider.MaximumValue), New TimeSpan(0, 2, 0, 0))
        End Sub
    End Class
End Namespace