FlexChart | ComponentOne
FlexPie / Quick Start
本主题中
    Quick Start
    本主题中

    This quick start is intended to guide you through a step-by-step process of creating a simple FlexPie application and running the same in Visual Studio.

    Complete the following steps to see how FlexPie appears on running the application:

    Adding FlexPie to the Application

    1. Create a WPF Application (.NET Framework/.NET Core) for .NET Framework version and .NET versions in Visual Studio.
    2. Drag and drop the C1FlexPie control to the MainWindow.
      The following dlls or Nuget Packages are automatically added to the application:
      C1.WPF.4.6.2 or C1.WPF.Core for .NET version
      C1.WPF.DX.4.6.2 or C1.WPF.DX for .NET version
      C1.WPF.FlexChart.4.6.2 or C1.WPF.Chart for .NET version.

      The XAML markup resembles the following code in the <Grid></Grid> tags.
    3. <c1:C1FlexPie x:Name="flexPie" 
                    Binding="Value" 
                    BindingName="Name" 
                    HorizontalAlignment="Left" 
                    Height="300" 
                    VerticalAlignment="Top" 
                    Width="300">
          <c1:C1FlexPie.ItemsSource>
              <c1:FlexPieSliceCollection>
                  <c1:FlexPieSlice Name="Slice1" Value="1"/>
                  <c1:FlexPieSlice Name="Slice2" Value="2"/>
                  <c1:FlexPieSlice Name="Slice3" Value="3"/>
                  <c1:FlexPieSlice Name="Slice4" Value="4"/>
              </c1:FlexPieSliceCollection>
          </c1:C1FlexPie.ItemsSource>
      </c1:C1FlexPie>
      

    Binding FlexPie to a Data Source

    1. Add a class DataCreator and add the following code.
      Public Class DataCreator
      
          Public Shared Function CreateFruit() As List(Of FruitDataItem)
              Dim fruits = New String() {"Oranges", "Apples", "Pears", "Bananas"}
              Dim count = fruits.Length
              Dim result = New List(Of FruitDataItem)()
              Dim rnd = New Random()
              For i As Object = 0 To count - 1
                  result.Add(New FruitDataItem() With {
                      .Fruit = fruits(i),
                      .March = rnd.[Next](20),
                      .April = rnd.[Next](20),
                      .May = rnd.[Next](20)
                  })
              Next
              Return result
          End Function
      End Class
      
      Public Class FruitDataItem
          Public Property Fruit() As String
              Get
                  Return m_Fruit
              End Get
              Set
                  m_Fruit = Value
              End Set
          End Property
          Private m_Fruit As String
          Public Property March() As Double
              Get
                  Return m_March
              End Get
              Set
                  m_March = Value
              End Set
          End Property
          Private m_March As Double
          Public Property April() As Double
              Get
                  Return m_April
              End Get
              Set
                  m_April = Value
              End Set
          End Property
          Private m_April As Double
          Public Property May() As Double
              Get
                  Return m_May
              End Get
              Set
                  m_May = Value
              End Set
          End Property
          Private m_May As Double
      End Class
      
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Text;
      using System.Threading.Tasks;
      
      namespace FlexPieQuickStart
      {
          class DataCreator
          {
              public static List<FruitDataItem> CreateFruit()
              {
                  var fruits = new string[] { "Oranges", "Apples", "Pears", "Bananas" };
                  var count = fruits.Length;
                  var result = new List<FruitDataItem>();
                  var rnd = new Random();
                  for (var i = 0; i < count; i++)
                      result.Add(new FruitDataItem()
                      {
                          Fruit = fruits[i],
                          March = rnd.Next(20),
                          April = rnd.Next(20),
                          May = rnd.Next(20),
                      });
                  return result;
              }
          }
      
          public class FruitDataItem
          {
              public string Fruit { get; set; }
              public double March { get; set; }
              public double April { get; set; }
              public double May { get; set; }
          }
      }
      
    2. Edit the XAML markup to provide data to FlexPie.

      <Window
               x:Class="FlexPieQuickStart.MainWindow"
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:local="clr-namespace:FlexPieQuickStart"
              mc:Ignorable="d"
              DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
              xmlns:Chart="http://schemas.componentone.com/winfx/2006/xaml"
              Title="MainWindow" Height="800" Width="800">
          <Grid>
      
              <Chart:C1FlexPie 
                  x:Name="flexPie" 
                  Binding="April" 
                  BindingName="Fruit" 
                  ItemsSource="{Binding DataContext.Data}">
                  <Chart:C1FlexPie.SelectionStyle>
                      <Chart:ChartStyle Stroke="Red" 
                                        StrokeThickness="2"/>
                  </Chart:C1FlexPie.SelectionStyle>
                  <Chart:C1FlexPie.DataLabel>
                      <Chart:PieDataLabel Content="{}{y}"/>
                  </Chart:C1FlexPie.DataLabel>
              </Chart:C1FlexPie>
          </Grid>
      
      To specify the binding source, you need to add the DataContext = "{Binding RelativeSource={RelativeSource Mode=Self}}" markup in the <Window> tag of the MainWindow.xaml file.
    3. Switch to Code view and add the following code.
      Partial Public Class MainWindow
          Inherits Window
          Private _data As List(Of FruitDataItem)
          Public Sub New()
              InitializeComponent()
          End Sub
          Public ReadOnly Property Data() As List(Of FruitDataItem)
              Get
                  If _data Is Nothing Then
                      _data = DataCreator.CreateFruit()
                  End If
                  Return _data
              End Get
          End Property
      End Class
      
      using System;
      using System.Collections.Generic;
      using System.Linq;
      using System.Text;
      using System.Threading.Tasks;
      using System.Windows;
      using System.Windows.Controls;
      using System.Windows.Data;
      using System.Windows.Documents;
      using System.Windows.Input;
      using System.Windows.Media;
      using System.Windows.Media.Imaging;
      using System.Windows.Navigation;
      using System.Windows.Shapes;
      
      namespace FlexPieQuickStart
      {
          public partial class MainWindow : Window
          {
              List<FruitDataItem> _data;
              public MainWindow()
              {
                  InitializeComponent();
              }
              public List<FruitDataItem> Data
              {
                  get
                  {
                      if (_data == null)
                      {
                          _data = DataCreator.CreateFruit();
                      }
                      return _data;
                  }
              }
          }
      }
      

    Running the Application

    Press F5 to run the application and observe the following output.