UI for Xamarin Deep Dive: Starting Strong

The promise of Xamarin.Forms is that developers get to target major platforms like iOS, Android, UWP and MacOS from a single shared code base and leverage their existing skills in C#/XAML. While Xamarin provides the frameworks, IDEs and integrations, most professional Xamarin.Forms apps need polished UX. Developers may be better served grabbing well-engineered performant UI controls out of the box to ship their apps faster. Think of a polished UI as the must-have wow factor. Seriously.

Telerik UI for Xamarin is a collection of Xamarin.Forms controls and Xamarin bindings built on top of the native Telerik UI for iOS and UI for Android suites. The Xamarin.Forms controls also utilize controls and features from the Telerik UI for UWP, providing a common API that allows the developer to use the native Telerik components on all three mobile platforms (iOS / Android / Windows) using a single shared code base. UI for Xamarin provides complex, rich and performant UI controls out-of-the-box so that you can focus on delivering your app functionality.

Today begins a series of articles that celebrate UI for Xamarin, unapologetically. No more fluffy overviews – we're taking a deep dive into each of the controls, their features and usage tactics. By developers, for developers. Here's what you can expect each day of this week – we'll update links as articles go live:

  1. UI for Xamarin Deep Dive: Starting Strong (this article)
  2. UI for Xamarin Deep Dive: Must-have Interactivity with ListView
  3. UI for Xamarin Deep Dive: Solid Organization with SideDrawer
  4. UI for Xamarin Deep Dive: User Productivity with Calendar
  5. UI for Xamarin Deep Dive: Typing Efficiency with AutoComplete

Show Me the Money

Sure we can tell you that UI for Xamarin provides polished UI controls and makes a developer's life easier. But why take our word for it? Why not play around with the UI suite yourself and see if it fits your need? Check out the performance and interactivity of each of the controls, before deciding for yourself if you see the potential for your Xamarin app.

There are beautiful showcase apps that highlight UI for Xamarin controls for each mobile platform and show developers the simple sample code to achieve the results. If you're on iOS, head to the iOS Store and search for the Telerik UI for Xamarin Examples app – install and play with the UI.

Same story for Android – simply search for the Telerik UI for Xamarin Examples in the Google Play Store. Did we mention you should play around with the controls showcased in the app? Allow us to prove our worth.

Supported Mobile Platforms

First, let's get the Platform support question out of the way – what can you target? You can use UI for Xamarin.Forms for applications running on the following operating systems and supported versions:

  1. Android – 4.0.3 (API 15) or higher
  2. iOS – 7.0 or higher
  3. Windows – Windows Phone 8 Silverlight, Windows 8.1 / Windows Phone 8.1, Windows 10

That should cover most of your mobile app user base.

Getting Started with the Bits

Next up, let's talk about how you get started with the bits to use UI for Xamarin in your apps. You have several choices here, based on your OS and how you want the integration within your Xamarin project.

MSI Installation

If you're on Windows, an easy option is to download UI for Xamarin MSI Installer, if you already have a Telerik subscription to the product. Simply log in to your account on telerik.com, head to Product Downloads and find UI for Xamarin Cross-Platform SKU – download and fire up the MSI. It will install all the UI for Xamarin bits, provide Visual Studio integration and pull in Telerik Xamarin.Forms template integration.

Telerik Control Panel

Another convenient option for developers on Windows is the Telerik Control Panel – the one app that manages all your Telerik products in one place. Find UI for Xamarin, if your subscription has it, download it and install it to get the same MSI experience.

NuGet

Be it on Windows or Mac, one of the easiest way for developers to integrate UI for Xamarin in their Xamarin projects is the Telerik NuGet Server. The first step is to configure your IDE's Package Manager to point to the Telerik NuGet feed – this is in your Preferences/Options and works the same way in Visual Studio and Xamarin Studio. Simply set up a new NuGet source to point to the Telerik gallery at https://nuget.telerik.com/nuget, authenticate yourself for the first time – and done!

One big advantage of the NuGet route is that, not only do you get an easy way to pull in UI for Xamarin references into your existing project, you also get easy updates too. Any time we update UI for Xamarin bits, NuGet would let you know that package updates are available – you simply need to update to get the latest.

Here's how you use NuGet to pull in UI for Xamarin bits into an existing project – shown for here Xamarin Studio for brevity, though Visual Studio has the same workflow. Once you pull in the Telerik UI for Xamarin package, NuGet does the rest of the magic – you'll have the required UI for Xamarin references in your shared PCL as well as all the platform specific projects.

Download & Manual Integration

While NuGet may provide the easiest way to integrate UI for Xamarin in your projects, there is a more basic option in case NuGet isn't quite your cup of tea. To use UI for Xamarin controls, you essentially need the right DLLs referenced properly in your projects, and there is nothing stopping you from doing everything manually. Control freaks rejoice!

