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:

Step1: Adding FlexPie to the Application
Step 2: Binding FlexPie to a Data Source
Step 3: Running the Application

Step 1: Adding FlexPie to the Application

Create a WPF Application in Visual Studio.

Drag and drop the C1FlexPie control to the MainWindow.
The following dlls are automatically added to the application:
C1.WPF.4.dll
C1.WPF.DX.4.dll
C1.WPF.FlexChart.4.dll

The XAML markup resembles the following code in the <Grid></Grid> tags.

XAML

XAML

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

Step 2: Binding FlexPie to a Data Source

Add a class DataCreator and add the following code.

Visual Basic
C#

Visual Basic

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

Edit the XAML markup to provide data to FlexPie.

XAML

XAML

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

Visual Basic
C#

Visual Basic

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

Step 3: Running the Application

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