Xamarin forms custom UI components are a standard part of platform specific API.
That’s why it’s humble in a case of a total amount of available UI components, and there is even no CheckBox available. 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.
As this is quite a long article to fully cover Xamarin Forms custom UI components, I’ve devided it into four parts:
Part 1: Telerik
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 has to offer in case of Xamarin Forms UI components?
Telerik ListView
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),
- Reorder – that allows you to hold and change the position of items if you want to rearrange them,
- 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.
Telerik Calendar
It supports:
- 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
Telerik SideDrawer
Main features:
- 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:
- extract app menu view to different code place from particular page view code PoV,
- split two things,
- reuse menu views at specific page view code.
Telerik Chart
Main features:
- Currently, has two types of charts – Cartesian (which has lot of subtypes like area, bar, line, scatter, spline, etc.) and Pie,
- It’s a good solution for lack of OOTB XF UI component for charts,
- Can be used for any data charts – such as financial data, statistics data, medical data, real-time measured data, etc.,
- You can define and implement the way UI should behave at particular chart place in case of “tapping” (selecting), “zooming” etc.
- Determine type of axes, which will be used – DateTime, Numerical, Categorical,
- Modify chart design a little bit, i.e. in a case of a Cartesian Chart.
Telerik DataForm
Telerik DataForm 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.
With it, you can also 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’severything you need. It’s great, for massive business data models, that typically would require complex UI to be prepared.
You can also 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.
Finally, you can extend those annotations by defining some properties values – whether it’s read-only, validation mode, editor style, etc.
Telerik AutoComplete (BETA)
Main features:
- 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).
Hey, what about iOS? Check this out:
System.ArgumentNullException: Value cannot be null.
Parameter name: value
Even simplest code example, delivered by Telerik in official docs, is causing OOTB exception at AppDelegate – native iOS part of your project. Above exception stack trace is all that you’ll get.
It happens when you try to write anything into autocomplete field by using screen keyboard.
Part 2: Syncfusion
Looking at the six UI components for Xamarin Forms delivered by Telerik, you can get the impression that it’s not enough for you.
What about:
- AutoComplete (Telerik has just a beta version of it)?
- Rotator (such as Carousel, but extended, with possibility to show dots that indicates an amount of elements or thumbnails or to pre-show elements in small sizes)
- some other components?
Where are they? Inside Syncfusion for Xamarin Forms!
It contains around 30 different UI components dedicated for Xamarin Forms.
What Syncfusion offers in case of UI components:
1. Syncfusion SfAutoComplete
You can use AutoComplete component (that looks like Entry) and bind to it some portion of values, that should be available during auto-suggesting with just a few lines of code:
First impression? It looks and works cool! You can tweak it in the way in which:
- the best-suited suggestion will be chosen based on your already written letters, but you can still pick another idea from a list that appears automatically,
- the best-suited suggestion will be selected based on your already written letters, but a list of other suggestions won’t appear,
- only a list of suggested words will appear,
- a customised list of suggested words will appear – you can decide if
suggested words should i.e.:
- Just contain your already written letter (no matter where),
- Start with your letters,
- Be case-sensitive (or not), etc.
- you can customise a list of suggested words quickly – choose text size, text colour, background colour, a size of whole suggestion list, etc.
You can also put more than just a string inside item from suggestion list, i.e. you can place an image behind a label or anything else. Just decide what you need.
2. Syncfusion SfListView
Here, the situation is similar. With just a few lines of code, it’s possible to use ListView component, and bind some values from ViewModel to it.
The good thing for me is that swipe feature works similarly as in a case of Telerik RadListView. Well, it works even better!
Telerik implementation causes some rendering issues that I faced. For example, when an item has been swiped, scrolling entire list created view rendering issue at Android (no issues at iOS). What happened? Swiped item stayed in the same position, but list scrolling correctly – that’s in a case of Telerik.
At Syncfusion it’s just working, as it should work, without any rendering issues.
Let’s return to the topic.
SfListView, in this case, looks way more stable – at least from UI PoV. During the testing of this UI component, I didn’t face any UI rendering issues (as in a case of Telerik). Another benefit of SfListView (Syncfusion) comparing to RadListView (Telerik) is that the Syncfusion allows you to use not only vertically oriented list (as by default), but also horizontally oriented list. Which is not possible, using Telerik.
This shows the real power of Syncfusion and could resolve a problem with horizontally scrolled views in Xamarin, i.e. when you need to present a scrollable small gallery of images, etc.
Of course, it’s possible to achieve that at native Xamarin Forms by placing multiple items at ScrollView horizontally oriented, but the performance of such a view would be poor.
3. Syncfusion SfNavigationDrawer
At first glance, seems similar to RadSideDrawer (from Telerik).
Unfortunately the simplest thing – sample project delivered by Syncfusion – didn’t work. It crashes at Android during the start of the app, but that’s because of XF OOTB issue. You cannot use ListView at NavigationDrawer at XF. It works only on an old version of XF – 2.3.1.114. By the way, regression bugs haven’t been fixed yet. Thank you, Xamarin…
4. Syncfusion SfRotator
It’s a component that can be useful when you need to present some items collection.
Collection with specific functionalities – horizontal scrolling, possibility to indicate an amount of items (in OOTB) by showing “dots” or thumbnails of items indicator at any location you need.
The most cool-looking feature is an auto-play, which takes care of changing elements automatically one by one with appropriate time delay.
5. Syncfusion SfDataGrid
The easiest, the fastest and the most valuable component, that may not look beautiful (without adjusting it) at first glance, but it brings you the possibility to show some data in UI without building the UI itself for each data property separately.
You can use just one line of XAML/C# code to bind your business data collection into this component:
UI will be built automatically basing on YourDataCollection data model – one grid column per one business data property.
It has a lot of useful features, such as:
- renaming automatically named columns,
- possibility to use built-in sorting, grouping, filtering, selecting (none, single, multiple),
- simple styling (of whole grid table, of selected items, etc.), conditional styling,
- the defining size of grid columns,
- swiping the items,
- paging the data (to split items between pages instead of packing everything against one scrollable view),
- columns and rows drag-and-drop,
- pulling to refresh (that you may know from Telerik RadListView),
- loading only partial amount of data (to do NOT kill back-end API, reduce network resources, increase a performance of an app).
It also brings you the possibility to export visualised data into PDF file!
Syncfusion SfDataGrid is a great component, if your app view doesn’t need to look fresh and modern, but should be just responsible for showing data.
Those five and much, much more! Syncfusion contains a vast number of available UI components. Feel free to use some of them and then share your experience with me.
Part 3: DIY and conclusion
There is no native CheckBox in Xamarin Forms.You may say,“But I’m in desperate need of it! How will my check-list app look like if I will use Switch instead of CheckBox!?”No problem. Let’s use my tricky-hacky-font-awesome-sh solution.
First of all, you need to integrate Font Awesome font into your Xamarin Forms app. Prepare Custom Renderers that will be responsible for using Font Awesome font, instead of native. You can use below tutorials for that:
- FontAwesome using Xamarin Forms
Once you have finished, you can use newly prepared FontAwesomeLabel in XAML:
- Define XAML static
values such as:
- FA icon checked
- FA icon unchecked
- enabled checkbox colour
- disabled checkbox colour
- InvertBooleanConverter:
- Define CheckBox FontAwesomeLabel view and “switching logic” at XAML:
- Define CheckBox logic at ViewModel:
You can click (tap) the first CheckBox, and it’s just simply switching from checked to unchecked (once you tap it).
The second one is disabled, and that’s why it’s unchecked and in grey (if it were checked, but also disabled, it would be Particularly in grey). It won’t switch to checked if tapped.
It looks the same on both platforms, and so is Font Awesome.
Full code for FontAwesomeLabel and how-to manual for CheckBox purposes is available here.
Conclusion: what to use?
- There is no one simple answer. You need to try as many times as possible to find components, which fits your or your customer’s needs.
- Telerik is mature enough, and it’s a recognisable brand. Especially for .NET developers.
- Syncfusion has more UI components that could be useful for nice-looking modern mobile apps.
- I found some issues at Telerik ListView implementation, which don’t occur at Syncfusion ListView. Furthermore, I have also found some rendering issues at Syncfusion components, mostly on iOS, i.e. SfRotator thumbnails don’t render correctly (only first thumbnail was available).
- Both Telerik and Syncfusion (even more, all three of them including Xamarin Forms) have some issues/rendering problems. Custom components could have even more bugs inside, because of the usage of native components with additional code. And if the native component contains bugs, then issues are unavoidable.
- Syncfusion has another benefit in comparison with Telerik – it has free Community License, if you are “individual developer” or if your company has “annual gross revenue below $1 million USD.” In the second case, up to five users can use Community License.
Part 4: Custom Renderers
If you are looking at UI components available in Xamarin Forms, you may get the impression, that not everything which is possible natively against iOS/Android and which seems that should be possible also in Xamarin Forms, is available.
Let’s imagine strike through feature at
label/textview – it’s something really basic. As you may notice, it’s also
available in WordPress ;), but it’s NOT
available in Xamarin Forms.
So, how to deal with it? How to implement it? First of all, we must find a solution for striking through text for:
Next step is to extend default Label class of Xamarin Forms, in our PCL (base) project, in order to define new property called IsStrikeThrough.
With such prepared extended Label – ExtendedLabel – we can implement platform specific code, based on solutions found at StackOverflow, but mapped into C# code.
And that’s it! We can start using our custom ExtendedLabel:
As you can see, customisation of native UI components isn’t terrible, and in most cases, we can simply find a native solution for our problem and “map” founded code into C# wrap in Xamarin Forms.
Explore .NET Application Development with SoftwareHut
