USING A DATATEMPLATE TO STYLE THE LEGEND:

Before You Begin:

LegendItem has a LegendItemTemplate object associated with it. The LegendItemTemplate object exposes properties that you can use within a DataTemplate to create a customized look for your LegendItems.

What You Will Accomplish:

You will create a simple DataTemplate to style the LegendItems in the Legend.

Follow these Steps:

1. Add a Legend to xamChart.
   • Add tags for the Legend property within the xamChart control tags.
   • Add a Legend within the Legend property tags.
   • Set the Legend's UseDataTemplate property to True.

     When you set the UseDataTemplate property to True, the xamChart control will not use the default visual tree for its LegendItems. You must supply a DataTemplate that defines the visual tree for the LegendItems; otherwise, xamChart will just display the fully qualified namespace of the LegendItemTemplate object.

   In XAML:

   …
   <igCA:XamChart.Legend>
   	<igCA:Legend UseDataTemplate="True" />
   </igCA:XamChart.Legend>
   …

2. Create a Resources sections in your Window or Page.

   In XAML:

   …
   <Window.Resources>
   	<!--TODO: Create DataTemplate here-->	
   </Window.Resources>
   …

3. Add a DataTemplate to the Resources section.

   Set the DataTemplate’s DataType property to '{x:Type igCA:LegendItemTemplate}'. By setting the DataType property to LegendItemTemplate, the DataTemplate will apply to all LegendItems.

   • Add a Border to the DataTemplate.

     Set the BorderBrush property to a binding expression that binds to the Fill property of the LegendItemTemplate object. This will keep the BorderBrush property of the Border bound to the Fill property of the DataPoint.

   • Add a TextBlock to the Border.

     Set the Text property to a binding expression that binds to the Text property of the LegendItemTemplate object. This will keep the Text property of the LegendItem bound to the Label property of the Series or DataPoint.

   In XAML:

   …
   <DataTemplate DataType="{x:Type igCA:LegendItemTemplate}">
   	<Border VerticalAlignment="Center" HorizontalAlignment="Stretch" 
   	BorderThickness="4" CornerRadius="4" BorderBrush="{Binding Path=Fill}" >
   		<TextBlock Text="{Binding Path=Text}" />
   	</Border>
   </DataTemplate>
   …

4. Run the project and you will see the LegendItems using the DataTemplate you defined.