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

1. Create a Blank App (Universal Windows) in Visual Studio.
2. Drag and drop the C1FlexPie control to the MainPage.
   The following dlls are automatically added to the application:
   C1.UWP.dll
   C1.UWP.DX.dll
   C1.UWP.FlexChart.dll
   
   The XAML markup resembles the following code in the <Grid></Grid> tags.
   
   • XAML

   • XAML

   <Chart:C1FlexPie x:Name="flexPie" Binding="Value" BindingName="Name" HorizontalAlignment="Left" 
          Height="300" VerticalAlignment="Top" Width="300">
       <Chart:C1FlexPie.ItemsSource>
           <Chart:FlexPieSliceCollection>
               <Chart:FlexPieSlice Name="Slice1" Value="1"/>
               <Chart:FlexPieSlice Name="Slice2" Value="2"/>
               <Chart:FlexPieSlice Name="Slice3" Value="3"/>
               <Chart:FlexPieSlice Name="Slice4" Value="4"/>
           </Chart:FlexPieSliceCollection>
       </Chart:C1FlexPie.ItemsSource>
   </Chart:C1FlexPie>
   

Step 2: Binding FlexPie to a Data Source

1. Add a class DataCreator and add the following code.
   
   • Visual Basic
   • C#

   • Visual Basic

   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
   

   • C#

   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 <Grid> tag to the following markup to provide data to FlexPie.
   
   
   • XAML

   • XAML

   <Page
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:local="using:FlexPieQuickStart"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:Chart="using:C1.Xaml.Chart"
       DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"
       x:Class="FlexPieQuickStart.MainPage"
       mc:Ignorable="d">
       <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
           <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 <Page> tag of the MainPage.xaml file.
3. Switch to Code view (MainPage.xaml.cs) and add the following code in the class MainPage in the relevant namespace.
   
   • Visual Basic
   • C#

   • Visual Basic

   Partial Public NotInheritable Class MainPage
       Inherits Page
       Private _data As List(Of FruitDataItem)
       Public Sub New()
           Me.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
   

   • C#

   using System;
   using System.Collections.Generic;
   using System.IO;
   using System.Linq;
   using System.Runtime.InteropServices.WindowsRuntime;
   using Windows.Foundation;
   using Windows.Foundation.Collections;
   using Windows.UI.Xaml;
   using Windows.UI.Xaml.Controls;
   using Windows.UI.Xaml.Controls.Primitives;
   using Windows.UI.Xaml.Data;
   using Windows.UI.Xaml.Input;
   using Windows.UI.Xaml.Media;
   using Windows.UI.Xaml.Navigation;
   
   namespace FlexPieQuickStart
   {
       public sealed partial class MainPage : Page
       {
           List<FruitDataItem> _data;
           public MainPage()
           {
               this.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.