Working with symbols and renderers

Symbols define all the non-geographic aspects of a graphic's appearance. This includes a graphic's color, border width, transparency, and more. The ArcGIS API for Windows Phone includes many symbol classes, each of which allows you to specify symbology in a unique way. Each symbol type is also specific to one geometry type (i.e. point, line, or polygon). See the sections below on Symbol types and Creating symbols for details.

Renderers define one or more symbols to apply to a graphics layer. The symbol applied to each graphic depends on the graphic's attributes. The renderer specifies which attribute values correspond to which symbol. Renderers can define symbols based on unique values or on ranges of values. See Creating a unique value renderer and Creating a class breaks renderer sections below.

Symbol types

The available symbol types and the geometries to which they apply are summarized in the following table:

Symbol	Geometry	Description
SimpleMarkerSymbol	Point	Symbolizes points with simple shapes.
PictureMarkerSymbol	Point	Symbolizes points with images.
SimpleLineSymbol	Polyline	Symbolizes lines with pre-defined styles.
CartographicLineSymbol	Polyline	Symbolizes lines with custom styles.
SimpleFillSymbol	Polygon	Fills polygons with a Silverlight brush.
PictureFillSymbol	Polygon	Fills polygons with images.

Creating symbols

There are two ways to define and use symbols: through the XAML, and in the code-behind. Symbols defined in the XAML will be static resources. Those in the code-behind can be dynamically generated.

Defining symbols in XAML

In many applications, the same symbol will be used many times. Consider, for instance, an application that uses the Find task to allow users to search for counties. In this situation, it makes sense to apply the same symbology to the task's results every time the task is executed. In such cases, you should define a symbol in an application's XAML. This is the best place for the symbol's definition because, in Silverlight, an application's visual components are supposed to be specified in XAML, while its execution logic should be defined in .NET code. This makes for a neat separation between presentation layer and business logic, which makes applications easier to develop, maintain, and enhance.

To create a symbol in the XAML, take the following steps:

1. Create an application with a Map, base layer, and FeatureLayer as show in Feature layers.

   <esri:Map x:Name="MyMap" Extent="-130,10,-70,60">
       <esri:Map.Layers>
           <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer"
               Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
           <esri:FeatureLayer ID="MyFeatureLayer" >
           </esri:FeatureLayer>
       </esri:Map.Layers>
   </esri:Map>
   

   Note:

   • Don't forget to add a reference to the System.Runtime.Serialization assembly to your project.
   • Make sure you include XML namespace references for both the ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols namespaces in the ESRI.ArcGIS.Client assembly as attributes on the phone:PhoneApplicationPage element.

     xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
     xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbols;assembly=ESRI.ArcGIS.Client"
     

2. Set the FeatureLayer to use the states layer of the ESRI_Census_USA map service. Use the Where property to draw all features.

   <esri:FeatureLayer ID="MyFeatureLayer" Where="1 = 1" 
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" >
   </esri:FeatureLayer>
   

3. Declare static symbols in the resources of the LayoutRoot grid. The code below declares a SimpleFillSymbol with a semi-transparent red fill and a red outline that is two pixels wide. The x:Name attribute defines the name you will use to reference the Symbol either from XAML or in the page's code-behind.

   <Grid.Resources>
       <esriSymbols:SimpleFillSymbol x:Key="MyRedFillSymbol" 
           Fill="#66FF0000" 
           BorderBrush="Red" 
           BorderThickness="2" />
   </Grid.Resources>
   

4. Now that the symbol has been declared it can be can be applied to a FeatureLayer by binding to the FeatureSymbol property. This will apply the symbol to all the features in the layer.

   <esri:FeatureLayer ID="MyFeatureLayer" Where="1 = 1" FeatureSymbol="{StaticResource MyRedFillSymbol}"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" >
   </esri:FeatureLayer>
   

5. Run your application to see the United States symbolized with MyRedFillSymbol.

Defining symbols in code-behind

Alternatively, when a dynamically generated symbol is required, you can create and apply the symbol to graphics individually in the page's code-behind. The code here initializes a fill symbol with the fill color based on variables for the color's alpha, red, green, and blue values. The symbol is then applied to each Graphic in a GraphicsLayer.

