Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Legend

This topic provides information for configuring the XamPieChart™ in order to use an ItemLegend.

Overview

This topic contains the following sections:

Requirements

This article assumes you have already read the Data Binding topic and have a pie chart already bound to some data.

Properties

In order to display a legend next to the XamPieChart an ItemLegend needs to be created and assigned to the Legend property. The LegendLabelMemberPath can then be used to specify which property on your data model it will use to display inside the legend for each pie slice.

Additionally you can use the LegendItemTemplate and LegendItemBadgeTemplate properties and the various font properties on ItemLegend to further customize the look of the legend items. Here is a list of the properties which affect the legend item visuals:

Property Name Property Type Description

XamPieChart Properties:

DataTemplate

This is a DataTemplate that will be used for rendering the visuals of each legend item.

DataTemplate

This is a DataTemplate that is responsible for rendering the badge icon for each legend item.

string

The property on the data model whose value will be used in the legend for each pie slice.

ItemLegend Properties:

FontFamily

The font family to use for each legend item.

double

The font size to use for each legend item.

FontStretch

The font stretch to use for each legend item.

FontStyle

The font style to use for each legend item.

FontWeight

The font weight to use for each legend item.

Brush

The foreground color to use for each legend item.

HorizontalAlignment

The horizontal alignment to use for each legend item.

VerticalAlignment

The vertical alignment to use for each legend item.
PieChartWithLegend WPF.png

In XAML:

<Grid x:Name="RootLayout">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <ig:XamPieChart x:Name="pieChart" Grid.Column="1"
                    ItemsSource="{Binding Path=EnergyData}"
                    ValueMemberPath="Coal"
                    LabelMemberPath="CountryAbbreviation"
                    Legend="{Binding ElementName=itemLegend1}">
        <ig:XamPieChart.LegendItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal" Margin="1" Visibility="{Binding Series.Visibility}">
                    <ContentPresenter Content="{Binding}"
                                      ContentTemplate="{Binding Series.LegendItemBadgeTemplate}"/>
                    <TextBlock Text="{Binding Path=Item.Country}"
                               Foreground="{Binding Series.Legend.ItemsForeground}"
                               FontStretch="{Binding Series.Legend.ItemsFontStretch}"
                               FontStyle="Italic"
                               FontWeight="Bold"
                               FontSize="16"
                               FontFamily="MS Arial"/>
                </StackPanel>
            </DataTemplate>
        </ig:XamPieChart.LegendItemTemplate>
    </ig:XamPieChart>

    <ig:ItemLegend x:Name="itemLegend1" Grid.Column="0"/>
</Grid>

In C#:

// Get the DataTemplate from where ever you have it defined.
DataTemplate customLegendItemTemplate = this.Resources["CustomLegendItemTemplate"] as DataTemplate;

ItemLegend legend = new ItemLegend();

XamPieChart pieChart = new XamPieChart();
pieChart.ItemsSource = EnergyData;
pieChart.ValueMemberPath = "Coal";
pieChart.LabelMemberPath = "CountryAbbreviation";
pieChart.LegendItemTemplate = customLegendItemTemplate;
pieChart.Legend = legend;

In Visual Basic:

'Get the DataTemplate from where ever you have it defined.
Dim customLegendItemTemplate As DataTemplate
customLegendItemTemplate = TryCast(Me.FindResource("CustomLegendItemTemplate"), DataTemplate)

Dim legend As New ItemLegend()

Dim pieChart As New XamPieChart()
pieChart.ItemsSource = EnergyData
pieChart.ValueMemberPath = "Coal"
pieChart.LabelMemberPath = "CountryAbbreviation"
pieChart.LegendItemTemplate = customLegendItemTemplate;
pieChart.Legend = legend

Related Content