Home Blog Tech Xamarin Forms Custom UI Components. Part 2: Syncfusion

Xamarin Forms Custom UI Components. Part 2: Syncfusion

Looking at previously mentioned 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 – use 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:

Auto andAuto ios

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.

  1. Syncfusion SfListView – the same situation here. 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:
telerik rendering issue
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.
List and

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.

  1. 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 – By the way, regression bugs haven’t been fixed yet. Thank you, Xamarin…

  1. 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.

  1. 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:
Grid and

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.

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.