SimpleFillSymbol fillSymbol = new SimpleFillSymbol()
{
    BorderBrush = new SolidColorBrush(Color.FromArgb(0, 255, 0, 0)),
    BorderThickness = 2,
    Fill = new SolidColorBrush(Color.FromArgb(alphaVal, redVal, greenVal, blueVal))
};

GraphicsLayer graphicsLayer = MyMap.Layers["MyGraphicsLayer"] as GraphicsLayer;
foreach (Graphic graphic in graphicsLayer.Graphics)
    graphic.Symbol = fillSymbol;

Creating a unique value renderer

With the unique value renderer, you can define symbols for graphics with particular attribute values. The steps for defining and consuming a simple unique value renderer are described below.

1. Create an application with a Map, base layer, and FeatureLayer as show in Feature layers.

   <esri:Map x:Name="MyMap" Extent="-130,10,-70,60">
       <esri:Map.Layers>
           <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer"
               Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
           <esri:FeatureLayer ID="MyFeatureLayer" >
           </esri:FeatureLayer>
       </esri:Map.Layers>
   </esri:Map>
   

   Note:

   • Don't forget to add a reference to the System.Runtime.Serialization assembly to your project.
   • Make sure you include XML namespace references for both the ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols namespaces in the ESRI.ArcGIS.Client assembly as attributes on the phone:PhoneApplicationPage element.

     xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
     xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbols;assembly=ESRI.ArcGIS.Client"
     

2. Set the FeatureLayer to use the states layer of the ESRI_Census_USA map service.

   <esri:FeatureLayer ID="MyFeatureLayer"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" >
   </esri:FeatureLayer>
   

3. Specify a filter on the FeatureLayer so that only California, New York, and Kansas are drawn.

   <esri:FeatureLayer ID="MyFeatureLayer"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
       Where="(STATE_NAME = 'California') OR (STATE_NAME = 'New York') OR (STATE_NAME = 'Kansas')" >
   </esri:FeatureLayer>
   

4. In order to specify strings as XAML elements, map a XML namespace to the CLR namespace that contains the String class. This class is contained in the System namespace of the mscorlib assembly. Inserting the attribute shown in the following code as an attribute of the phone:PhoneApplicationPage element in the XAML.

   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   

5. Specify that the STATE_NAME be included with the layer's graphics.

   <esri:FeatureLayer ID="MyFeatureLayer"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
       Where="(STATE_NAME = 'California') OR (STATE_NAME = 'New York') OR (STATE_NAME = 'Kansas')" >
       <esri:FeatureLayer.OutFields>
           <sys:String>STATE_NAME</sys:String>
       </esri:FeatureLayer.OutFields>
   </esri:FeatureLayer>
   

6. Declare three fill symbols as static resources. The declaration will be inside the LayoutRoot grid element.

   <Grid.Resources>
       <esriSymbols:SimpleFillSymbol x:Key="MyGreenFillSymbol" Fill="#6600FF00" BorderBrush="Green" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyYellowFillSymbol" Fill="#66FFFF00" BorderBrush="Yellow" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyRedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
   </Grid.Resources>
   

7. Declare a unique value renderer as a resource. The declaration will follow that of the symbols defined in the previous step.

   <Grid.Resources>
       <esriSymbols:SimpleFillSymbol x:Key="MyGreenFillSymbol" Fill="#6600FF00" BorderBrush="Green" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyYellowFillSymbol" Fill="#66FFFF00" BorderBrush="Yellow" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyRedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
       <esri:UniqueValueRenderer x:Key="MyUniqueValueRenderer" >
       </esri:UniqueValueRenderer>
   </Grid.Resources>
   

8. We are going to use the unique value renderer to symbolize state graphics based on the state's name, so within the renderer element, specify the Attribute property as STATE_NAME—the field holding the state name that we included with the graphics in step 5 above.

   <esri:UniqueValueRenderer x:Key="MyUniqueValueRenderer" Attribute="STATE_NAME" >
   </esri:UniqueValueRenderer>
   

9. The symbol-value mappings for unique value renderers are specified in a collection of UniqueValueInfo objects that are stored in the unique value renderer's Infos property. Inside the UniqueValueRenderer element, specify another element, UniqueValueRenderer.Infos, to hold this collection.

   <esri:UniqueValueRenderer x:Key="MyUniqueValueRenderer" Attribute="STATE_NAME" >
       <esri:UniqueValueRenderer.Infos>
       </esri:UniqueValueRenderer.Infos>
   </esri:UniqueValueRenderer>
   

