Symbols and renderers

Symbols define the non-geographic aspects of a graphic's appearance, including color, border width, transparency, and so on. 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 (that is, point, line, or polygon). See the Symbol types and Creating symbols sections 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 the attribute values that correspond to a particular symbol. Renderers can define symbols based on unique values or a range of values. See Creating a unique value renderer and Creating a class breaks renderer sections for more information.

Symbol types

The available symbols 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 XAML, and in the code-behind. Symbols defined in XAML will be static resources. Those in the code-behind can be dynamically generated.

Defining symbols in XAML

In some applications, the same symbol is 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 the application's XAML. This is the best place for the symbol's definition because, in Silverlight, an application's visual components should be specified in XAML, while its execution logic should be defined in .NET code. This makes for a distinct separation between presentation layer and business logic, which makes applications easier to develop, maintain, and enhance.

To create a symbol in 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>
   

   Tip:

   • 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 of the 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 a static symbol and a renderer in the resources of the LayoutRoot grid. The following code declares a SimpleFillSymbol with a semitransparent red fill and a red outline that is two pixels wide, and a SimpleRenderer that uses that symbol. The x:Key attribute defines the name you'll 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" />
       <esri:SimpleRenderer x:Key="MySimpleRenderer" Symbol="{StaticResource MyRedFillSymbol}" />
   </Grid.Resources>
   

4. Now that the renderer is declared, it can be applied to a FeatureLayer by binding to the Renderer property. This applies the symbol associated with the renderer to all the features in the layer.

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

5. Run the 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 following code 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;

Caution:

If you have a renderer set on your GraphicsLayer, and the GraphicsLayer.RendererTakesPrecedence property is set to true (which is the default), the symbols set on individual graphics will be overwritten by the renderer. Set RendererTakesPrecedence to false to use the symbols set on individual graphics, and only apply the renderer on the graphics without a symbol set.

Creating a unique value renderer

With the unique value renderer, you can define symbols for graphics with specific attribute values. This section describes the steps for defining and consuming a simple unique value renderer.

1. Create an application with a Map, base layer, and FeatureLayer. See Feature layers for details.

   <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>
   

   Tip:

   • 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. To specify strings as XAML elements, map an XML namespace to the CLR namespace that contains the String class. This class is contained in the System namespace of the mscorlib assembly. Insert 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 in 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. In the UniqueValueRenderer element, specify the Attribute property as STATE_NAME (the name of the field holding the state name). This uses the renderer to symbolize state graphics based on the state's name.

   <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. In 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 in 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 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 been created. Associate it with the feature layer by setting the Renderer property on the 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 the application to see California in green, New York in yellow, and Kansas in red.

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 following steps show how to define and consume a class breaks renderer:

1. Create an application with a Map, base layer, and FeatureLayer. See Feature layers for details.

   <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>
   

   Tip:

   • 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. To symbolize all the states based on their population density, you need to display all states. Define a filter on the FeatureLayer 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. To specify strings as XAML elements, map an XML namespace to the CLR namespace that contains the String class. This class is contained in the System namespace of the mscorlib assembly. Insert 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 in 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 ClassBreaksRender 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. To use the class breaks renderer to symbolize state graphics based on the state's 2007 population density, specify the Attribute property within the renderer element as POP07_SQMI—the field holding the population density that you included with the graphics in step 5.

   <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. In 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 in 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 are 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 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 been created. Associate it with the feature layer by setting the Renderer property on the 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 the 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.