Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Data Binding

This topic demonstrates how to bind data to the XamPieChart™ 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 XamPieChart control to a data collection. You will define a data collection, add the Pie Chart control to your application, and then bind the control’s ItemsSource to an instance of the data collection.

Preview

PieChart DataBinding 01.png

Figure 1: The XamPieChart control as implemented by the sample code

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

Overview

  1. Defining a Data Model

  2. Adding an Instance of the Pie Chart control

  3. (Optional) Verifying the result

Steps

  1. Define a Data Model.

Create a class to model the data. The following code creates a DataItem class representing simple value-label pairs, as well as a Data class representing a collection of those pairs:

In C#:

public class DataItem
{
    public string Label { get; set; }
    public double Value { get; set; }
}

public class Data : ObservableCollection<DataItem>
{
    public Data()
    {
        Add(new DataItem { Label = "Item 1", Value = 5 });
        Add(new DataItem { Label = "Item 2", Value = 6 });
        Add(new DataItem { Label = "Item 3", Value = 3 });
        Add(new DataItem { Label = "Item 4", Value = 7 });
        Add(new DataItem { Label = "Item 5", Value = 5 });
    }
}

In Visual Basic:

Public Class DataItem
   Public Property Label() As String
      Get
         Return _Label
       End Get
       Set
          _Label = Value
       End Set
    End Property
    Private _Label As String
    Public Property Value() As Double
       Get
          Return _Value
       End Get
       Set
          _Value = Value
       End Set
    End Property
    Private _Value As Double
End Class
Public Class Data
   Inherits ObservableCollection(Of DataItem)
   Public Sub New()
      Add(New DataItem() With { .Label = "Item 1", .Value = 5 })
      Add(New DataItem() With { .Label = "Item 2", .Value = 6 })
      Add(New DataItem() With { .Label = "Item 3", .Value = 3 })
      Add(New DataItem() With { .Label = "Item 4", .Value = 7 })
      Add(New DataItem() With { .Label = "Item 5", .Value = 5 })
   End Sub
 End Class

  1. Add an instance of the XamPieChart Control.

To the layout root , add an instance of the data collection, a legend instance, and an instance of the Pie Chart:

In XAML:

    <Grid x:Name="LayoutRoot" >
        <Grid.Resources>
            <local:Data x:Key="data" />
        </Grid.Resources>
        <ig:ItemLegend x:Name="Legend"
                       Grid.Row="1"
                       VerticalAlignment="Top"
                       HorizontalAlignment="Right"  />
        <ig:XamPieChart Name="pieChart"
                       Grid.Row="2"
                       ItemsSource="{StaticResource data}"
                       LabelMemberPath="Label"
                       ValueMemberPath="Value"
                       Legend="{Binding ElementName=Legend}"/>
    </Grid>

  1. (Optional) Verify the Result.

Run your application to verify the result. If you have successfully bound the Pie Chart control to the data collection, the resulting chart will look like the one shown in Figure 1, above.

Related Content