Skip To Content

Add graphics and text

In this topic

Graphics are objects held in memory that store a shape (geometry) and are displayed on a map via a GraphicsLayer. Optionally, attribute information describing a Graphic can be stored in a collection of key/value pairs. Graphics can be displayed using symbology applied directly to the Graphic itself or with a Renderer associated with the containing GraphicsLayer.

A Graphic is a type of the abstract class Feature, which defines Geometry and Attributes properties. The Graphic class extends the Feature class by adding members to control how it is displayed on the map, including Symbol, ZIndex, IsVisible, and IsSelected. Unlike other types of features, such as GeodatabaseFeature, the geometry and attributes that define graphics are not physically stored on disk. Graphics are always stored in memory, and must therefore be created programmatically.


The GeodatabaseFeature class supports conversion to a Graphic using the AsGraphic() method.

Graphics can be used to do things such as:

  • Add geometries drawn interactively by the user
  • Highlight a selection (features returned from a query, for example)
  • Provide animation for data that changes quickly (such as GPS positions)
  • Show text on the map
  • Display buffer polygons around features

Add a graphics layer

A GraphicsLayer is essentially a container for Graphic objects. A Graphic can store a point, line, or polygon geometry (including a multipart geometry), and a single GraphicsLayer can be used to display any combination of geometry types. Optionally, you can define rendering properties for a GraphicsLayer to control how graphics are symbolized when drawn on the map.


Symbology defined for individual graphics will override rendering defined for the GraphicsLayer as a whole.

A map can contain any number of graphics layers. A GraphicsLayer, in turn, can store any number of Graphic objects in its GraphicsCollection, exposed via the layer's Graphics property. The GraphicsCollection is useful, as it provides methods for adding and removing individual graphics in the layer.

GraphicsLayers can be created and added to a map using XAML or code. The following examples illustrate both ways of creating and adding a GraphicsLayer to the map.

Add a GraphicsLayer using XAML

<!-- With the following xml namespaces defined-->
<!--    xmlns:esri="using:Esri.ArcGISRuntime.Controls"
<esri:MapView x:Name="MyMapView">
    <esri:Map x:Name="MyMap">
        <layers:ArcGISTiledMapServiceLayer ID="BaseLayer" 
        <layers:GraphicsLayer ID="MyGraphics"/>

