Accelerated Layers & Custom Symbols Online

This sample illustrates how to use the accelerated group layer functionality to render accelerated local layers. Additional graphics layers are used to demonstrate how to display custom symbols, which are not supported by the accelerated display in the same map.

XAML

<UserControl x:Class="ArcGISWPFSDK.AcceleratedLayers"
           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>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
            <esri:SimpleRenderer x:Key="MySimplePolygonRenderer">
                <esri:SimpleRenderer.Symbol>
                    <esri:SimpleFillSymbol Fill="#440000FF"/>
                </esri:SimpleRenderer.Symbol>
            </esri:SimpleRenderer>
            <esri:SimpleRenderer x:Key="MySimplePointRenderer">
                <esri:SimpleRenderer.Symbol>
                    <esri:SimpleMarkerSymbol Color="Red"/>
                </esri:SimpleRenderer.Symbol>
            </esri:SimpleRenderer>
            <esri:MarkerSymbol x:Key="AnimatedStrobeMarkerSymbol">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Canvas>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimation BeginTime="0"
                                                                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
                                                                 From="1" To="10" Duration="00:00:01" />

                                            <DoubleAnimation BeginTime="0"
                                                                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleY)"
                                                                 From="1" To="10" Duration="00:00:01" />

                                            <DoubleAnimation BeginTime="0"
                                                                 Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                 From="1" To="0" Duration="00:00:01" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
                                         RenderTransformOrigin="0.5,0.5" x:Name="ellipse"
                                         IsHitTestVisible="False"
                                         >
                                <Ellipse.RenderTransform>
                                    <ScaleTransform />
                                </Ellipse.RenderTransform>
                                <Ellipse.Fill>
                                    <RadialGradientBrush>
                                        <GradientStop Color="#00FF0000" />
                                        <GradientStop Color="#FFFF0000" Offset="0.25"/>
                                        <GradientStop Color="#00FF0000" Offset="0.5"/>
                                        <GradientStop Color="#FFFF0000" Offset="0.75"/>
                                        <GradientStop Color="#00FF0000" Offset="1"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse Height="10" Width="10" Canvas.Left="-5" Canvas.Top="-5" 
                                         Fill="#FFFF0000" x:Name="ellipse1"/>
                        </Canvas>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>
            <esri:MarkerSymbol x:Key="AnimatedRotatingSymbol">
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid x:Name="RootElement" RenderTransformOrigin="0,0" >
                            <Grid.RenderTransform>
                                <RotateTransform Angle="0" CenterX="6" CenterY="10" />
                            </Grid.RenderTransform>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <DoubleAnimation BeginTime="00:00:00" 
                                                                    Storyboard.TargetName="RootElement" 
                                                                    Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)"
                                                                    From="0" To="360" Duration="0:0:3" 
                                                                    RepeatBehavior="Forever"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Polygon Points="0,0 12,0 12,6 8,10 12,14 12,20 0,20 0,14 4,10 0,6 0,0" 
                             Stroke="Red" StrokeThickness="1" Fill="Blue" />
                        </Grid>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>
            <esri:LineSymbol x:Key="AnimatedLineSymbol">
                <esri:LineSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard RepeatBehavior="Forever">
                                            <DoubleAnimation BeginTime="0:0:0" Storyboard.TargetName="Element" 
                                                                    Storyboard.TargetProperty="StrokeDashOffset" 
                                                                    To="1000" Duration="0:3:0" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path x:Name="Element" StrokeDashArray="2,1" StrokeDashOffset="0"
                                                     Stroke="Green" StrokeThickness="5" />
                        </Grid>
                    </ControlTemplate>
                </esri:LineSymbol.ControlTemplate>
            </esri:LineSymbol>
        </Grid.Resources>
        <esri:Map x:Name="MyMap" Background="#FFE3E3E3" Extent="-15000000,2000000,-7000000,8000000">
            <esri:AcceleratedDisplayLayers>
                <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer" 
                Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
                <esri:FeatureLayer ID="StatesFeatureLayer"
                    Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
                    Renderer="{StaticResource MySimplePolygonRenderer}" OutFields="*"/>
                <esri:FeatureLayer ID="CitiesFeatureLayer" 
                    Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0" 
                    Renderer="{StaticResource MySimplePointRenderer}" OutFields="*"/>
            </esri:AcceleratedDisplayLayers>
            <esri:GraphicsLayer ID="AnimatedStrobeMarkerSymbol">
                <esri:Graphic 
                        Symbol="{StaticResource AnimatedStrobeMarkerSymbol}">
                    <esri:MapPoint X="-9780783" Y="4014054" />
                </esri:Graphic>
            </esri:GraphicsLayer>
            <esri:GraphicsLayer ID="AnimatedRotatingSymbol">
                <esri:Graphic
            Symbol="{StaticResource AnimatedRotatingSymbol}">
                    <esri:Graphic.Geometry>
                        <esri:MapPoint   X="-12732570" Y="4410988" />
                    </esri:Graphic.Geometry>
                </esri:Graphic>
            </esri:GraphicsLayer>
            <esri:GraphicsLayer ID="AnimatedLineSymbol">
                <esri:Graphic Symbol="{StaticResource AnimatedLineSymbol}">
                    <esri:Polyline >
                        <esri:Polyline.Paths>
                            <esri:PointCollection>
                                <esri:MapPoint X="-12210919" Y="4742944" />
                                <esri:MapPoint X="-11730709" Y="4826892" />
                                <esri:MapPoint X="-11462813" Y="4539253" />
                                <esri:MapPoint X="-11605984" Y="4681229" />
                            </esri:PointCollection>
                        </esri:Polyline.Paths>
                    </esri:Polyline>
                </esri:Graphic>
            </esri:GraphicsLayer>
        </esri:Map>
        <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 System.ComponentModel;

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

            DataContext = this;

            MyMap.Layers.LayersInitialized += (o, evt) =>
            {
                IsBusy = false;

            };
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports System.ComponentModel

Namespace ArcGISWPFSDK
    Partial Public Class AcceleratedLayers
        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()
            AddHandler MyMap.Layers.LayersInitialized, AddressOf map_LayersInitialized
        End Sub
        Private Sub map_LayersInitialized(sender As Object, e As EventArgs)
            DataContext = Me
            IsBusy = False
        End Sub
    End Class
End Namespace