This section describes how to add a FlexPie control to your portable or shared app and add data to it. For information on how to add Xuni components in C# or XAML, see Adding Xuni Components using C# or Adding Xuni Components using XAML.

This topic comprises of three steps:

• Step 1: Create a datasource for FlexPie
• Step 2: Add a FlexPie control
• Step 3: Run the Project

The following image shows how the FlexPie appears after completing the steps above:

Step 1: Create a datasource for FlexPie

The following classes serve as a datasource for the FlexPie control:

class FlexPieDataSource
{
    private List<FruitEntity> entityList;

    public List<FruitEntity> Data
    {
        get { return entityList; }
    }

    public FlexPieDataSource()
    {
        entityList = new List<FruitEntity>();
        string[] fruits = new string[] { "Oranges", "Apples", "Pears", "Bananas", "Pineapples" };
        Random random = new Random();
        for (int i = 0; i < fruits.Length; i++)
        {
            decimal value = (decimal)random.NextDouble() * 100;
            entityList.Add(new FruitEntity(fruits[i], value));
        }   
    }
}
class FruitEntity
{
    public string Name { get; set; }
    public decimal Value { get; set; }

    public FruitEntity(string name, decimal value)
    {
        this.Name = name;
        this.Value = value;
    }
}

Step 2: Add FlexPie control

Complete the following steps to initialize a FlexPie control in C# or XAML.

In Code

1. Add a new class (for example QuickStart.cs) to your Portable or Shared project and include Xuni FlexPie and Xamarin references as shown below:

   C#	Copy Code
   using Xuni.Forms.FlexPie; using Xamarin.Forms;

2. Instantiate a FlexPie control in a new method GetFlexPie().

   C#	Copy Code
   public static FlexPie GetFlexPie() { FlexPie chart = new FlexPie(); FlexPieDataSource ds = new FlexPieDataSource(); chart.BindingName = "Name"; chart.Binding = "Value"; chart.ItemsSource = ds.Data; return chart; }

In XAML

1. Add a new Forms XAML Page (for example QuickStart.xaml) to your Portable or Shared project and modify the <ContentPage> tag to include the Xuni reference as shown below:

   XAML	Copy Code
   <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Forms.FlexPie;assembly=Xuni.Forms.FlexPie" >

2. Initialize a FlexPie control by adding the markup for the control between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags, as shown below:

   XAML	Copy Code
   <StackLayout> <xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value" Grid.Row="1" Grid.ColumnSpan="2" VerticalOptions="FillAndExpand"> </xuni:FlexPie> </StackLayout>

3. In the Solution Explorer, expand the QuickStart.xaml node and open QuickStart.xaml.cs to open the C# code behind.
4. In the QuickStart() class constructor, set a new instance of FlexPieDataSource as a BindingContext for the FlexPie.

   The following code shows what the QuickStart() class constructor looks like after completing this step.

   C#	Copy Code
   public QuickStart() { InitializeComponent(); chart.BindingContext = new FlexPieDataSource(); }

Step 3: Run the Project

1. In the Solution Explorer, double click App.cs to open it.
2. Complete the following steps to display the FlexPie control.
   • To return a C# class: In the class constructor App(), set a new ContentPage as the MainPage and assign the control to the ContentPage's Content by invoking the method GetFlexPie() defined in the previous procedure, Step 2: Add a FlexPie Control.

     The following code shows the class constructor App() after completing steps above.

     C#	Copy Code
     public App() { // The root page of your application MainPage = new ContentPage { Content = QuickStart.GetFlexPie() }; }

   • To return a Forms XAML Page: In the class constructor App(), set the Forms XAML Page QuickStart as the MainPage.

     The following code shows the class constructor App(), after completing this step.

     C#	Copy Code
     public App() { // The root page of your application MainPage = new QuickStart(); }

3. Some additional steps are required to run the iOS and WinPhone apps:
   • iOS App:
     1. In the Solution Explorer, double click AppDelegate.cs inside YourAppName.iOS project, to open it.
     2. Add the following code to the FinishedLaunching() method.

        C#	Copy Code
        Xuni.Forms.FlexPie.Platform.iOS.Forms.Init();

   • WinPhone App:
     1. In the Solution Explorer, expand MainPage.xaml.
     2. Double click MainPage.xaml.cs to open it.
     3. Add the following code to the class constructor.

        C#	Copy Code
        Xuni.Forms.FlexPie.Platform.WinPhone.FlexPieRenderer.Init();

4. Press F5 to run the project.

Copyright © GrapeCity, inc. All rights reserved.