Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
110
Legend
posted

Hello, 

I'm trying to customize the legend but I'm stuck, is there anyway to move the legend under the chart? How can I apply styles/templates to legend items?

Thanks,

 Pierre-Yves Troel

 

 

Parents
  • 739
    Verified Answer
    posted

    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.
Reply Children