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

Create a WPF Application (.NET Framework/.NET Core) for .NET Framework version and .NET versions in Visual Studio.
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.

xml

<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

Add a class DataCreator and add the following code.

vbnet

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

csharp

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; }
    }
}

Edit the XAML markup to provide data to FlexPie.

xml

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

Switch to Code view and add the following code.

vbnet

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

csharp

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.