Line and Fill Symbols

Download Samples Repository

Description

Sample shows how to create Line and Fill Symbol (SimpleLineSymbol, SimpleFillSymbol, PictureFillSymbol) and add graphics using the symbols.

"Desktop" "Store" "Phone" Available for Desktop, Store, Phone

Sample Code

<UserControl x:Class="ArcGISRuntime.Samples.Desktop.LineFillSymbols"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:ArcGISRuntime.Samples.Desktop"
             xmlns:esri="http://schemas.esri.com/arcgis/runtime/2013">
    <Grid x:Name="layoutGrid">
        <esri:MapView x:Name="MyMapView" WrapAround="True">
			<esri:Map InitialViewpoint="-15053000,2749000,-6540000,6590000">
				<esri:ArcGISTiledMapServiceLayer
                    ServiceUri="http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer" />
			</esri:Map>
			<esri:MapView.GraphicsOverlays>
				<esri:GraphicsOverlay ID="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>
				<TextBlock Text="Click the map to add shapes with the selected line or fill symbol."
                           FontSize="14"  Width="250" TextAlignment="Left" TextWrapping="Wrap" />

                <ComboBox x:Name="symbolCombo" HorizontalAlignment="Center" Margin="12,20,12,0" SelectedIndex="0"
                          SelectionChanged="symbolCombo_SelectionChanged">
                    <ComboBox.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black" BorderThickness="1" Margin="2" Padding="2">
                                <Image Source="{Binding}" Stretch="None" />
                            </Border>
                        </DataTemplate>
                    </ComboBox.ItemTemplate>
                </ComboBox>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>
using Esri.ArcGISRuntime.Controls;
using Esri.ArcGISRuntime.Layers;
using Esri.ArcGISRuntime.Symbology;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace ArcGISRuntime.Samples.Desktop
{
	/// <summary>
	/// Sample shows how to create Line and Fill Symbol (SimpleLineSymbol, SimpleFillSymbol, PictureFillSymbol) and add graphics using the symbols.
	/// </summary>
	/// <title>Line and Fill Symbols</title>
	/// <category>Symbology</category>
	public partial class LineFillSymbols : UserControl
	{
		private List<SampleSymbol> _symbols;
		private GraphicsOverlay _graphicsOverlay;

		/// <summary>Construct Line and Fill Symbols sample control</summary>
		public LineFillSymbols()
		{
			InitializeComponent();

			_graphicsOverlay = MyMapView.GraphicsOverlays["graphicsOverlay"];
			MyMapView.ExtentChanged += MyMapView_ExtentChanged;
		}

		// Start map interaction
		private async void MyMapView_ExtentChanged(object sender, EventArgs e)
		{
			MyMapView.ExtentChanged -= MyMapView_ExtentChanged;

			await SetupSymbolsAsync();
			DataContext = this;

			await AcceptPointsAsync();
		}

		// Cancel current shape request when the symbol selection changes 
		private async void symbolCombo_SelectionChanged(object sender, SelectionChangedEventArgs e)
		{
			if (MyMapView.Editor.IsActive)
				MyMapView.Editor.Cancel.Execute(null);

			await AcceptPointsAsync();
		}

		// Accept user map clicks and add points to the graphics layer with the selected symbol
		private async Task AcceptPointsAsync()
		{
			try
			{
				while (MyMapView.GetCurrentViewpoint(ViewpointType.BoundingGeometry).TargetGeometry.Extent != null)
				{
					SampleSymbol sampleSymbol = _symbols[symbolCombo.SelectedIndex];

					Esri.ArcGISRuntime.Geometry.Geometry shape = null;
					if (sampleSymbol.Symbol is LineSymbol)
						shape = await MyMapView.Editor.RequestShapeAsync(DrawShape.Polyline, sampleSymbol.Symbol);
					else
						shape = await MyMapView.Editor.RequestShapeAsync(DrawShape.Polygon, sampleSymbol.Symbol);

					_graphicsOverlay.Graphics.Add(new Graphic(shape, sampleSymbol.Symbol));
					await Task.Delay(100);
				}
			}
			catch (TaskCanceledException)
			{
			}
			catch (Exception ex)
			{
				MessageBox.Show("Error: " + ex.Message, "Line and Fill Symbols");
			}
		}

		// Create line / fill symbols
		private async Task SetupSymbolsAsync()
		{
			try
			{
				// Create symbols
				var blackOutlineSymbol = new SimpleLineSymbol() { Color = Colors.Black, Style = SimpleLineStyle.Solid, Width = 1 };

				_symbols = new List<SampleSymbol>()
				{
					new SampleSymbol(new SimpleLineSymbol() { Color = Colors.Black, Style = SimpleLineStyle.Solid, Width = 2 }),
					new SampleSymbol(new SimpleLineSymbol() { Color = Colors.Red, Style = SimpleLineStyle.Dash, Width = 2 }),
					new SampleSymbol(new SimpleLineSymbol() { Color = Colors.Blue, Style = SimpleLineStyle.DashDot, Width = 4 }),

					new SampleSymbol(new SimpleFillSymbol() { Color = Colors.Red, Style = SimpleFillStyle.Solid }),
					new SampleSymbol(new SimpleFillSymbol() { Color = Color.FromArgb(100, 0, 255, 0), Style = SimpleFillStyle.DiagonalCross, Outline = blackOutlineSymbol }),
					new SampleSymbol(new SimpleFillSymbol() { Color = Color.FromArgb(100, 0, 0, 255), Style = SimpleFillStyle.Vertical, Outline = blackOutlineSymbol }),

					new SampleSymbol(new PictureFillSymbol() { Outline = blackOutlineSymbol, Width = 24, Height = 24 }, "pack://application:,,,/ArcGISRuntimeSamplesDesktop;component/Assets/x-24x24.png"),
					new SampleSymbol(new PictureFillSymbol() { Outline = blackOutlineSymbol, Width = 24, Height = 24 }, "http://static.arcgis.com/images/Symbols/Cartographic/esriCartographyMarker_79_Blue.png")
				};

				// Set image sources for picture fill symbols
				await Task.WhenAll(_symbols.Where(s => s.Symbol is PictureFillSymbol)
					.Select(s => ((PictureFillSymbol)s.Symbol).SetSourceAsync(s.SymbolUri)));

				// Create image swatches for the UI
				Task<ImageSource>[] swatchTasks = _symbols
					.Select(sym => sym.Symbol.CreateSwatchAsync(24, 24, 96.0, Colors.Transparent))
					.ToArray();

				symbolCombo.ItemsSource = new List<ImageSource>(await Task.WhenAll(swatchTasks));
			}
			catch (Exception ex)
			{
				Debug.WriteLine("Error: " + ex.Message);
			}
		}
	}

	/// <summary>Local symbol class</summary>
	internal class SampleSymbol
	{
		/// <summary>Symbol</summary>
		public Symbol Symbol { get; set; }

		/// <summary>Uri for picture symbols</summary>
		public Uri SymbolUri { get; set; }

		/// <summary>Swatch for UI</summary>
		public ImageSource Swatch { get; set; }

		/// <summary>Construct sample symbol object</summary>
		public SampleSymbol(Symbol symbol, string source = "")
		{
			Symbol = symbol;

			if (!string.IsNullOrEmpty(source))
				SymbolUri = new Uri(source);
		}
	}
}
Feedback on this topic?