Skip To Content ArcGIS for Developers Sign In Dashboard

Symbols and Labels

Download Samples Repository

Description

Shows various types of the more advanced symbol types, such as Composite and CIM symbology.

"Store" "Phone" Available for Store, Phone

Sample Code

<UserControl
	x:Class="ArcGISRuntime.Samples.Desktop.SymbolsAndLabels"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"	
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013" >

	<UserControl.Resources>
		<!--Composite Symbol mixing simple circle marker with a text-->
		<esri:CompositeSymbol x:Key="NumberedMarkerSymbol1">
			<esri:SimpleMarkerSymbol Size="20" Color="White">
				<esri:SimpleMarkerSymbol.Outline>
					<esri:SimpleLineSymbol Color="CornflowerBlue" Width="3" />
				</esri:SimpleMarkerSymbol.Outline>
			</esri:SimpleMarkerSymbol>
			<esri:TextSymbol Text="1" HorizontalTextAlignment="Center" VerticalTextAlignment="Middle">
				<esri:TextSymbol.Font>
					<esri:SymbolFont FontWeight="Bold" FontSize="14" />
				</esri:TextSymbol.Font>
			</esri:TextSymbol>
		</esri:CompositeSymbol>
		<esri:CompositeSymbol x:Key="NumberedMarkerSymbolA">
			<esri:SimpleMarkerSymbol Size="20" Color="White">
				<esri:SimpleMarkerSymbol.Outline>
					<esri:SimpleLineSymbol Color="Red" Width="3" />
				</esri:SimpleMarkerSymbol.Outline>
			</esri:SimpleMarkerSymbol>
			<esri:TextSymbol Text="A" HorizontalTextAlignment="Center" VerticalTextAlignment="Middle">
				<esri:TextSymbol.Font>
					<esri:SymbolFont FontWeight="Bold" FontSize="14" />
				</esri:TextSymbol.Font>
			</esri:TextSymbol>
			<esri:SimpleMarkerSymbol Size="30" Color="Transparent">
				<esri:SimpleMarkerSymbol.Outline>
					<esri:SimpleLineSymbol Color="#AA000000" Width="1" />
				</esri:SimpleMarkerSymbol.Outline>
			</esri:SimpleMarkerSymbol>
			<esri:SimpleMarkerSymbol Size="40" Color="Transparent">
				<esri:SimpleMarkerSymbol.Outline>
					<esri:SimpleLineSymbol Color="#55000000" Width="1" />
				</esri:SimpleMarkerSymbol.Outline>
			</esri:SimpleMarkerSymbol>
		</esri:CompositeSymbol>

		<esri:CompositeSymbol x:Key="OutlinedAndDashedSymbol">
			<esri:SimpleLineSymbol Width="7" Color="CornflowerBlue" />
			<esri:SimpleLineSymbol Style="Solid" Color="Black" Width="3" />
			<esri:SimpleLineSymbol Style="Dash" Color="White" Width="3" />
		</esri:CompositeSymbol>

		<!--Uses a mix of marker, line and fill symbols to highlight vertices and create an advanced outline-->
		<esri:CompositeSymbol x:Key="VertexFillSymbol">
			<esri:SimpleFillSymbol Color="#44FFFF00">
				<esri:SimpleFillSymbol.Outline>
					<esri:SimpleLineSymbol Width="5" Color="CornflowerBlue" />
				</esri:SimpleFillSymbol.Outline>
			</esri:SimpleFillSymbol>
			<esri:SimpleLineSymbol Style="DashDot" Color="White" Width="3" />
			<esri:SimpleMarkerSymbol Size="8" Color="Red" />
		</esri:CompositeSymbol>
	</UserControl.Resources>

	<Grid>
		<esri:MapView x:Name="MyMapView">
			<esri:Map>
				<esri:ArcGISTiledMapServiceLayer
					ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer" />
			</esri:Map>
			<esri:MapView.GraphicsOverlays>
				<esri:GraphicsOverlay ID="labelGraphicsOverlay">
					<esri:GraphicsOverlay.Labeling>
						<esri:LabelProperties IsEnabled="False">
							<esri:AttributeLabelClass TextExpression="[Label]" >
								<esri:TextSymbol Color="Blue" />
							</esri:AttributeLabelClass>
							<esri:AttributeLabelClass TextExpression="[SymbolType] CONCAT NEWLINE CONCAT &quot;ID= &quot; CONCAT [ID]">
								<esri:TextSymbol Color="Black" />
							</esri:AttributeLabelClass>
						</esri:LabelProperties>
					</esri:GraphicsOverlay.Labeling>
				</esri:GraphicsOverlay>
			</esri:MapView.GraphicsOverlays>

		</esri:MapView>

		<Border Background="White" BorderBrush="Black" BorderThickness="1" Margin="30" Padding="20"
				HorizontalAlignment="Right" VerticalAlignment="Top">
			<Border.Effect>
				<DropShadowEffect />
			</Border.Effect>
			<StackPanel>
				<CheckBox x:Name="chkBoxDisplayLabels" Content="Display Labels"
						  IsChecked="{Binding ElementName=MyMapView, Path=GraphicsOverlays[labelGraphicsOverlay].Labeling.IsEnabled, Mode=TwoWay}" />
				<TextBlock Text="Map Rotation" Margin="0,10,5,0" />
				<Slider Minimum="0" Maximum="360"
						ValueChanged="Slider_ValueChanged" />
			</StackPanel>
		</Border>
	</Grid>
