ui_xamarin_deepdive_header

The promise of Xamarin.Forms is that developers get to target major platforms like iOS, Android and UWP from a single shared code base and leverage their existing skills using C#/XAML in Visual Studio for Windows or MacOS. 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. Recurring Appointments and Buid-in Sceduling Dialogs in Calendar
  5. View PDF Documents with PdfViewer for Xamarin.Forms
  6. New AutoCompleteView for Xamarin.Forms

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 Samples - install and play with the UI.

Telerik Xamarin Samples for iOS

Same story for Android - simply search for the Telerik UI for Xamarin Samples 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.


Telerik Xamarin Samples for Android 

If you want to check the demos on UWP you can search in the Microsoft Store for Telerik UI for Xamarin Demo

Telerik Xamarin Demos for UWP

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

Your Account Downloads 

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.

Telerik Control Panel 

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.
For Windows - the first step is to configure your IDE's Package Manager to point to the Telerik NuGet feed - this is in your Tools menu/Nuget Package Manager /Package Manager Settings. 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!

On MacOS you should first add the Telerik NuGet Server in the packages source list. For more details please check our help article.

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 Visual Studio for Mac. 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 project as well as all the platform specific projects.

 Add Telerik NuGet References
Telerik NuGet Packages

 Add telerik nuget for iOS project

Add Telerik Nuget for Android project

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

Telerik Xamarin Free Trial
 

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

Telerik UI for Xamarin Binaries iOS 

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 "Adding the required Telerik References" section inside the Getting Started article for each of the controls. The docs tell you how to integrate UI for Xamarin in both your Shared/ .NET Standard 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.

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 for Windows and .MPACK add-in files for Visual Studio for 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, 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:

Install mpack file on VS for Mac Telerik Xamarin Add-in 

These extensions include easy project templates to aid in your getting started experience. They work in Visual Studio 2017 on Windows and Visual Studio for Mac. You'll get to pick the Telerik Xamarin UI Application template 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 is how to pick the template in Visual Studio for Windows:

Telerik Xamarin UI App Project Wizard 

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

Telerik Xamarin Template for VS for Mac Create New Telerik UI project on Mac 

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

App Solution

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!


Sam Basu
About the Author

Sam Basu

Sam Basu is a technologist, author, speaker, Microsoft MVP, gadget-lover and Progress Developer Advocate for Telerik products. With a long developer background, he now spends much of his time advocating modern web/mobile/cloud development platforms on Microsoft/Telerik technology stacks. His spare times call for travel, fast cars, cricket and culinary adventures with the family. You can find him on the internet.

Related Posts

Comments

Comments are disabled in preview mode.