Selections Online

This sample demonstrates adding graphics (MapPoint, Polyline and Polygon) to the map using XAML. Different Symbol types (MarkerSymbol, LineSymbol and FillSymbol) are created and used in a StaticResource dictionary. Using Mouse Click events the graphics are selected and unselected which change the symbols to which they are bound.

XAML

<UserControl x:Class="ArcGISWPFSDK.SelectGraphics"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:System="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="SelectMarkerSymbol" >
                <esri:MarkerSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Ellipse x:Name="Element" Width="15" Height="15" StrokeThickness="10" 
                                 Stroke="Green" >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Ellipse.Stroke).(SolidColorBrush.Color)"
                                                To="Cyan" Duration="00:00:0.25"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Ellipse>
                    </ControlTemplate>
                </esri:MarkerSymbol.ControlTemplate>
            </esri:MarkerSymbol>
            <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>

            <esri:LineSymbol x:Key="SelectLineSymbol">
                <esri:LineSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Path x:Name="Element"
                            Stroke="Black"              
                            StrokeStartLineCap="Round"
                            StrokeThickness="4"
                            StrokeLineJoin="Round"
                            StrokeEndLineCap="Round">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <!--By specifying an empty Unselected state,
                                    unselecting the graphic will instantly set the
                                    values back to their original value without any animation.
                                    Set a storyboard if you want a smooth transition 
                                    back (see SelectFillSymbol template) -->
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element" 
                                                Storyboard.TargetProperty="(Path.Stroke).(SolidColorBrush.Color)"
                                                To="Yellow"  Duration="00:00:00.25" />
                                            <DoubleAnimation Storyboard.TargetName="Element"
                                                Storyboard.TargetProperty="StrokeThickness"
                                                To="10"  Duration="00:00:00.25" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Path>
                    </ControlTemplate>
                </esri:LineSymbol.ControlTemplate>
            </esri:LineSymbol>


            <esri:FillSymbol x:Key="SelectFillSymbol">
                <esri:FillSymbol.ControlTemplate>
                    <ControlTemplate>
                        <Path x:Name="Element"
                            Stroke="Black"
                            StrokeStartLineCap="Round"
                            StrokeThickness="2"
                            StrokeLineJoin="Round"
                            StrokeEndLineCap="Round"
              Fill="Blue" 
                            >
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" >
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element" 
                                            Storyboard.TargetProperty="(Path.Fill).Color"
                                            To="Blue"  Duration="00:00:00.25"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ColorAnimation Storyboard.TargetName="Element" 
                                            Storyboard.TargetProperty="(Path.Fill).Color"
                                            To="Cyan" Duration="00:00:00.25"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Element" Storyboard.TargetProperty="StrokeDashArray">
                                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <DoubleCollection>2,1</DoubleCollection>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Path>
                    </ControlTemplate>
                </esri:FillSymbol.ControlTemplate>
            </esri:FillSymbol>
        </Grid.Resources>

        <esri:Map x:Name="MyMap" Background="White" MaximumResolution="200" WrapAround="True">
            <esri:Map.Layers>

                <esri:ArcGISTiledMapServiceLayer ID="PhysicalTiledLayer" 
                      Url="http://services.arcgisonline.com/ArcGIS/rest/services/NGS_Topo_US_2D/MapServer"/>

                <esri:GraphicsLayer ID="MyGraphics" 
                                    MouseLeftButtonDown="GraphicsLayer_MouseLeftButtonDown" >
                    <esri:GraphicsLayer.Graphics >

                        <esri:Graphic Symbol="{StaticResource SelectMarkerSymbol}" >
                            <esri:MapPoint X="-140.9" Y="63.391" />
                        </esri:Graphic>

                        <esri:Graphic Symbol="{StaticResource SelectMarkerSymbol}" >
                            <esri:MapPoint X="-100.609" Y="43.729" />
                        </esri:Graphic>

                        <esri:Graphic Symbol="{StaticResource SelectMarkerSymbol}" >
                            <esri:MapPoint X="-80.210" Y="35.284" />
                        </esri:Graphic>

                        <esri:Graphic Symbol="{StaticResource SelectLineSymbol}" >
                            <esri:Polyline >
                                <esri:Polyline.Paths>
                                    <esri:PointCollection>
                                        <esri:MapPoint X="0" Y="51.399" />
                                        <esri:MapPoint X="2.637" Y="48.865" />
                                        <esri:MapPoint X="12.568" Y="41.706" />
                                        <esri:MapPoint X="13.447" Y="52.483" />
                                        <esri:MapPoint X="21.357" Y="52.160" />
                                        <esri:MapPoint X="30.322" Y="59.845" />
                                    </esri:PointCollection>
                                </esri:Polyline.Paths>
                            </esri:Polyline>
                        </esri:Graphic>

                        <esri:Graphic Symbol="{StaticResource SelectLineSymbol}" >
                            <esri:Polyline >
                                <esri:Polyline.Paths>
                                    <esri:PointCollection>
                                        <esri:MapPoint X="-118.169" Y="34.016" />
                                        <esri:MapPoint X="-104.941" Y="39.7072" />
                                        <esri:MapPoint X="-96.724" Y="32.732" />
                                        <esri:MapPoint X="-87.671" Y="41.804" />
                                        <esri:MapPoint X="-74" Y="40.68" />
                                    </esri:PointCollection>
                                </esri:Polyline.Paths>
                            </esri:Polyline>
                        </esri:Graphic>

                        <esri:Graphic Symbol="{StaticResource SelectFillSymbol}">
                            <esri:Polygon >
                                <esri:Polygon.Rings>
                                    <esri:PointCollection>
                                        110.039,-20.303 132.539,-7.0137 153.281,-13.923 162.773,-35.174 133.594,-43.180 111.797,-36.032 110.039,-20.303
                                    </esri:PointCollection>
                                </esri:Polygon.Rings>
                            </esri:Polygon>
                        </esri:Graphic>

                        <esri:Graphic Symbol="{StaticResource SelectFillSymbol}">
                            <esri:Polygon >
                                <esri:Polygon.Rings>
                                    <esri:PointCollection>
                                        <esri:MapPoint X="110.039" Y="20.303" />
                                        <esri:MapPoint X="132.539" Y="7.0137" />
                                        <esri:MapPoint X="162.773" Y="35.174" />
                                        <esri:MapPoint X="111.797" Y="36.032" />
                                        <esri:MapPoint X="110.039" Y="20.303" />
                                    </esri:PointCollection>
                                </esri:Polygon.Rings>
                            </esri:Polygon>
                        </esri:Graphic>

                    </esri:GraphicsLayer.Graphics>
                </esri:GraphicsLayer>

            </esri:Map.Layers>
        </esri:Map>

        <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,15,15,0" >
            <Rectangle Fill="{StaticResource PanelGradient}" Stroke="Gray"  RadiusX="10" RadiusY="10" Margin="0,0,0,5">
                <Rectangle.Effect>
                    <DropShadowEffect/>
                </Rectangle.Effect>
            </Rectangle>
            <Rectangle Fill="#FFFFFFFF" Stroke="DarkGray" RadiusX="5" RadiusY="5" Margin="10,10,10,15" />
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Margin="30,20,30,30" >
                <TextBlock x:Name="InformationText" Width="200"  Foreground="Black" Text="Click on graphics to toggle between selected and unselected states." TextAlignment="Left"  TextWrapping="Wrap" />
            </StackPanel>
        </Grid>

    </Grid>
</UserControl>

C#

using System.Windows.Controls;
using System.Windows.Media.Animation;

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

        private void GraphicsLayer_MouseLeftButtonDown(object sender, ESRI.ArcGIS.Client.GraphicMouseButtonEventArgs e)
        {
            e.Graphic.Selected = !e.Graphic.Selected;
        }
    }
}

VB.NET

Imports System.Windows.Controls
Imports System.Windows.Media.Animation

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

        Private Sub GraphicsLayer_MouseLeftButtonDown(sender As Object, e As ESRI.ArcGIS.Client.GraphicMouseButtonEventArgs)
            e.Graphic.Selected = Not e.Graphic.Selected
        End Sub
    End Class
End Namespace