Telerik UI for Xamarin is our latest product for cross-platform mobile apps development. It is built on top of the Telerik native controls for iOS and Android to offer Xamarin users truly native UI for their apps with no-compromise customization, flexibility capabilities and native-quality performance. The product ships Xamarin wrappers for UI for iOS, Xamarin wrappers for UI for Android and Xamarin.Forms controls.
Today, I will demonstrate how you can easily set up the Telerik Chart using a single shared codebase for the UI and for the view-model, making it work for all three platforms (iOS, Android and Windows Phone) thanks to the Xamarin.Forms support that Telerik UI for Xamarin offers. Throughout the process of building the app, you will see how to add series, load data and use annotations. This is what we are after:
Create a Blank App (Xamarin.Forms Portable) project. Let’s call it GStartedTelerikXamarin:
This will actually create the following projects:
- Portable/Shared: A cross-platform application library that contains the shared code, being UI or view-models.
- Android: A platform-specific project for the execution of the application. Available on all operation systems.
- WinPhone: A platform-specific project for the execution of the application. Available only for projects created with Visual Studio.
- iOS: A platform-specific project for the execution of the application. To the app to run and be debugged, we need a Mac.
Getting the Latest Platform SDK Versions
Before diving into Telerik related stuff, let’s make sure that we have updated to what’s latest and greatest regarding Xamarin itself, and that all platform targets are correct:
- Right-click the GStartedTelerikXamarin solution and choose “Manage NuGet packages for Solution”.
- From Updates >> nuget.org install the latest version of the Xamarin.Forms package (v220.127.116.1157). You will be asked to restart Visual Studio afterward.
- Now we need to add references to the Xamarin.Android.Support v4, v7.AppCompat and v13. At the moment, Telerik UI for Xamarin (Android) supports version 20 of
Xamarin.Android.Support v4, v7.AppCompat and v13, and the version that just came out is 21. We can't update to a version prior the latest one throught the GUI of NuGet Package Manager, so let's update via the Package Manager Console. To do so, go to Tools >> NuGet Package Manager >> Package Manager Console. In the console window, select GStartedTelerikXamarin.Android project and execute the following command:
Install-Package Xamarin.Android.Support.v7.AppCompat -Version 18.104.22.168
This will install Xamarin.Android.Support.v7.AppCompat v22.214.171.124 packages as well as the dependencies Xamarin.Android.Support.v4 v126.96.36.199 and Xamarin.Android.Support.v13 v188.8.131.52.
- Right-click the GStartedTelerikXamarin solution and choose Properties >> Configuration Properties. For the GStartedTelerikXamarin.iOS Platform, choose iPhoneSimulator if you intend to test the iOS app on the simulator.
- In order to make the application look good for iPhone5/s screens, let’s include a 640x1136 image named Defaultfirstname.lastname@example.org. We should set this from the project properties in Visual Studio. From the project properties, select the iOS Application tab and scroll to the Launch Images section as shown below. Click the Retina Display box to browse for your Defaultemail@example.com image:
- You may also need to set the Deployment Target of the .iOS project’s Info.plist:
Adding Telerik References
Now comes the Telerik project setup. In order to be able to work with Telerik UI for Xamarin, we should add references to the following assemblies:
- For the Portable project
In addition, we should add the following code to the specified project files:
Android - MainActivity.cs
iOS - AppDelegate.cs
You also have to create the following instances in the beginning of the FinishedLaunching() method:
WinPhone - MainPage.xaml.cs
Preparing the Data
Let’s first prepare the data. As I implied earlier, the view-model code base is common for Chart, regardless of the mobile platform it runs on. For the purposes of our demo, let’s have a list with categorical data:
Setting Up a New Page
- Let’s create the page the Chart will reside in. Right-click on the Portable Class Library project > Add > New Item... > choose Forms Xaml Page. Let’s call it MainPage.
- Modify the GetMainPage() method in the App.xaml.cs file to set the newly created page as a front page of the application.
- Set up the page background color as shown below.
We can now set up the Chart in XAML, or we can do it in the code behind. Let’s see how we can do this in the code behind below.
Setting up Telerik Chart for Xamarin
Axes and Series
In the code behind of the MainPage, using the Telerik.XamarinForms.Chart namespace, create a RadCartesianChart instance and add a categorical axis making it the horizontal axis, and a numerical axis making it the vertical axis. Add a Bar series, and set the content of the page to be the Chart:
Populating with Data
What this chart would be without data? Let’s fill it with the sample data we created in the view-model:
One could get better interpretation for data if its shown on a grid background, so let’s add a grid using the Xamarin.Forms namespace:
For pointing out specific metrics that the chart gives, we can use band and line annotations. In this case, let’s take the data average and display it on the chart:
This is it! You can download demo project from Github. Note, that it needs the UI for Xamarin product to run.
Download UI for Xamarin from here, if you haven’t done so already. In the UI for Xamarin package, you will find a complimentary demo project with many examples demonstrating the Telerik Chart for Xamarin.