Getting Started with Xuni FlexPie for Xamarin.Forms

January 28 2015

Xuni is our collection of cross-platform mobile controls which allow users to provide native experiences on Android, iOS, and Windows Phone. Our new FlexPie control allows you to create customized pie charts that represent a series as slices of a pie, wherein the arc length of each slice depicts the value represented by that slice. These charts are commonly used to display proportional data such as percentage cover. The multi-colored slices make pie charts easy to understand and usually the value represented by each slice is displayed with the help of labels. This guide is meant to be a reference source for creating an initial Xamarin.Forms Project in Visual Studio using a Xuni FlexPie. _Note the beta version was used here, the logo will now appear as the Xuni Butterfly. _ First, you will need to create a Xamarin.Forms Project. This can be accomplished through the following steps:

Select File -> New -> Project
Next, under installed templates, select Visual C# -> Mobile Apps
Select Blank App ( either Xamarin.Forms Portable or Xamarin.Forms Shared )
Name you Application, set the file location, and click Ok to save it.

Next, we will need to add a few Xuni references to the project in order for us to use the controls. This will only require a few steps and should be a familiar process for anyone who has used Nuget Packages in the past:

Select Project -> Manage Nuget Packets
Click Online on the left and select GrapeCity
Install all of desired packages for your application ( Xuni.Core, Xuni.FlexPie )

Now, we can start adding some code to our project. First, we will create a new class as a data source for our FlexPie Inside the class we need to add the following 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;  
}  
}

Now that we have our data layer created, lets go ahead and add the FlexPie control into a new Forms Xaml Page. Add a new class ( in this sample NewPie.xaml ) and modify the code behind as follows:

Using Xuni.Xamarin.FlexPie;

From here we can instantiate the FlexPie control and set the binding context for the FlexPie

public static FlexPie GetFlexPie()  
{  
FlexPie chart = new FlexPie();  
FlexPieDataSource ds = new FlexPieDataSource();  
chart.BindingName = "Name";  
// Note: BindingValue should be binding.  
chart.BindingValue = "Value";  
chart.ItemsSource = ds.Data;  
return chart;  
}

Next we will need to make some changes to the Xaml as follows to include the Xuni reference:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
x:Class="FirstFlexPie.NewFlexPie"  
xmlns:xuni="clr-namespace:Xuni.Xamarin.FlexPie;assembly=Xuni.Xamarin.FlexPie" >

We can further instantiate the FlexPie control by using the following Markup:

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

We’re now approaching the point where we can run the Project. We need to adjust the App.cs code to load our FlexPie control. The following changes are necessary in order for the FlexPie to load on the Main Page:

public class App  
{  
public static Page GetMainPage()  
{  
return new ContentPage  
{  
Content = NewFlexPie.GetFlexPie()  
};  
}  
}

Finally, there are a few small platform specific changes that are necessary. For iOS applications, you will need to add a line to AppDelegate.cs within the .iOS solution. Inside the method FinishedLaunching() add the following line:

Xuni.Xamarin.FlexPie.Platform.iOS.Forms.Init();

Windows Phone applications will also require a small change. Within the .WinPhone application, open up the MainPage.xaml.cs and add the following code to the class constructor:

Xuni.Xamarin.FlexPie.Platform.WinPhone.FlexPieRenderer.Init();

Finally the project should be properly licensed before to avoid nag screens at run time. There are detailed instructions posted on our licensing page. You should now be able to pick a startup project for the platform you want to work with, run the project and view your application in action on your platform of choice. Resources:

MESCIUS inc.