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.

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>

Code behind C#:

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