English

How To: Change legend color and font using the Legend control with templates

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]