HOW TO

Change legend color and font using the Legend control with templates

Last Published: April 25, 2020

Summary

The Legend control is a new functionality included in the Toolkit library, ESRI.ArcGIS.Client.Toolkit, with ArcGIS API for Microsoft Silverlight/WPF version 2.1. The Legend control displays layer and symbol content in a map. The Legend control can be edited by a template, which means, the color and font of the legend can be adjusted by modifying the MapLayerTemplate, the LayerTemplate, or the LegendItemTemplate with a user defined Data Template.

Procedure

The following code demonstrates how to change the legend color and font.

  1. Code in XAML:
    Code:
    <UserControl x:Class="ArcGISSilverlightSDK.MainPage"
    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/client/2009">
    <Grid x:Name="LayoutRoot" >

    <esri:Map x:Name="MyMap" Extent="-15000000,2000000,-7000000,8000000">
    <esri:ArcGISTiledMapServiceLayer ID="Street Map"
    Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"/>
    <esri:ArcGISDynamicMapServiceLayer ID="United States" Opacity="0.6"
    Url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer"/>
    <esri:FeatureLayer ID="Points of Interest"
    Url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer/0" />
    </esri:Map>

    <Border Background="#77919191" BorderThickness="1" CornerRadius="5"
    HorizontalAlignment="Right" VerticalAlignment="Top"
    Margin="20" Padding="5" BorderBrush="Black" >

    <!--Legend control-->
    <esri:Legend Map="{Binding ElementName=MyMap}"
    LayerIDs="Points of Interest,United States"
    LayerItemsMode="Tree"
    Background="Black">

    <!--Style of layer-->
    <esri:Legend.MapLayerTemplate>
    <DataTemplate>
    <ContentControl Content="{Binding Label}"
    FontFamily="Times New Roman"
    FontWeight="Bold"
    FontSize="20"
    Foreground="Red">
    </ContentControl>
    </DataTemplate>
    </esri:Legend.MapLayerTemplate>

    <!--Style of sub layer-->
    <esri:Legend.LayerTemplate>
    <DataTemplate>
    <ContentControl Content="{Binding Label}"
    FontFamily="Verdana"
    FontWeight="Bold"
    FontSize="16"
    Foreground="Yellow">
    </ContentControl>
    </DataTemplate>
    </esri:Legend.LayerTemplate>

    <!--Style of legend item-->
    <esri:Legend.LegendItemTemplate >
    <DataTemplate>
    <StackPanel Orientation="Horizontal">
    <Image Source="{Binding ImageSource}"></Image>
    <ContentControl Content="{Binding Label}"
    FontFamily="Arial Black"
    FontSize="12"
    FontStyle="Italic"
    Foreground="White">
    </ContentControl>
    </StackPanel>
    </DataTemplate>
    </esri:Legend.LegendItemTemplate>
    </esri:Legend>

    </Border>
    </Grid>
    </UserControl>

  2. Code behind C#:

    Code:
    using System.Windows.Controls;
    namespace ArcGISSilverlightSDK
    {
    public partial class MainPage : UserControl
    {
    public MainPage()
    {
    InitializeComponent();
    }
    }
    }

  3. The result of running the sample script given in Steps 1 and 2 is displayed in the legend below.
    [O-Image]

Article ID:000011212

Software:
  • ArcGIS API for Silverlight Prev

Receive notifications and find solutions for new or common issues

Get summarized answers and video solutions from our new AI chatbot.

Download the Esri Support App

Discover more on this topic

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options