Select to view content in your preferred language

How to customize ArcGIS Maps SDK's Toolkit.Legend for .NET MAUI

985
3
11-03-2023 06:40 AM
Labels (4)
SeanS
by
Emerging Contributor

Hello,
I am trying to utilize the ArcGIS Toolkit Legend in .Net Maui as a partial class and update some of the styling of the legend itself but have been unsuccessful thus far. When trying to utilize different parts of the c# code found https://github.com/Esri/arcgis-maps-sdk-dotnet-toolkit/blob/main/src/Toolkit/Toolkit.Maui/Legend/Leg... I get an error that I cannot use different data types due to their protection level. Has anybody successfully used and updated the toolkit styling (labels and icon location + sizing) without creating a custom Nuget package? Thanks!

3 Replies
KarenRobine1
Regular Contributor

I also have to build a Legend, and found that this one is really not customizable without a fairly significant rewrite. It's on my list of things I have to do.

0 Kudos
SeanS
by
Emerging Contributor

For now, I just need to update the font sizes, so I created a custom class that inherits the Legend and makes updates to it this way. Other functionality will be harder to implement but you might be able to use the same inheritance. I'm doing something similar with the SearchView right now and it is proving a bit more challenging.

using System;
using Esri.ArcGISRuntime.Mapping;
using Esri.ArcGISRuntime.Toolkit.Maui;

namespace OTISMobile.Helpers
{
	public class CustomLegend : Legend
	{

		protected override void OnBindingContextChanged()
		{
			base.OnBindingContextChanged();

			DataTemplate CustomLayerDataTemplate = new DataTemplate(() =>
				{
					var nameLabel = new Label { FontSize = 32, VerticalOptions = LayoutOptions.Center };
					nameLabel.SetBinding(Label.TextProperty, $"{nameof(LegendEntry.Content)}.{nameof(Layer.Name)}");
					return nameLabel;
				});

			DataTemplate CustomSublayerItemTemplate = new DataTemplate(() =>
			{
				var nameLabel = new Label { FontSize = 28, VerticalOptions = LayoutOptions.Center, Padding = new Thickness(20, 0, 0, 0) };
				nameLabel.SetBinding(Label.TextProperty, $"{nameof(LegendEntry.Content)}.{nameof(ILayerContent.Name)}");
				return nameLabel;
			});

			DataTemplate CustomLegendInfoItemTemplate = new DataTemplate(() =>
			{
				StackLayout sl = new StackLayout() { Orientation = StackOrientation.Horizontal, Padding = new Thickness(20, 0, 0, 0) };
				var symbol = new SymbolDisplay { WidthRequest = 60, HeightRequest = 60, VerticalOptions = LayoutOptions.Center, Margin = new Thickness(0, 0, 5, 0) };
				symbol.SetBinding(SymbolDisplay.SymbolProperty, $"{nameof(LegendEntry.Content)}.{nameof(LegendInfo.Symbol)}");
				sl.Children.Add(symbol);
				var nameLabel = new Label { FontSize = 24, VerticalOptions = LayoutOptions.Center };
				nameLabel.SetBinding(Label.TextProperty, $"{nameof(LegendEntry.Content)}.{nameof(LegendInfo.Name)}");
				sl.Children.Add(nameLabel);
				return sl;
			});

			LayerItemTemplate = CustomLayerDataTemplate;
			LegendInfoItemTemplate = CustomLegendInfoItemTemplate;
			SublayerItemTemplate = CustomSublayerItemTemplate;
		}

	}
}

 

KarenRobine1
Regular Contributor

Wow! Nice!!  Good way to approach that issue. I was thinking about rewriting it using a MAUI CollectionView, but that might not be the easiest way to deal with it (a complete rewrite).  I'll check this code out when I get to that point. Thanks.