Telerik blogs

Building a Mobile Cross-Platform App from a Shared C# Code Base with UI for Xamarin

by Nikolay Diyanov
December 10, 2014 Mobile, Xamarin 0 Comments


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:

Solution Structure

Create a Blank App (Xamarin.Forms Portable) project. Let’s call it GStartedTelerikXamarin:

Telerik UI for Xamarin - New Project

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.
Telerik UI for Xamarin - Solution Architecture

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:
  1. Right-click the GStartedTelerikXamarin solution and choose “Manage NuGet packages for Solution”.
  2. From Updates >> nuget.org install the latest version of the Xamarin.Forms package (v1.2.3.6257). You will be asked to restart Visual Studio afterward.
    Telerik UI for Xamarin - NuGet for AppCompat and Xamarin.Forms
  3. 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 20.0.0.2 

    This will install Xamarin.Android.Support.v7.AppCompat v20.0.0.2 packages as well as the dependencies Xamarin.Android.Support.v4 v20.0.0.4 and Xamarin.Android.Support.v13 v20.0.0.4.    Package-Manager-Console-AppCompat-NuGet-Xamarin
  4. 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.
  5. In order to make the application look good for iPhone5/s screens, let’s include a 640x1136 image named Default-568@2x.png. 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 Default-568@2x.png image:
    Telerik UI for Xamarin - Select Retina Image
  6. You may also need to set the Deployment Target of the .iOS project’s Info.plist:  Telerik UI for Xamarin - Deployment Target

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
    • Telerik.XamarinForms.Chart.dll
    • Telerik.XamarinForms.Common.dll
  • Android
    • Telerik.Xamarin.Android.Chart.dll
    • Telerik.Xamarin.Android.Common.dll
    • Telerik.Xamarin.Android.Primitives.dll
    • Telerik.XamarinForms.Chart.dll
    • Telerik.XamarinForms.ChartRenderer.Android.dll
    • Telerik.XamarinForms.Common.dll
  • iOS
    • Telerik.Xamarin.iOS.dll
    • Telerik.XamarinForms.Chart.dll
    • Telerik.XamarinForms.ChartRenderer.iOS.dll
    • Telerik.XamarinForms.Common.dll
  • WinPhone
    • Telerik.Windows.Controls.Chart.dll
    • Telerik.Windows.Controls.Primitives.dll
    • Telerik.Windows.Core.dll
    • Telerik.XamarinForms.Chart.dll
    • Telerik.XamarinForms.ChartRenderer.WinPhone.dll
    • Telerik.XamarinForms.Common.dll
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

  1. 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.
  2. Modify the GetMainPage() method in the App.xaml.cs file to set the newly created page as a front page of the application. 
  3. 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:


Grid

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:


Annotations

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.


Happy coding!
Chart, Cross Platform, UI, Xamarin
About the Author

Nikolay Diyanov

Diyanov is the Product Manager of the Native Mobile UI division at Progress. Delivering outstanding solutions that make developers' lives easier is his passion and the biggest reward in his work. In his spare time, Nikolay enjoys travelling around the world, hiking, sun-bathing and kite-surfing.

Find him on Twitter @n_diyanov or on LinkedIn.

Related Posts

Mobile .NET MAUI

Sands of MAUI: Issue #110

Mobile .NET MAUI

Sands of MAUI: Issue #109

Mobile Xamarin .NET MAUI

Microsoft Build Recap: Upgrading from Xamarin to .NET MAUI

Comments

Comments are disabled in preview mode.