Simply get to the product page and hit the big red Download free trial button

Once downloaded, unzip the package and take a peak inside.

You get binaries for each supported mobile platform, as well as example apps and project templates. You may choose to add only the DLLs for the UI controls you are using from UI for Xamarin – and the required assemblies can be totally added manually.

Head to the UI for Xamarin docs and check out the 'Required Telerik Assemblies' section for each of the controls. The docs tell you how to integrate UI for Xamarin in both your PCL and platform-specific projects one at a time. Drop the DLLs into the specified locations in your project, add references in code and you are golden.

Register Renderers

Several of the UI for Xamarin controls gain their polish, appearance, behavior and performance from the fact that they are truly native UI controls customizable for each platform. Accordingly, to render them from a Xamarin.Forms abstraction requires Custom Renderers. No worries though – everything comes ready out-of-the-box – you just need to register the renderers in your app. The docs will show you how to register the renderers for each of controls when using them on iOS, Android and UWP platforms.

As an example, if you are using the UI for Xamarin Charts, ListView, SideDrawer and AutoComplete controls in an iOS app, here's how the AppDelegate.cs file may look in your iOS specific project – notice the custom renderer registrations and their initialization:

using System;
using System.Collections.Generic;
using System.Linq;
    
using Foundation;
using UIKit;
using Xamarin.Forms;
    
[assembly: ExportRenderer(typeof(Telerik.XamarinForms.DataControls.RadListView), typeof(Telerik.XamarinForms.DataControlsRenderer.iOS.ListViewRenderer))]
[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Primitives.RadSideDrawer), typeof(Telerik.XamarinForms.PrimitivesRenderer.iOS.SideDrawerRenderer))]
[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Input.RadAutoComplete), typeof(Telerik.XamarinForms.InputRenderer.iOS.AutoCompleteRenderer))]
[assembly: ExportRenderer(typeof(Telerik.XamarinForms.Chart.RadCartesianChart), typeof(Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer))]
    
namespace Aviation.iOS
{
    [Register("AppDelegate")]
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
    
            Telerik.XamarinForms.Common.iOS.TelerikForms.Init();
            new Telerik.XamarinForms.DataControlsRenderer.iOS.ListViewRenderer();
            new Telerik.XamarinForms.PrimitivesRenderer.iOS.SideDrawerRenderer();
            new Telerik.XamarinForms.InputRenderer.iOS.AutoCompleteRenderer();
            new Telerik.XamarinForms.DataVisualization.Gauges.RadRadialGauge();
            new Telerik.XamarinForms.ChartRenderer.iOS.CartesianChartRenderer();
    
            LoadApplication(new App());
    
            return base.FinishedLaunching(app, options);
        }
    }
}

Starting off Right with Templates

It is not often that we developers get to start working on greenfield projects. But, if and when you do, we want to help you out a little with some polished Project Wizards – the goal is to get you to a nice starting point with UI for Xamarin.

Amidst the downloaded bits for UI for Xamarin, you'll find a Project Templates folder that contains .VSIX extension files for Visual Studio on Windows and .MPACK add-in files for Xamarin Studio on Mac.

If you installed UI for Xamarin from the MSI Installer, the Visual Studio Extension will be automatically added to your IDE. If you're on a Mac using Xamarin Studio, you'll simply need to open up your Addin Manager and point to the .MPACK file – if successfully installed, the project wizard should show up in the IDE Extensions list, like so:

These extensions include easy project templates to aid in your getting started experience. They work in Visual Studio 2015/2017 on Windows and Xamarin Studio/Visual Studio for Mac. You'll get to pick the TelerikXFApp templates in Visual Studio and the Project Wizard steps you through your choice target platforms/API levels – the end result is a project customized to your needs and ready with UI for Xamarin bits.

Here's the same project wizard experience – this time on a Mac:

The end result is a Xamarin project with the correct UI for Xamarin bits added as references in the PCL and platform-specific projects. Everything is all set for you to start coding up your app.

Conclusion

With Xamarin.Forms democratizing cross-platform mobile development for .NET developers, you should be proud of choosing the Xamarin technology stack. Just don't go reinventing the wheel with complex UI.

Telerik UI for Xamarin is here to help – our engineering efforts behind each control shows up in the performance and polish. Today was the just the beginning to get you started off on the right foot. But we know you are smart and have likely already moved past the starting experience. Come back to the Telerik Developer Network each day this week and we'll showcase a different UI control and how it can augment your app with smart features.

Also, want a rundown of common roadblocks encountered by Xamarin.Forms developers and how to solve them? Grab our new whitepaper for real-world strategies, coding samples and smart UI.

Happy coding!

Comments