{"id":38508,"date":"2019-01-30T12:56:02","date_gmt":"2019-01-30T17:56:02","guid":{"rendered":"https:\/\/blog.xamarin.com\/?p=38508"},"modified":"2019-03-25T13:12:08","modified_gmt":"2019-03-25T21:12:08","slug":"complex-ui-with-fastgrid-for-xamarin-forms","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/xamarin\/complex-ui-with-fastgrid-for-xamarin-forms\/","title":{"rendered":"Complex UI with FastGrid for Xamarin.Forms"},"content":{"rendered":"

\t\t\t\tThis guest post was contributed by Slava Chernikoff (Principal Engineer at\u00a0Binwell<\/a>,\u00a0 Microsoft MVP, Xamarin Certified Mobile Developer), Artem Tischenko (Xamarin developer at Binwell<\/a>) and Kirill Ashikhmin (Xamarin and Android developer at Binwell<\/a>).<\/em><\/p>\n

Introduction\u00a0<\/span><\/h2>\n

Binwell\u2019s team members have a long history of using Xamarin and were very excited to adopt Xamarin.Forms 1.0 for real projects. One day in 2015, we got a task to make a mobile marketplace application. An application that should have a complex user interface with many different components and a large product data set. <\/span><\/p>\n

This application should be able to display hundreds of products, banners and other controls on one page. There should be an almost infinite scrolling with many products, banners, special sections (favorite, discounted items, etc). That was the beginning of our story to adopting Android RecyclerView and iOS UICollectionView for Xamarin.Forms.<\/span><\/p>\n

A Complex UI with FastGrid<\/h2>\n

In this article, we will focus on one of our favorite projects: Instamart grocery delivery service for Russian customers. Here are screenshots of the current Instamart application based on Xamarin.Forms and Binwell FastGrid. <\/span><\/p>\n

\"Instamart<\/p>\n

Notes: We are very excited with Xamarin.Forms evolution and the\u00a0upcoming Xamarin.Forms 4.0. New CollectionView<\/a>. FastGrid was created for another set of tasks and distributed ‘as is’.<\/span><\/i><\/p>\n

This article will show how to use FastGrid for complex user interfaces with many cell view types. Binwell FastGrid can be adopted by teams with native experience and used as a customizable white box component. <\/span><\/p>\n

1. Searching for the solution<\/span><\/h3>\n

When we started our research on Xamarin.Forms controls for complex UI, our first thought was using Grid and Stack Layouts. Obviously, performance was very poor because these layouts were created for another task. The main drawback of layout components is that they don\u2019t reuse child views while creating all of the views when the layout is displayed. That is why it can be near impossible to deal with a large number of child views with Grid, StackLayout, etc.<\/span><\/p>\n

As a second step, we tried to use the default ListView component to display a number of cells in one row. It was much better than using Layouts (including a 3rd party RepeaterView), however, it still had performance drawbacks and issues with scrolling. Horizontal scroll implementation inside a row was a bit tricky, while vertical scrolling lagged on low-end Android devices. So we continued our research.<\/span><\/p>\n

We tried a number of commercial Xamarin.Forms components based on RecyclerView\/UICollectionView, though most of them were limited and didn\u2019t provide the necessary functionality.<\/span><\/p>\n

Then we found a great sample by Twin Technologies (TwinTechs): <\/span>Debunking the great Xamarin XAML myth: how to achieve native performance with Xamarin Forms ListView and Xaml cells<\/span><\/a><\/p>\n

TwinTechs FastGrid implementation was very promising. Although it didn\u2019t work on Android and had a lot of limitations out-of-box, it was a great starting point. We used this FastGrid control as a white box (just add files directly to project) and improved significantly over the last 3 years. Many thanks to TwinTechs for such a great idea and implementation!<\/span><\/p>\n

2. Meet the FastGrid<\/span><\/h3>\n

First, our goal was an implementation of a complex user interface for our client\u2019s application. We didn’t try to implement a universal CollectionView component for all possible cases and scenarios. Instead, we just tried to get a single result and it worked! Slava Chernikoff<\/a><\/span>\u00a0was focused on iOS implementation, and later Kirill Ashikhmin<\/a><\/span>\u00a0adopted it for Android. <\/span><\/p>\n

2.1 How it Works?<\/span><\/h3>\n

Let us remind you of the task at hand – getting a complex UI with many different view types, horizontal scrolling, and the fastest possible vertical scrolling. It also had to be data driven from a backend API (show and hide views depending on data models received from the backend).<\/span><\/p>\n

The first point was to achieve maximum scrolling performance. Leading us to skip dynamic cell sizing and use hard-coded width\/height for every ViewCell type. The second point was handling many cell types. Which is why we used DataTemplateSelector for all of these tasks.<\/span><\/p>\n

\"FastGridTemplateSelector\"<\/p>\n

The diagram above demonstrates using of DataTemplateSelector for making a complex UI based on data from backend API. <\/span><\/p>\n

2.2 Current Binwell FastGrid Features<\/span><\/h3>\n

Below is a brief feature list of the Binwell FastGrid:<\/span><\/p>\n