Temporal Renderer Points

This sample displays the cumulative activity of hurricanes on the Map using an ESRI.ArcGIS.Client.Toolkit TimeSlider control. The hurricanes are based on a local feature layer that has valid TimeExtents set and has a Renderer set using SimpleMarkerSymbols as well as more complex animations using a MarkerSymbol.ControlTemplate. To use the sample, push the play button to automate the hurricanes on the map. It is also possible to use the forward and rewind buttons to manually cycle through the cumulative hurricanes being displayed.

XAML

<UserControl x:Class="ArcGISWPFSDK.LocalTemporalRendererPoints"
    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>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <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/hurr_100_icon.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="WINDSPEED" >
                        <esri:ClassBreaksRenderer.Classes>
                            <esri:ClassBreakInfo MinimumValue="0" MaximumValue="50" Symbol="{StaticResource MySmallMarkerSymbol}" />
                            <esri:ClassBreakInfo MinimumValue="51" MaximumValue="99" Symbol="{StaticResource MyMediumMarkerSymbol}" />
                            <esri:ClassBreakInfo MinimumValue="100" MaximumValue="110" 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, Mode=OneWay}" WrapAround="True" MinimumResolution="2445.98490512499" Extent="-15141796.142,113237.394,5976634.055,8887493.525">
            <esri:ArcGISLocalTiledLayer ID="TopoMapLayer"
                  Path="..\\Data\\TPKs\\Topographic.tpk"/>
            <esri:ArcGISLocalFeatureLayer ID="MyHurricaneFeatureLayer"  Path="..\\Data\\MPKs\\TimeAwareHurricanes.mpk"  Renderer="{StaticResource MyTemporalRenderer}"
 LayerName="TimeAwareHurricanes" OutFields="*"  Initialized="ArcGISLocalFeatureLayer_Initialized"/>
        </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="Hurricanes" FontSize="16" HorizontalAlignment="Center" Foreground="Black"/>
                    <esri:TimeSlider x:Name="MyTimeSlider" Loop="True"
                        Height="20" TimeMode="CumulativeFromStart" PlaySpeed="00:00:01.5" 
                                        MinimumValue="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.Start, Mode=OneWay}" 
                        MaximumValue="{Binding ElementName=MyMap, Path=Layers[MyHurricaneFeatureLayer].TimeExtent.End, Mode=OneWay}">
                    </esri:TimeSlider>
                </StackPanel>
            </Border>
        </Grid>
        <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;
using System.Windows;
using System.Windows.Controls;
using ESRI.ArcGIS.Client;
using ESRI.ArcGIS.Client.Toolkit;
using System.ComponentModel;

namespace ArcGISWPFSDK
{
    public partial class LocalTemporalRendererPoints : 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 LocalTemporalRendererPoints()
        {
            InitializeComponent();
        }

        private void ArcGISLocalFeatureLayer_Initialized(object sender, 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
Imports System.Windows.Controls
Imports ESRI.ArcGIS.Client
Imports ESRI.ArcGIS.Client.Toolkit
Imports System.ComponentModel


Namespace ArcGISWPFSDK
    Partial Public Class LocalTemporalRendererPoints
        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 ArcGISLocalFeatureLayer_Initialized(sender As Object, e As 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