Telerik Tagit

Part 1 - App Overview


Telerik UI for Xamarin

Telerik UI for Xamarin comes with more than 70 UI components and includes dozens of Xamarin.Forms controls ranging from the Chart control for presenting data in chart form to the SideDrawer control implementing the popular slide-out UX pattern. It lets you do more with less code and provides the tools you need to build compelling and highly performant user experiences that cut across platforms. And new controls such as the SlideView control, which lets users swipe between pages, make a great toolset even better.


In this six-part series, we will use Xamarin.Forms and Telerik UI for Xamarin to create a rich cross-platform app that runs on Android, iOS, and Windows. Rather than create a "toy" app that is useful for learning but whose ultimate destination is the Recycle Bin, we will create a fully featured app that does something useful and demonstrates some of the very best features that Telerik UI for Xamarin has to offer.

Introducing Telerik Tagit

Everyone has a mobile phone. Everyone takes tons of pictures. And everyone knows what it's like to search through thousands of photos trying to find the one featuring an alien wearing a sombrero standing next to the Basilica San Marco in Venice. Wouldn't it be great if all your photos were captioned and tagged so you could easily retrieve any image containing a cat, a sunset, a famous landmark, or even an alien?


Telerik Tagit is a slick mobile app that uses Microsoft Azure's Computer Vision API — part of the Cognitive Services suite of services and APIs for building intelligent apps backed by artificial intelligence and machine learning — to caption images and tag them with search keywords. With Tagit, your photos collection becomes a database that you can search and sort by the content contained in individual images.

It seems like a tall order, but it's not nearly as difficult as it sounds with Telerik UI for Xamarin powering the front end and Microsoft Cognitive Services powering the back end. In addition to having a cool app to add to your app collection, you will have source code that demonstrates best practices and that can be used as a starting point for great cross-platform apps of your own.

The Road Ahead

Every great app starts with great layout and navigation. In Part 2 of this series, we will use the ultra-cool SideDrawer control and newly released SlideView control to create a clean, easily understood navigation experience that provides a foundation for additional pages and views in subsequent articles.

In Part 3, we will add the ability to upload photos using the Telerik UI for Xamarin ListView control, which now supports linear and multicolumn grid-layout modes. We will also use controls such as BusyIndicator to polish the user experience, and incorporate calls to the Computer Vision API to tag and caption the photos that you upload.

With the image-tagging functionality in place, Part 4 will use the AutoComplete control as the basis for a rich image-search experience. It will also use the Rating control to add flair to the UI and enable users to rate the photos that they upload.

Part 5 will introduce the Calendar and TabView controls, and demonstrate how to combine Calendar and ListView to sort and select images by date.

In Part 6, we will add the final polish to the app by using Gauge and Chart to incorporate stunning data visualizations. Ready to get started? If so, proceed to Part 2 and follow along as we begin the process of taking Telerik Tagit from the drawing board to the app store.

Part 1
App Overview

Part 2
Layout and Navigation

Featuring the SideDrawer and SlideView controls.

Part 3
Image Uploading and Tagging

Featuring the ListView and BusyIndicator controls and the Computer Vision API.

Part 4
Enhancing the UI and Rating

Featuring the AutoComplete and Ratings controls.

Part 5
Sorting & Selecting Images by Date

Featuring the Calendar and TabView controls.

Part 6
Finishing Touches

Featuring the Gauge and Chart controls.