Xamarin Forms Custom UI Components. Part 1: Telerik

As you may (must!) know, Xamarin Forms API is a standard part of platform specific API (also in a case of UI components). That’s why it’s humble in a case of a total amount of available UI components, and there is even no CheckBox available (as there is no checkbox on iOS… thanks, Steve). In Xamarin Forms, you need to use Slider instead of CheckBox.

The question is, “Are we doomed to OOTB Xamarin Forms?”

Certainly not! Maybe there aren’t many trustful frameworks to use, but the amount of them is still growing, as is the popularity of Xamarin Forms.

Okay, let’s back to the topic.

If you are a .NET developer, you know Telerik, i.e. from its ASP.NET UI components.

Some time ago, I used Telerik for Xamarin.Forms and I can recommend it. Especially from framework maturity PoV.

What Telerik offers in case of UI components:

It’s OOTB ListView, but it has additional brilliant features, such as:

Items swipe – that allows you to implement list with some options i.e. editing option by swiping from right to left, delete option by swiping from left to right (which you may know from Gmail app on Android),

Items reorder – that allows you to hold and change the position of items if you want to rearrange them,

Items selection – not only single item selection by tapping it, but also multiple items selection, as well as disabling the whole selection,

Pull to refresh – that allows you to reload the entire list/invoke remote API to retrieve latest data etc.

Performance topic (virtualization) has been achieved by using extended native UICollectionView for iOS implementation, and extended native RecyclerView within Android – both provide fast loading and smooth scrolling. Even in a case of a large amount of data.

Appointments – you can add some event for a particular day, at a given moment, for a specific duration of time

Localisation – which supports changing days and months translation labels, based on device selected language. Currently, it has a small bug in iOS – starting day of a week is not taken based on given language culture. That requires some workaround, but I have solution for you

Single day selection, multiple day selections, a range of dates selection

It’s being used as an app menu place – commonly used as a left side menu, that is being opened by swiping from left screen side to right, or by clicking “hamburger” menu icon,

Allows you to put any UI components inside – i.e. StackLayout with app logo Image, some Buttons, that will navigate a user to the most frequently used pages, settings page, help page, etc. It’s just a container, in which you can put any UI components,

Can be used with differently nice-looking UI transitions effects like pushing, revealing, reversing slide out, sliding along, sliding in on top, scaling up, fading in. All you need to do is to define how SideDrawer should look like.
Personally, I’ve used ContentPresenter OOTB feature to:

Allows you to wrap business data models into automatically generated UI, based on C# Annotations (attributes) – it’s fast business apps development, where app view design is not the most important thing on the planet,

Allows you to choose which available UI component should be used for which of your business data property. Available UI components:

SliderEditor,

PickerEditor,

TextEditor,

SegmentedEditor,

NumberPickerEditor,

IntegerEditor,

DecimalEditor,

CheckBoxEditor,

ToggleButtonEditor,

DateEditor,

TimeEditor.

It’s everything you need. It’s great, for massive business data models, that typically would require complex UI to be prepared,

You can define some restrictions/conversion of your generated UI data types – like whether it’s read-only, whether some data model properties should be just ignored (and shouldn’t be mapped as an UI component), which data format should your DateTime property have, what should be shown as i.e. Headers or Placeholders, how the validation of entered data should look like,

Allows you to use it as an Entry, additionally with some portion of available values. It will appear as suggestions for user while user will type just a few characters matching some values from delivered portion of available values,

You can define how expanded drop-down list of suggestions should look like – its style and the UI components inside (as you might want to have some Image Class or Label Class inside).

Software Developer

Until recently, he was Java EE developer, who have been developing extensive PLM system (Windchill) and integrating it with SAP system. Later, he was using the Spring framework and WSO2, while developing a LIMS class system. Recently, he changed technology and engaged in developing cross-platforms mobile applications, using the Xamarin Forms framework. Sometimes, he has nightmares because of that.

Speaking of his hobby, he is interested in a car computer diagnostics. He is also the author of the Polish translation of the built-in navigation system Magneti Marelli RT3, appearing in Peugeot, Citroen, Fiat, Lancia, and Maserati cars.

Newsletter

Subscribe to our monthly newsletter with useful information about building valuable software products.Don't worry, we value your privacy and won't spam you with any bussines enquiries!

As part of our website we use cookies to provide you with services at the highest level, including in a manner tailored to individual needs. Using the site whithout changing the cookies settings means that they will be stored in your device. You can changes settings at any time.
Accept