The Symbol object is used to defined how to render a ESRI.ArcGIS.Client.Graphic in a ESRI.ArcGIS.Client.GraphicsLayer. The symbol mainly consists of a ControlTemplate and optionally a set of properties that can be bound into the template. A ESRI.ArcGIS.Client.Graphic's ESRI.ArcGIS.Client.Graphic.Geometry type must match the symbol type. Ie. a MarkerSymbol for a MapPoint or MultiPoint, FillSymbol for a Polygon and LineSymbol for a Polyline.

Custom templates: Generally when you use custom templates you should be using the base MarkerSymbol, FillSymbol and LineSymbol types, and refrain from using the Simple* sub types such as SimpleMarkerSymbol, SimpleLineSymbol, and SimpleFillSymbol.

FillSymbol and LineSymbol are required to have a System.Windows.Shapes.Path element with the name "Element" at the root of the template. MarkerSymbol templates however can be any type of System.Windows.UIElement, however to achieve the best performance when rendering many Graphics, it is best to have as few System.Windows.UIElements in the template as possible, and try to share resources across multiple Graphics that uses the same symbol (ie. share the same Brush in a static resource rather than create one inside the template).

Example: Custom MarkerSymbol template: The below example creates a square marker symbol with rounded corners 20x20 pixels. We use the OffsetX and OffsetY properties to center the symbol on top of the Graphic.

            <esriSymbols:MarkerSymbol OffsetX="10" OffsetY="10">
              <esriSymbols:MarkerSymbol.ControlTemplate>
                <ControlTemplate>
                  <Border Width="20" Height="20" CornerRadius="3" 
                          BorderBrush="Black" BorderThickness="1" 
                          Background="Blue">
                    <Image Source="myImage.png" />
                  </Border>
                </ControlTemplate>
              </esriSymbols:MarkerSymbol.ControlTemplate>
            </esriSymbols:MarkerSymbol>
            

Animating symbols using Visual States: The control template has two System.Windows.VisualStateGroups that can be used in the custom template. These System.Windows.Media.Animation.Storyboard animations are automatically triggered when the user mouses over the graphic or changes the Selected property. Note: The XAML System.Windows.VisualStateManager Class was newly added in the .NET Framework v4.0. If you are running the .NET Framework v3.5 then you can download and Reference the WPFToolkit on Codeplex to take advantage of the VisualStateManager Class.

Example: MarkerSymbol that becomes bigger when the user mouse-overs it:

            <ControlTemplate>
              <Ellipse x:Name="ellipse"
                     RenderTransformOrigin="0.5,0.5" 
                     Fill="{Binding Symbol.Color}"
                     Width="{Binding Symbol.Size}"
                     Height="{Binding Symbol.Size}" >
                <VisualStateManager.VisualStateGroups>
                  <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                      <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1" Duration="0:0:0.1" />
                        <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1" Duration="0:0:0.1" />
                      </Storyboard>
                    </VisualState>
                    <VisualState x:Name="MouseOver">
                      <Storyboard>
                        <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="1.25" Duration="0:0:0.1" />
                        <DoubleAnimation BeginTime="00:00:00" Storyboard.TargetName="ellipse" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="1.25" Duration="0:0:0.1" />
                      </Storyboard>
                    </VisualState>
                  </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Ellipse.RenderTransform>
                  <ScaleTransform ScaleX="1" ScaleY="1" />
                </Ellipse.RenderTransform>
              </Ellipse>
            </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" />
                    <VisualState x:Name="Selected">
                      <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Element"
                                                   Storyboard.TargetProperty="Fill">
                          <DiscreteObjectKeyFrame KeyTime="0:0:0">
                            <DiscreteObjectKeyFrame.Value>
                              <SolidColorBrush Color="Cyan" />
                            </DiscreteObjectKeyFrame.Value>
                          </DiscreteObjectKeyFrame>
                        </ObjectAnimationUsingKeyFrames>
                      </Storyboard>
                    </VisualState>
                  </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
              </Path>        
            </ControlTemplate>
            

System.Object
   System.Windows.DependencyObject
      ESRI.ArcGIS.Client.Symbols.Symbol
         ESRI.ArcGIS.Client.Symbols.FillSymbol
         ESRI.ArcGIS.Client.Symbols.LineSymbol
         ESRI.ArcGIS.Client.Symbols.MarkerSymbol

Target Platforms: Windows Vista, Windows 7

Reference