10. Specify a UniqueValueInfo element inside the collection, mapping a STATE_NAME of California to the green fill symbol.

    <esri:UniqueValueRenderer x:Key="MyUniqueValueRenderer" Attribute="STATE_NAME" >
        <esri:UniqueValueRenderer.Infos>
            <esri:UniqueValueInfo Value="California" Symbol="{StaticResource MyGreenFillSymbol}" />
        </esri:UniqueValueRenderer.Infos>
    </esri:UniqueValueRenderer>
    

11. Add additional UniqueValueInfos to symbolize New York with the yellow fill symbol and Kansas with the red fill symbol.

    <esri:UniqueValueRenderer x:Key="MyUniqueValueRenderer" Attribute="STATE_NAME" >
        <esri:UniqueValueRenderer.Infos>
            <esri:UniqueValueInfo Value="California" Symbol="{StaticResource MyGreenFillSymbol}" />
            <esri:UniqueValueInfo Value="New York" Symbol="{StaticResource MyYellowFillSymbol}" />
            <esri:UniqueValueInfo Value="Kansas" Symbol="{StaticResource MyRedFillSymbol}" />
        </esri:UniqueValueRenderer.Infos>
    </esri:UniqueValueRenderer>
    

12. The unique value renderer resource has now been created. Next it must be associated with the feature layer. This is done by setting the Renderer property on the esri:FeatureLayer element.

    <esri:FeatureLayer ID="MyFeatureLayer"
        Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
        Where="(STATE_NAME = 'California') OR (STATE_NAME = 'New York') OR (STATE_NAME = 'Kansas')" 
        Renderer="{StaticResource MyUniqueValueRenderer}" >
        <esri:FeatureLayer.OutFields>
            <sys:String>STATE_NAME</sys:String>
        </esri:FeatureLayer.OutFields>
    </esri:FeatureLayer>
    

13. Run your application to see green California, yellow New York, and red Kansas.

Creating a class breaks renderer

The class breaks renderer allows you to apply symbols to groups of graphics that have attribute values within specified ranges. The steps for defining and consuming a class breaks renderer are described below.

1. Create an application with a Map, base layer, and FeatureLayer as show in Feature layers.

   <esri:Map x:Name="MyMap" Extent="-130,10,-70,60">
       <esri:Map.Layers>
           <esri:ArcGISTiledMapServiceLayer ID="StreetMapLayer"
               Url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
           <esri:FeatureLayer ID="MyFeatureLayer" >
           </esri:FeatureLayer>
       </esri:Map.Layers>
   </esri:Map>
   

   Note:

   • Don't forget to add a reference to the System.Runtime.Serialization assembly to your project.
   • Make sure you include XML namespace references for both the ESRI.ArcGIS.Client and ESRI.ArcGIS.Client.Symbols namespaces in the ESRI.ArcGIS.Client assembly as attributes on the phone:PhoneApplicationPage element.

     xmlns:esri="clr-namespace:ESRI.ArcGIS.Client;assembly=ESRI.ArcGIS.Client"
     xmlns:esriSymbols="clr-namespace:ESRI.ArcGIS.Client.Symbols;assembly=ESRI.ArcGIS.Client"
     

2. Set the FeatureLayer to use the states layer of the ESRI_Census_USA map service.

   <esri:FeatureLayer ID="MyFeatureLayer"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" >
   </esri:FeatureLayer>
   

3. Since we are going to symbolize all the states based on their population density, we need to display all states. Define a filter on the Feature layer so that all states are displayed:

   <esri:FeatureLayer ID="MyFeatureLayer"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
       Where="1 = 1" >
   </esri:FeatureLayer>
   

4. In order to specify strings as XAML elements, map a XML namespace to the CLR namespace that contains the String class. This class is contained in the System namespace of the mscorlib assembly. Inserting the attribute shown in the following code as an attribute of the phone:PhoneApplicationPage element in the XAML.

   xmlns:sys="clr-namespace:System;assembly=mscorlib"
   

5. Specify that the POP07_SQMI be included with the layer's graphics.

   <esri:FeatureLayer ID="MyFeatureLayer"
       Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
       Where="1 = 1" >
       <esri:FeatureLayer.OutFields>
           <sys:String>POP07_SQMI</sys:String>
       </esri:FeatureLayer.OutFields>
   </esri:FeatureLayer>
   

