Quick Start: Add data to FlexPie

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:

C#	Copy Code
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; } }

Copy Code

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

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.Xamarin.FlexPie; using Xamarin.Forms;

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

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

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

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.Xamarin.FlexPie;assembly=Xuni.Xamarin.FlexPie" >

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.Xamarin.FlexPie;assembly=Xuni.Xamarin.FlexPie" >

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"> </xuni:FlexPie> </StackLayout>

In the Solution Explorer, expand the QuickStart.xaml node and open QuickStart.xaml.cs to open the C# code behind.
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(); }

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

Step 3: Run the Project

In the Solution Explorer, double click App.cs to open it.
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(); }
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.Xamarin.FlexPie.Platform.iOS.Forms.Init();
- WinPhone App:
  1. In the Solution Explorer, expand MainPage.xml.
  2. Double click MainPage.xml.cs to open it.
  3. Add the following code to the class constructor.
    C#
    Copy Code
    
    Xuni.Xamarin.FlexPie.Platform.WinPhone.FlexPieRenderer.Init();
Press F5 to run the project.
Back to Top