Add a GraphicsLayer using code (C#)

var graphicsLayer = new Esri.ArcGISRuntime.Layers.GraphicsLayer();
graphicsLayer.ID = "MyGraphics";


If you will need to refer to one of your map's layers in code, it's a good idea to provide a unique value for its ID property. Since graphics can only be added programmatically, this property can be especially useful when defining a GraphicsLayer.

The following code shows how to find an existing GraphicsLayer by ID:

Locate a GraphicsLayer using its ID

var graphicsLayer = MyMap.Layers["MyGraphics"] as Esri.ArcGISRuntime.Layers.GraphicsLayer;
if (graphicsLayer == null)
    MessageBox.Show("A GraphicsLayer with ID 'MyGraphics' was not found");

// code here to work with the graphics layer ...
You may want to simply create and add the GraphicsLayer if it is not found in the map, as shown in the following code:
var graphicsLayer = MyMap.Layers["MyGraphics"] as Esri.ArcGISRuntime.Layers.GraphicsLayer;
if (graphicsLayer == null)
    graphicsLayer = new Esri.ArcGISRuntime.Layers.GraphicsLayer();
    graphicsLayer.ID = "MyGraphics";

Once a graphics layer is in the map, you can add graphics by following this basic process:

  1. Create a Graphic object and assign the Geometry you want to display. Make sure the spatial reference for the geometry matches that of the map.
  2. Define a Symbol appropriate for the type of geometry used for the graphic (for example, marker, line, or fill symbol). This step is not required if a Renderer has been assigned to the GraphicsLayer.
  3. Optionally, define and assign a collection of attributes describing the Graphic. This may be required if your GraphicsLayer uses a renderer that depends on a specific attribute value (such as a class breaks renderer or unique value renderer).
  4. Add the new Graphic to the GraphicsLayer.

Add point graphics

A Point is the most basic type of geometry, in its simplest form defined with a single pair of coordinates (x, y). As a graphic, points can be used to represent things such as cities (at a small map scale), stops along a route, vehicles moving along a streets network, or perhaps simply to define where a piece of text should be displayed on the map.

You can add points to a graphics layer and display them using either a SimpleMarkerSymbol or a PictureMarkerSymbol. A SimpleMarkerSymbol allows you to display a graphic using one of a finite list of symbol types (circle, cross, diamond, square, triangle, or x). You can further define the symbol by specifying a size, color, and optionally an outline to display around the marker (defined using a SimpleLineSymbol, which in turn also has a color, style, and width).

Available SimpleMarkerSymbol styles

A PictureMarkerSymbol symbolizes a point using an image from a local source (such as a .png file on disk or stored in your project's resources) or from an online source (specified with a URI). Along with the image, you can also specify a rotation angle, size (width and height), opacity, and an offset to apply when drawing the symbol.

Point graphics displayed with a PictureMarkerSymbol

The following example uses the MapViewTapped event on the MapView to create a Graphic at the location touched on the map. The graphic is symbolized with a red circle and added to the GraphicsLayer.

private void MyMapView_MapViewTapped(object sender, MapViewInputEventArgs e)
    var graphicsLayer = MyMap.Layers["MyGraphics"] as Esri.ArcGISRuntime.Layers.GraphicsLayer;
    if (graphicsLayer == null)
        graphicsLayer = new Esri.ArcGISRuntime.Layers.GraphicsLayer();
        graphicsLayer.ID = "MyGraphics";

    var mapPoint = e.Location;
    var markerSym = new Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol();
    markerSym.Color = Colors.Red;
    markerSym.Style = Esri.ArcGISRuntime.Symbology.SimpleMarkerStyle.Circle;
    markerSym.Size = 16;

    var pointGraphic = new Esri.ArcGISRuntime.Layers.Graphic();
    pointGraphic.Geometry = mapPoint;
    pointGraphic.Symbol = markerSym;

Point graphics with simple marker symbols

For most use cases, it's recommended that you use methods on the Editor object to return geometry from the user, rather than mouse and touch events on the MapView. An example of using the Editor RequestShapeAsync method is shown below.

Add polyline graphics

Polylines are collections of vertices (individual x/y locations) that are connected in a particular order. The simplest Polyline is one consisting of two vertices (a from and a to location) and the connection between them. More complex polylines can consist of several vertices, and can be multipart—composed of two or more (visually) distinct sets of connected vertices. Although potentially consisting of individual parts (called paths), a Polyline is still considered a single geometry by ArcGIS.

Polylines can be added to a graphics layer and displayed using a SimpleLineSymbol. This symbol allows you to display the graphic using one of a finite list of symbol types (dash, dash dot, dash dot dot, dot, null, or solid). You can further define the symbol by specifying a width and a color.

Available SimpleLineSymbol styles

The following example calls RequestShapeAsync on the Editor object to get a Polyline from the user. After the line is drawn, a Graphic is created to display it with a dashed blue line symbol.

// define a line symbol (dashed blue)
var lineSymbol = new Esri.ArcGISRuntime.Symbology.SimpleLineSymbol();
lineSymbol.Color = System.Windows.Media.Colors.Blue;
lineSymbol.Style = Esri.ArcGISRuntime.Symbology.SimpleLineStyle.Dash;
lineSymbol.Width = 2;

// use the MapView's Editor to get polyline geometry from the user
var line = await MyMapView.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polyline, 
                                                    lineSymbol, null);

// create a new graphic; set the Geometry and Symbol
var lineGraphic = new Esri.ArcGISRuntime.Layers.Graphic();
lineGraphic.Geometry = line;
lineGraphic.Symbol = lineSymbol;

// add the graphic to the graphics layer

Polyline graphic with a blue dashed symbol

Add polygon graphics

Like polylines, a Polygon is a collection of vertices (individual x/y locations) that are connected in a particular order. The difference being that a polygon closes to produce an area. A valid Polygon must consist of at least three vertices (the minimum needed to enclose an area). More complex polygons can consist of many more vertices and can contain holes or be multipart—composed of two or more (visually) distinct sets of connected vertices. Although potentially consisting of individual parts (called rings), a Polygon is still considered a single geometry by ArcGIS.

Polygons can be displayed with a SimpleFillSymbol or a PictureFillSymbol. A SimpleFillSymbol allows you to display a graphic using one of a finite list of fill types (horizontal, vertical, cross, backward diagonal, forward diagonal, diagonal cross, null, or solid). You can further define the symbol by specifying a color (for the fill) and an outline to display as the border (defined using a SimpleLineSymbol, which in turn also has a color, style, and width).

PictureFillSymbol symbolizes a polygon using an image from a local source (such as a .png file on disk or stored in your project's resources) or from an online source (specified with a URI). The image you specify will be repeated to complete the polygon fill. Along with the image, you can also specify a rotation angle, size (width and height), opacity, and an offset to apply when drawing the symbol. PictureFillSymbol also has an outline that is set with a SimpleLineSymbol.

The Esri campus boundary symbolized with a picture fill symbol

The following examples illustrate creating polygon shapes and symbolizing them with fill symbols.

Create simple polygons

The following example allows the user to define the geometry for a simple polygon by calling the Editor's RequestShapeAsync method. After the polygon is defined, a graphic is created to display it with a red diagonal hatch pattern with a green dot outline. The graphic is then added to the graphics layer for display on the map.

// define a line symbol (for the fill outline)
var lineSymbol = new Esri.ArcGISRuntime.Symbology.SimpleLineSymbol();
lineSymbol.Color = System.Windows.Media.Colors.Green;
lineSymbol.Style = Esri.ArcGISRuntime.Symbology.SimpleLineStyle.Dot;
lineSymbol.Width = 2;

// define a polygon (fill) symbol     
var polySymbol = new Esri.ArcGISRuntime.Symbology.SimpleFillSymbol();
polySymbol.Style = Esri.ArcGISRuntime.Symbology.SimpleFillStyle.DiagonalCross;
polySymbol.Color = System.Windows.Media.Colors.Red;

polySymbol.Outline = lineSymbol; // apply the outline symbol

// use the MapView's Editor to get polygon geometry from the user
var poly = await MyMapView.Editor.RequestShapeAsync(Esri.ArcGISRuntime.Controls.DrawShape.Polygon, 
                                                    polySymbol, null);

// create a new graphic; set the Geometry and Symbol
var polyGraphic = new Esri.ArcGISRuntime.Layers.Graphic();
polyGraphic.Geometry = poly;
polyGraphic.Symbol = polySymbol;

// add the graphic to the graphics layer
Map displaying a polygon graphic

Create multipart and donut polygons

You can use multipart polygons to represent, for example, a region that consists of a number of islands or lakes. Donut polygons can be used to represent an island, a lake, or perhaps an island that has a lake in the middle. Think of the state of Hawaii: it consists of several individual islands but is represented on a map as a single feature.

The following is an example of a complex polygon that consists of the triangle to the west, and the rectangle with a hole in it, to the east:

Multipart polygon displayed with a picture fill symbol

The important thing to note is that the entirety of these (visually distinct) shapes are conceptually one object defined as a single geometry: a multipart polygon. The geometry shown above was constructed using the following code:

// define a picture fill symbol from a png file in the project's assets folder
var pictureSym = new Esri.ArcGISRuntime.Symbology.PictureFillSymbol();
await pictureSym.SetSourceAsync(new Uri("ms-appx:///Assets/donut.png"));

pictureSym.Height = 30.0;
pictureSym.Width = 30.0;
pictureSym.Outline = null;

// create the rectangle outline
var outsideCoords = new Esri.ArcGISRuntime.Geometry.PointCollection();
outsideCoords.Add(-290012, 7596957);
outsideCoords.Add(-287760, 7596957);
outsideCoords.Add(-287760, 7598669);
outsideCoords.Add(-290012, 7598669);

// create a hole in the rectangle
var holeCoords = new Esri.ArcGISRuntime.Geometry.PointCollection(); 
holeCoords.Add(-289568, 7598217);
holeCoords.Add(-288265, 7598217);
holeCoords.Add(-288265, 7597389);
holeCoords.Add(-289568, 7597389);

// define coordinates for the triangle to the west of the rectangle
var triangleCoords = new Esri.ArcGISRuntime.Geometry.PointCollection();
triangleCoords.Add(-290444, 7598224);
triangleCoords.Add(-290394, 7597281);
triangleCoords.Add(-291287, 7597942);

// use a PolygonBuilder to build the complex polygon
var complexPolygon = new Esri.ArcGISRuntime.Geometry.Polygon(outsideCoords);
var polygonBldr = new Esri.ArcGISRuntime.Geometry.PolygonBuilder(complexPolygon);

// get the complex polygon (with all its parts) from the polygon builder
complexPolygon = polygonBldr.ToGeometry();

// create a new graphic; set the Geometry and Symbol
var polyGraphic = new Esri.ArcGISRuntime.Layers.Graphic();
polyGraphic.Geometry = complexPolygon;
polyGraphic.Symbol = pictureSym;

// add the graphic to the graphics layer; zoom to it

Add text

Add text to the map by assigning a TextSymbol to a graphic. Point graphics are best suited for displaying text, as the geometry will define the horizontal and vertical center of the text. To modify where the text appears relative to its point geometry, use the HorizontalTextAlignment and VerticalTextAlignment properties on the TextSymbol. A TextSymbol, however, can be applied to a graphic of any geometry type. For Polygon or Polyline, by default the text will appear at the center of the geometry's bounding envelope (Extent), but you can adjust the text's alignment in the same way as with point geometries.


If you want the geometry (such as a point) to appear along with the text you're going to add, you may need to create two graphics—one to display the text (symbolized with a TextSymbol) and another to display the point (symbolized with a SimpleMarkerSymbol or PictureMarkerSymbol). Another option is to define labels for your graphics layer, which is described later in this topic.

The Text property on the TextSymbol stores the text you want to display. You can assign a particular Font, which includes the size, style (italic, underlined), and weight (bold, normal) for the text. You can set the Color for the text, as well as the BackgroundColor and Angle.

A point graphic labeled with a text symbol

The following example adds a point and text to identify Cleveland's Rock and Roll Hall of Fame:

// define the location for the point (lower left of text)
var mapPoint = new Esri.ArcGISRuntime.Geometry.MapPoint(-9094150, 5087600);

// create a text symbol: define color, font, size, and text for the label
var textSym = new Esri.ArcGISRuntime.Symbology.TextSymbol();
textSym.Color = System.Windows.Media.Colors.Red;
textSym.Font = new Esri.ArcGISRuntime.Symbology.SymbolFont("Arial", 16);
textSym.Text = "Rock and Roll!";
textSym.Angle = -60;

// create a marker symbol
var markerSym = new Esri.ArcGISRuntime.Symbology.SimpleMarkerSymbol();
markerSym.Color = System.Windows.Media.Colors.Blue;
markerSym.Style = Esri.ArcGISRuntime.Symbology.SimpleMarkerStyle.Triangle;
markerSym.Size = 12;

// create a graphic for the text (apply TextSymbol)
var textGraphic = new Esri.ArcGISRuntime.Layers.Graphic(mapPoint, textSym);

// create a graphic for the marker (apply SimpleMarkerSymbol)
var markerGraphic = new Esri.ArcGISRuntime.Layers.Graphic(mapPoint, markerSym);

// add text and marker graphics
A point graphic labeled with a text symbol


The angle of the text in a TextSymbol is measured clockwise from horizontal. The Angle property specified in the code above (-60) can also be expressed as 300.

Label a graphics layer

If you simply want to add some ad hoc text to your map, then adding a marker graphic with a TextSymbol to define the desired text and font provides a quick and easy way to accomplish that. If, however, you want to display text for all features in a graphics layer (based on an attribute value, for example), you need to define labeling for the GraphicsLayer.

Graphics can be labeled according to label classes. A label class defines the text to display for labels and the symbol used to display them. Label text can be defined as any combination of hard-coded text and attribute values, and label symbology is defined using the same TextSymbol object used for adding simple text graphics, as previously described.

GraphicsLayer has a Labeling property with a LabelClasses collection that can contain zero or several LabelClass objects. Each LabelClass in the collection can define a unique set of labels to draw for the layer. The IsEnabled property on the Labeling class is used to turn labels on or off by providing the appropriate Boolean value (true or false).

The following example creates an AttributeLabelClass to define labeling for restaurants displayed as point graphics. The TextExpression property is used to define a label that shows the name of the restaurant along with its rating on a separate line. The Symbol property defines a symbol with a blue bold font surrounded by a light blue halo. Finally, the label class is added to the graphics layer's collection, and the IsEnabled property is set to true to display the labels.

// create a new TextSymbol for displaying graphic labels
var labelSym = new Esri.ArcGISRuntime.Symbology.TextSymbol();

// define the font: Arial, 10pt, non-italic, non-underlined, bold
labelSym.Font = new Esri.ArcGISRuntime.Symbology.SymbolFont

// define the font color and halo (border)
labelSym.Color = Colors.Blue;
labelSym.BorderLineColor = Colors.LightBlue;
labelSym.BorderLineSize = 1;

// create a new LabelClass
var labelClass = new Esri.ArcGISRuntime.Layers.AttributeLabelClass(); 

// assign the TextSymbol
labelClass.Symbol = labelSym;

// provide a text expression: 
//              attribute names in [brackets] 
//              hard-coded text in "quotes" 
//              CONCAT to concatenate
//              NEWLINE for line break
labelClass.TextExpression = "[Name] CONCAT NEWLINE CONCAT [Rating] CONCAT \" stars\"";

// add the new LabelClass to the GraphicsLayer's collection

// enable labeling
graphicsLayer.Labeling.IsEnabled = true;

Point graphics with labels

Render a graphics layer

As shown in the previous examples, you can define symbology for individual graphics by setting the Symbol property with the appropriate symbol object. As an alternative, you can define symbology for the entire GraphicsLayer, which will define how all graphics contained in the layer will be displayed. This is especially useful if the symbol used for a graphic should be determined by an attribute value.

Symbology for a GraphicsLayer is defined using a Renderer. This can be set with one of the following types of renderers:

  • SimpleRenderer—Defines a single symbol to use for all features in the layer.
  • ClassBreaksRenderer—Symbolizes graphics in the layer using classes (divisions) of a numeric attribute value.
  • UniqueValueRenderer—Symbolizes graphics using unique values for a specified attribute.
  • TemporalRenderer—Symbolizes according to a temporal (date/time) attribute.

The following example illustrates how to set up a renderer to symbolize point graphics (restaurants) according to a "FoodStyle" attribute value (type of food served). Renderers can be defined using XAML at design time, or at runtime using code (C#.for example).

Define a UniqueValueRenderer for a GraphicsLayer using code.

// create a new graphics layer; provide an ID
graphicsLayer = new Esri.ArcGISRuntime.Layers.GraphicsLayer();
graphicsLayer.ID = "MyGraphics";

// create symbols to use for each unique value (and for the default symbol)
// ... PictureMarkerSymbols of flags, e.g.

// create new UniqueValueInfos: provide attribute value (food type) and symbol to use
var info1 = new Esri.ArcGISRuntime.Symbology.UniqueValueInfo("Chinese", chineseSym);
var info2 = new Esri.ArcGISRuntime.Symbology.UniqueValueInfo("American", americanSym);
var info3 = new Esri.ArcGISRuntime.Symbology.UniqueValueInfo("Italian", italianSym);

// create a UniqueValueCollection and add the unique value infos
var uniqueInfos = new Esri.ArcGISRuntime.Symbology.UniqueValueInfoCollection();

// create a UniqueValueRenderer: specify the attribute field to render with ("FoodStyle")
var uniqueRenderer = new Esri.ArcGISRuntime.Symbology.UniqueValueRenderer();
uniqueRenderer.Fields = new System.Collections.ObjectModel.ObservableCollection<string>(new[] { "FoodStyle" });

// provide the unique value collection
uniqueRenderer.Infos = uniqueInfos;

// assign the default symbol to use for values that are not defined in the info collection
uniqueRenderer.DefaultSymbol = defaultSym; // a black "X", e.g.

// assign the renderer to the graphics layer and add the layer to the map
graphicsLayer.Renderer = uniqueRenderer;

The following is an example of point graphics displayed with a unique value renderer and symbolized with picture marker symbols.

Point graphics displayed with a unique value renderer

For the renderer example above to display graphics as expected, the graphics must have a "FoodStyle" attribute. The following example shows how to add attributes when creating a graphic:

var attributes = new Dictionary<string, object>();
attributes.Add("Name", "Dougherino's");
attributes.Add("Address", "123 Center Street");
attributes.Add("Rating", 8.5);
attributes.Add("FoodStyle", "Italian");
var markerGraphic = new Esri.ArcGISRuntime.Layers.Graphic(mapPoint, attributes);

A ClassBreaksRenderer can be used to display graphics according to discrete ranges of an attribute value. The following example illustrates how to create a ClassBreaksRenderer at design time with XAML to display three classes of restaurant points according to their rating: 0-5, 5-8, 8-10.

<!-- With the following xml namespace defined-->
<!--    xmlns:sym="using:Esri.ArcGISRuntime.Symbology"
    <!--Define the renderer and its symbols in the Resources section-->
    <sym:SimpleMarkerSymbol x:Key="AvoidMarkerSym" Color="Red" Style="X" Size="10"/>
    <sym:SimpleMarkerSymbol x:Key="OkMarkerSym" Color="Yellow" Style="Circle"  Size="12"/>
    <sym:SimpleMarkerSymbol x:Key="GoodMarkerSym" Color="Green" Style="Circle" Size="14"/>
    <sym:SimpleRenderer x:Key="SR" Symbol="{StaticResource AvoidMarkerSym}"/>
    <sym:ClassBreaksRenderer x:Key="RestaurantRatingRenderer" Field="Rating">
            <sym:ClassBreakInfo Symbol="{StaticResource AvoidMarkerSym}" Minimum="0.0" Maximum="5.0"/>
            <sym:ClassBreakInfo Symbol="{StaticResource OkMarkerSym}" Minimum="5.1" Maximum="8.0"/>
            <sym:ClassBreakInfo Symbol="{StaticResource GoodMarkerSym}" Minimum="8.1" Maximum="10.0"/>
<!-- ... -->
<!-- Apply the Renderer in the XAML for the GraphicsLayer-->
<esri:GraphicsLayer ID="MyGraphics" Renderer="{StaticResource RestaurantRatingRenderer}"/>

Point graphics displayed with a class breaks renderer

Manipulating graphics

Once a graphics layer has been added to the map and populated with various graphics, you may need to further manipulate the graphics by removing or reording them, allowing the user to select or unselect them, or moving them around the map.

Remove or reorder graphics

A GraphicsLayer stores its Graphic objects in a GraphicsCollection object, which is available via the Graphics property. The GraphicsCollection has methods for adding and removing graphics in the collection.

Likewise, the Graphic object allows you to alter its draw order on the map (move to the front or back of the display for example) or to update its position on the map.

The following example illustrates using the RemoveAt method on GraphicsCollection to remove the oldest graphic (using its index position in the collection) if there are at least three graphics:

if (graphicsLayer.Graphics.Count >= 3)
Similarly, the Remove method will remove a graphic from the collection, taking a graphic object as an argument, rather than its index position. The following example verifies that the graphic exists in the collection before removing it:
if (graphicsLayer.Graphics.Contains(this.myGraphic)) 

When drawing several graphics within a single graphics layer, you may need to move certain graphics to display on top of others. Perhaps you need to emphasize graphics with a particular attribute, such as restaurants of a particular type, for example. To make sure those graphics draw on top, you can give a value for each graphic's ZIndex property that is larger than the other graphics' ZIndex values. Since ZIndex defaults to 0, you can set a value of 1 to move a graphic above the others.

The following example shows how to display selected graphics on top of all others in the layer (assuming all graphics in the layer have the default value of 0 for ZIndex):

foreach (var graphic in graphicsLayer.SelectedItems)
    graphic.ZIndex = 1;

Animate point graphics

One powerful application of graphics is to display updated positions for features that are moving on the map. A common use is to track people or vehicles, represented as points on the map, via a GPS signal. To change a graphic's position on the map, you need to update its Geometry. For a point graphic, the most efficient way to do this is using the MoveTo method on the underlying Point.

The example described below uses a System.Threading.Timer to update the location of all point graphics in the layer at a given time interval.

First, a System.Threading.Timer is initialized and set to run a specified function every tenth of a second (100 milliseconds). A private Boolean variable is also declared to act as a flag that determines when animation code should run. The constructor for the Timer takes a callback function and an integer representing the interval (milliseconds) at which the callback will be executed.

private System.Threading.Timer timer;
private bool animate;
public MainPage()
    animate = false;
    timer = new System.Threading.Timer(timer_Tick, null, 0, 100); // run "timer_Tick" every 100 milliseconds

Next, the timer's callback function,timer_Tick, is used to loop through all graphics. For point graphics, a random value between 0 and 1 is multiplied by 50 map units (meters for example) to create an x and a y offset. The MoveTo method is then called on the underlying Point to update the graphic's position with the new coordinate values. Notice that if the animate flag is false, the callback will not run. This flag can be used to start and stop animation as required.

private void timer_Tick(object state)
    if (!animate) { return; }

    this.Dispatcher.BeginInvoke(new Action(() =>
        var graphicsLayer = MyMap.Layers["MyGraphics"] as Esri.ArcGISRuntime.Layers.GraphicsLayer;

        foreach (var g in graphicsLayer.Graphics)
            var point = g.Geometry as Esri.ArcGISRuntime.Geometry.MapPoint;
            if (point != null)
                var rnd = new Random();
                var deltaX = rnd.NextDouble();
                var deltaY = rnd.NextDouble();

                var newX = point.X + (deltaX * 50.0);
                var newY = point.Y + (deltaY * 50.0);

                point.MoveTo(newX, newY);


To marshal between the UI thread and the worker thread that System.Threading.Timer is running on, you'll need to call BeginInvoke on the application's Dispatcher as shown above.


Using MoveTo is more efficient that completely updating the graphic's geometry (that is, replacing it with a new MapPoint). When animating many graphics on the map, MoveTo will perform better.

Finally, a button click is used to start the animation by setting the value of the animate flag to true. This code toggles the Boolean value of the flag, so a second click can be used to stop the animation.

private void AnimateButton_Click(object sender, RoutedEventArgs e)
    // toggle the value of the animate flag
    this.animate = !this.animate;
    this.AnimateButton.Content = this.animate ? "Stop Animation" : "Start Animation";


Because positive x and y offsets are always being added to the current coordinate values, the code above will always move points in a northeasterly direction. To better randomize the movement, you can randomly negate the value of deltaX and deltaY.

Related topics