New FlexGrid Features in ComponentOne Studio for Xamarin 2017 v2

The new FlexGrid control in ComponentOne Studio for Xamarin has many new features for users coming from Xuni. The control not only boasts a notably cleaner architecture with performance improvements, but it also allows a much richer experience through a number of features additions that were missing in our previous platform. In this article we'll take a look at some of the highlights of the new version of FlexGrid.

Cell recycling/performance boost

The new architecture provides a very noticeable performance boost for users coming from Xuni. By optimizing our code around the capabilities of Xamarin, we’re able to provide much better performing data grid. With large data sets especially, users will notice some huge differences between the two. We tested the time to load data in Xamarin.Forms (which means set the ItemsSource in this context) for different size data sets using the average of three runs.

//sw is our stopwatch  
sw.Restart();             
grid.ItemsSource = cl;  
System.Diagnostics.Debug.WriteLine("Load time: " + sw.Elapsed);  

iOS tests done on iPod Touch 6th Generation running 10.3.3 Android tests done on Google Pixel XL running Android 7.1 (API 25) You'll notice the tests did not complete on Android for Xuni. The Xuni FlexGrid would generally hang indefinitely as it tried to handle data sets larger than 10,000 rows. ComponentOne Studio for Xamarin's FlexGrid provides relatively predictable results here regardless of the size of the data set and is noticeably faster than the Xuni FlexGrid in all but one result where they are roughly equivalent with 10k rows on Android. The next Load and Render test measures the time after the ItemsSource is set to the actual appearance of the control on the screen (corresponding with the OnAppearing event in Xamarin.Forms).

sw.Restart();  
this.Appearing += (sender, e) =>  
     System.Diagnostics.Debug.WriteLine("Load & render time: " + sw.Elapsed);  

This event roughly captures the perceived time it takes for the control to appear onto a users screen. The size of the FlexGrid was also fixed to 600 by 400 to present a consistent viewport size. Once again this is the average of three runs tested via Xamarin.Forms: iOS tests done on iPod Touch 6th Generation running 10.3.3 Android tests done on Google Pixel XL running Android 7.1 (API 25) The results of this test speak for themselves. The improved virtualization and architectural changes in ComponentOne Studio for Xamarin blow away any results that are achievable through Xuni. The time to load a grid to the screen is relatively constant in our new architecture, where as the old Xuni architecture might not be able to load the same grid in a timely fashion if at all. Download Performance Samples

UWP Support

This one is perhaps a bit obvious (and applies to all our our controls), but the new architecture also provides support for UWP. Using Xamarin.Forms you're now able to deploy to Windows 10 desktop or mobile, along with iOS and Android.

Pull to refresh

Xamarin.Android and Xamarin.iOS allow you to swipe downwards near the top of your grid to refresh data. A brief visual should appear that indicates the grid is refreshing its data. In Xamarin.iOS and Xamarin.Android you can gain access to this feature by connecting your data to a C1CollectionView that inherits from C1CursorCollectionView. This feature will in the future be exposed via API for our Xamarin.Forms users as well.

Incremental loading improvements

Incremental loading is now built-in, this means the grid detects when the CollectionView supports it, and it will add a special row to the bottom. Much like the pull to refresh feature a brief visual indication should display to indicate the grid is loading more data.

New brushes for FlexGrid

Lots of new brushes have been added for styling the grid. It’s now much easier to stylize elements such as headers or a given column’s background or text color. The “custom appearance” sample demonstrates this. The CustomAppearance sample which is available on GitHub shows off how you can use this feature.

Multi-level grouping

In the old architecture only one level of grouping was permitted. In the new architecture there is no longer this restriction so you can have nested groups.

Improved layout options

In addition to star (*) sizing we now also support Column.Width= Auto. Setting the width to Auto will size the column to fit the content it contains. This can be used not only in Xaml:

but also through C#:

grid.Columns[0].Width = GridLength.Auto;  

Marquee (Excel like selection)

Selection has been changed from the previous version where to be more Excel-like. This means that selection and the current cell you’ve navigated to for the purpose of editing are now decoupled in the same manner as they are in Excel. This means that you can have row based selection while editing a single cell via the marquee within that row. The marque (or cursor) can be customized by changing the CursorBackgroundColor or CursorTextColor.

Zooming

The new FlexGrid supports pinch to zoom gestures for interacting with your data. This can be enabled or disabled through the zoom mode property.

Column header outlines

If there are multiple groups in the FlexGrid shows numbers in the column header of the first column to expand collapse all the groups). The Grouping sample on GitHub illustrates this further.

Animations (coming soon)

The FlexGrid has picked up some new animations for certain actions like expanding and collapsing a row detail section or group on iOS. This will see further enhancement for v3 as we look to expand the functionality towards Android.

Wrap up

The new FlexGrid is a large step forward for us over what was provided in Xuni. It offers a significant performance advantage, and provides many new features for enhancing your apps.