</UserControl>
using Esri.ArcGISRuntime.Geometry;
using Esri.ArcGISRuntime.Layers;
using Esri.ArcGISRuntime.Symbology;
using System.Linq;
using System.Windows.Controls;

namespace ArcGISRuntime.Samples.Desktop
{
	/// <summary>
	/// Shows various types of the more advanced symbol types: Composite and CIM symbology.
	/// </summary>
	/// <title>Symbols and Labels</title>
	/// <category>Symbology</category>
	public sealed partial class SymbolsAndLabels : UserControl
	{
		public SymbolsAndLabels()
		{
			this.InitializeComponent();
			CreateGeometries();
		}

		/// <summary>
		/// XAML creation of polygon and polyline geometries are currently not supported, so
		/// here they are created in code. Points are generated in the XAML for this sample.
		/// </summary>
		private void CreateGeometries()
		{
			var gOverlay = MyMapView.GraphicsOverlays["labelGraphicsOverlay"];

			gOverlay.Graphics.Add(new Graphic(new MapPoint(-6000000, 4800000), (Symbol)Resources["NumberedMarkerSymbol1"]));
			gOverlay.Graphics.Add(new Graphic(new MapPoint(-5000000, 3900000), (Symbol)Resources["NumberedMarkerSymbolA"]));
			gOverlay.Graphics.Add(new Graphic(new MapPoint(-4000000, 4800000), (Symbol)Resources["NumberedMarkerSymbol1"]));
			gOverlay.Graphics.Add(new Graphic(new MapPoint(-3000000, 3900000), (Symbol)Resources["NumberedMarkerSymbolA"]));
			gOverlay.Graphics.Add(new Graphic(new MapPoint(-2000000, 4800000), (Symbol)Resources["NumberedMarkerSymbol1"]));
			gOverlay.Graphics.Add(new Graphic(new MapPoint(-1000000, 3900000), (Symbol)Resources["NumberedMarkerSymbolA"]));

			int i = 0;
			foreach (var g in gOverlay.Graphics)
				g.Attributes["Label"] = "Label #" + (++i).ToString();

			Polyline line = new Polyline(FromArray(-100, -30, -80, 0, -60, -30, -40, 0), SpatialReferences.Wgs84);
			var graphic = new Graphic(line, (Esri.ArcGISRuntime.Symbology.Symbol)Resources["OutlinedAndDashedSymbol"]);
			graphic.Attributes["Label"] = "OutlinedAndDashedSymbol";
			gOverlay.Graphics.Add(graphic);

			Polygon polygon = new Polygon(FromArray(-30, -30, 0, -30, 0, 0, -15, -10, -30, 0, -30, -30), SpatialReferences.Wgs84);
			graphic = new Graphic(polygon, (Esri.ArcGISRuntime.Symbology.Symbol)Resources["VertexFillSymbol"]);
			graphic.Attributes["Label"] = "VertexFillSymbol";
			gOverlay.Graphics.Add(graphic);

			//CIM symbols can only be created from JSON. The JSON is currently only constructed by publishing services to ArcGIS Server with advanced symbology
			string CIMSymbolJson = "{\"type\":\"CIMSymbolReference\",\"symbol\":{\"type\":\"CIMLineSymbol\",\"symbolLayers\":[{\"type\":\"CIMFilledStroke\",\"enable\":true,\"effects\":[{\"type\":\"CIMGeometricEffectArrow\",\"geometricEffectArrowType\":\"Block\",\"primitiveName\":null,\"width\":35}],\"capStyle\":\"Round\",\"pattern\":{\"type\":\"CIMSolidPattern\",\"color\":[0,0,0,255]},\"width\":2,\"lineStyle3D\":\"Strip\",\"alignment\":\"Center\",\"joinStyle\":\"Miter\",\"miterLimit\":10,\"patternFollowsStroke\":true}]},\"symbolName\":null}";
			var cimsymbol = Esri.ArcGISRuntime.Symbology.Symbol.FromJson(CIMSymbolJson);
			Polyline line2 = new Polyline(FromArray(20, -30, 30, 0, 50, -30, 70, 0), SpatialReferences.Wgs84);
			graphic = new Graphic(line2, cimsymbol);
			graphic.Attributes["Label"] = "CIM Symbol";
			gOverlay.Graphics.Add(graphic);

			i = 0;
			foreach (var g in gOverlay.Graphics)
			{
				g.Attributes["SymbolType"] = g.Symbol.GetType().Name;
				g.Attributes["ID"] = ++i;
			}
			var symbols = this.Resources.OfType<MarkerSymbol>();
			double x = -7000000;
			foreach (var symbol in symbols)
			{
				Graphic g = new Graphic(new MapPoint(x, 3900000), symbol);
				gOverlay.Graphics.Add(g);
				x += 1000000;
			}
		}

		// Helper method
		private static PointCollection FromArray(params double[] parameters)
		{
			PointCollection coll = new PointCollection();
			for (int i = 0; i < parameters.Length - 1; i += 2)
			{
				coll.Add(new MapPoint(parameters[i], parameters[i + 1]));
			}
			return coll;
		}

		private void Slider_ValueChanged(object sender, System.Windows.RoutedPropertyChangedEventArgs<double> e)
		{
			MyMapView.SetRotationAsync(e.NewValue);
		}
	}
}
Feedback on this topic?