6. Declare three fill symbols as static resources. The declaration will be inside the LayoutRoot grid element.

   <Grid.Resources>
       <esriSymbols:SimpleFillSymbol x:Key="MyGreenFillSymbol" Fill="#6600FF00" BorderBrush="Green" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyYellowFillSymbol" Fill="#66FFFF00" BorderBrush="Yellow" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyRedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
   </Grid.Resources>
   

7. Declare a class breaks render as a resource. The declaration will follow that of the symbols defined in the previous step.

   <Grid.Resources>
       <esriSymbols:SimpleFillSymbol x:Key="MyGreenFillSymbol" Fill="#6600FF00" BorderBrush="Green" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyYellowFillSymbol" Fill="#66FFFF00" BorderBrush="Yellow" BorderThickness="2" />
       <esriSymbols:SimpleFillSymbol x:Key="MyRedFillSymbol" Fill="#66FF0000" BorderBrush="Red" BorderThickness="2" />
       <esri:ClassBreaksRenderer x:Key="MyClassBreaksRenderer" >
       </esri:ClassBreaksRenderer>
   </Grid.Resources>
   

8. We are going to use the class breaks renderer to symbolize state graphics based on the state's 2007 population density, so within the renderer element, specify the Attribute property as POP07_SQMI—the field holding the population density that we included with the graphics in step 5 above.

   <esri:ClassBreaksRenderer x:Key="MyClassBreaksRenderer" Attribute="POP07_SQMI" >
   </esri:ClassBreaksRenderer>
   

9. The symbol-value mappings for class breaks renderers are specified in a collection of ClassBreakInfo objects that are stored in the class breaks renderer's Classes property. Inside the ClassBreaksRenderer element, specify another element, ClassBreaksRenderer.Classes, to hold this collection.

   <esri:ClassBreaksRenderer x:Key="MyClassBreaksRenderer" Attribute="POP07_SQMI" >
       <esri:ClassBreaksRenderer.Classes>
       </esri:ClassBreaksRenderer.Classes>
   </esri:ClassBreaksRenderer>
   

10. Specify a ClassBreaksInfo element inside the collection to specify a mapping between a symbol and a range of values. Define the relationship so that states with 2007 population density values between 0 and 50 will be symbolized with the green fill symbol.

    <esri:ClassBreaksRenderer x:Key="MyClassBreaksRenderer" Attribute="POP07_SQMI" >
        <esri:ClassBreaksRenderer.Classes>
            <esri:ClassBreakInfo MinimumValue="0" MaximumValue="50" Symbol="{StaticResource MyGreenFillSymbol}" />
        </esri:ClassBreaksRenderer.Classes>
    </esri:ClassBreaksRenderer>
    

11. Add additional ClassBreaksInfos to symbolize states with 2007 population density values between 51 and 125 with the yellow fill symbol and states with 2007 population density values between 126 and 2000 with the red fill symbol.

    <esri:ClassBreaksRenderer x:Key="MyClassBreaksRenderer" Attribute="POP07_SQMI" >
        <esri:ClassBreaksRenderer.Classes>    
            <esri:ClassBreakInfo MinimumValue="0" MaximumValue="50" Symbol="{StaticResource MyGreenFillSymbol}" />
            <esri:ClassBreakInfo MinimumValue="51" MaximumValue="125" Symbol="{StaticResource MyYellowFillSymbol}" />
            <esri:ClassBreakInfo MinimumValue="126" MaximumValue="2000" Symbol="{StaticResource MyRedFillSymbol}" />
        </esri:ClassBreaksRenderer.Classes>
    </esri:ClassBreaksRenderer>
    

12. The class breaks renderer resource has now been created. Next it must be associated with the feature layer. This is done by setting the Renderer property on the esri:FeatureLayer element.

    <esri:FeatureLayer ID="MyFeatureLayer"
        Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5" 
        Where="1 = 1"
        Renderer="{StaticResource MyClassBreaksRenderer}" >
        <esri:FeatureLayer.OutFields>
            <sys:String>POP07_SQMI</sys:String>
        </esri:FeatureLayer.OutFields>
    </esri:FeatureLayer>
    

13. Run your application to see the states colorized according to their population densities, where red is the most dense, yellow in the middle, and green the least dense.