Selections

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.LocalSelectGraphics"
    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" WrapAround="True" Extent="-15000000,2000000,-7000000,8000000" Background="#FFE3E3E3" MinimumResolution="2445.98490512499">
            <esri:Map.Layers>
                <esri:ArcGISLocalTiledLayer ID="myBaseMap" Path="..\\Data\\TPKs\\Topographic.tpk"/>
                <esri:GraphicsLayer ID="MyGraphics" 
                                    MouseLeftButtonDown="GraphicsLayer_MouseLeftButtonDown" >
                    <esri:GraphicsLayer.Graphics >
                        <esri:Graphic Symbol="{StaticResource SelectMarkerSymbol}" >
                            <esri:MapPoint X="-11732579" Y="3310988"/>
                        </esri:Graphic>
                        <esri:Graphic Symbol="{StaticResource SelectMarkerSymbol}" >
                            <esri:MapPoint X="-9780783" Y="4014054" />
                        </esri:Graphic>
                        <esri:Graphic Symbol="{StaticResource SelectMarkerSymbol}" >
                            <esri:MapPoint X="-12210919" Y="4742944"/>
                        </esri:Graphic>
                        <esri:Graphic Symbol="{StaticResource SelectLineSymbol}" >
                            <esri:Polyline >
                                <esri:Polyline.Paths>
                                    <esri:PointCollection>
                                        <esri:MapPoint X="-13610919" Y="8242944" />
                                        <esri:MapPoint X="-12330709" Y="8326892" />
                                        <esri:MapPoint X="-12162813" Y="7739253" />
                                        <esri:MapPoint X="-13505984" Y="7781229" />
                                    </esri:PointCollection>
                                </esri:Polyline.Paths>
                            </esri:Polyline>
                        </esri:Graphic>
                        <esri:Graphic Symbol="{StaticResource SelectFillSymbol}">
                            <esri:Polygon >
                                <esri:Polygon.Rings>
                                    <esri:PointCollection>
                                        <esri:MapPoint X="-12582554" Y="5672031" />
                                        <esri:MapPoint X="-10735694" Y="6123252" />
                                        <esri:MapPoint X="-10620265" Y="5073900" />
                                        <esri:MapPoint X="-12433645" Y="4822056" />
                                        <esri:MapPoint X="-12582554" Y="5672031" />
                                    </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 LocalSelectGraphics : UserControl
    {
        public LocalSelectGraphics()
        {
            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 LocalSelectGraphics
        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