Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Data Binding

This topic demonstrates how to bind data to the XamDataPieChart control. At the end of the topic, a complete code sample is provided.

The topic is organized as follows:

Introduction

The procedure below demonstrates how to bind the XamDataPieChart control to a data collection.

Requirements

Add the following NuGet package to your main project:

  • Infragistics.WPF.Charts

For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

Also, add the following Infragistics namespaces:

In XAML:

xmlns:ig="http://schemas.infragistics.com/xaml"

In C#:

using Infragistics.Controls.Charts;

In VB:

Imports Infragistics.Controls.Charts

Binding to Data

The XamDataPieChart requires a collection of data items that define at the least two properties: one that you want to use as a label, and a numeric one that you want to use as the value of each slice. Assuming that your data item only defines these minimum properties, you can simply set the DataSource property of the control, and it will pick up on these automatically.

If you have more than the two minimum properties on your underlying data item, there are other ways to define which properties you want to use. The first is to use the LabelMemberPath and ValueMemberPath properties, and supply the names of the properties that you want to use for the label and value, respectively.

You can also utilize the IncludedProperties or ExcludedProperties collections of the chart. These collections take a string array of the property names that you either want to include or exclude from the plot of the XamDataPieChart.

Code Example

The following code creates a DataItem class representing simple value-label pairs, along with a third string property that we will use to demonstrate the ExcludedProperties collection. There is also a Data class representing a collection of this DataItem:

In C#:

public class Data : ObservableCollection<DataItem>
{
    public Data()
    {
        this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "Administration" });
        this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "Sales" });
        this.Add(new FinancialDataPoint { Spending = 30, Budget = 60, Label = "IT" });
        this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "Marketing" });
        this.Add(new FinancialDataPoint { Spending = 40, Budget = 60, Label = "Development" });
        this.Add(new FinancialDataPoint { Spending = 60, Budget = 20, Label = "CustomerSupport" });
    }
}

public class DataItem
{
    public string Label { get; set; }
    public double Spending { get; set; }
    public double Budget { get; set; }
}

The below code demonstrates the addition of the XamDataPieChart and binding it to data with a code snippet for the IncludedProperties and ExcludedProperties as well as the LabelMemberPath and ValueMemberPath.

In XAML:

    <Grid x:Name="LayoutRoot" >
        <Grid.Resources>
            <local:Data x:Key="data" />
        </Grid.Resources>
        <ig:XamDataPieChart Name="DataPieChart"
                       ItemsSource="{StaticResource data}"
                       ExcludedProperties="Budget"
                       IncludedProperties="Label, Spending" />
    </Grid>

Alternatively:

    <Grid x:Name="LayoutRoot" >
        <Grid.Resources>
            <local:Data x:Key="data" />
        </Grid.Resources>
        <ig:XamDataPieChart Name="DataPieChart"
                       ItemsSource="{StaticResource data}"
                       LabelMemberPath="Label"
                       ValueMemberPath="Spending" />
    </Grid>

Related Content