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

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.