Skip to end of metadata
Go to start of metadata

This page discusses how you can display and customize the appearance displayed grouped list of items. It is assumed that you have successfully displayed list of data in your list view, if you haven't done so, check out the Displaying Simple List page.

Since displaying simple list in plain view is not quite attractive and usable for great mobile experiences, it is most likely that you will want to display your items in the form of groups. At a glance, you will be preparing the shared core PCL project to support grouped items, as well customizing each platform's appearance for the grouped items.

As each platform uses different technologies for the view level, it is recommended that you go through this guide to get a better understanding on how to customize the view for each platform. By the end of this article, not only you'll be able to customize the group style, you'll be able to get a sense of how the view works on each platform on customize them to your needs.

Preparing the ViewModel to Support Grouped Items

To display a list of items, you would normally provide the items to the SourceItems property of the ListViewModelBase(T) Class. In order to display the grouped items properly, create a model that inherits the GroupItem(T) Class to provide the grouping information.

Then provide the group items information to the GroupItems property of the  ListViewModelBase(T) Class , then call the RefreshGroupItems  method in the constructor of the view model as well as right after the items has changed in the OnSourceItemsChanged method.

When the data control in each target platform detects a valid data source from the  GroupItems property, the control will be automatically display the grouped data instead of the plain one.

To learn more how to implement the platform-specific view for data presentation, see Platform-specific Guides – Data Presentation Overview.

Customizing Group Style on iOS

In iOS, you can present the list in two forms: grouped list and sectioned list. This section will discuss how to achieve both of the scenarios using Crosslight.

Using Grouped List

To display a grouped list in iOS, simply override the ShowGroupHeader method in the UITableViewController(TViewModel) Class and return true.

Using Sectioned List

To display a sectioned list in iOS, follow the steps described above and also override the TableViewStyle property in the UITableViewController(TViewModel) Class.

The sectioned list is displayed as follows.

Showing Group Section Index on iOS

If your data contains fairly large number of groups, you may want to show the group index to allow users to easily jump to a specific group. 

You can easily enable this feature through a property setting – and let Crosslight do the rest by automating the index presentation and group locating process. By default, Crosslight shows all alphabets and adds the # to the last index which conforms to the Apple standards.

The C# represents the groups whose name started with number or non-alphabet.

The following illustration shows the results of the example above.

Customizing Group Style on Android

Similar to iOS, on Android, you can present the list in two forms: grouped list and sectioned list. This section will discuss how to achieve both of the scenarios using Crosslight.

Using Grouped List

To display a grouped list, override the GroupItemLayoutId property in a ListActivity(TViewModel) Class or ListFragment(TViewModel) Class and provide the XML layout to use.

The result is as follows:

Using Sectioned List

To present the list in the form of sections, you can define your own XML layout for the group style and supply it via overriding the GroupLayoutItemId property. You can use a combination of GroupItemLayoutId as well as  ContentLayoutId.

Showing Group Section Index on Android

The ListActivity(TViewModel) Class shipped in Crosslight for Android allows for indexing a large number of groups. You can easily activate this feature by overriding the FastScrollEnabled property to true. To always show the fast scroll indicator on the right side, you can use override the FastScrollAlwaysVisible property and set it to true.

The following illustration shows the result.

Customizing Group Style on Windows Phone

Customizing group style on Windows Phone and Windows Store applications typically requires only customization from the XAML page.

Using Grouped List

To present the list of items in a grouped style, create a new style and specify a LongListSelector.GroupHeaderTemplate.

This illustration is the result of code above,

Showing Group Section Index on Windows Phone

If your data contains fairly large number of groups, you may want to show the group index to allow users to easily jump to a specific group.

You can easily enable this feature through a Windows Phone – and let Crosslight do the rest of process. By default, it will show all section names in rectangle shape it can be in tile mode or list mode.

Customizing Group Style on Windows Store

Similar to Windows Phone, customizing group style on Windows Store apps mainly requires customization from the XAML page.

Using Sectioned List

To use the sectioned group style, customize the ListView.GroupStyle as follows.

The code behind

The results of the above simple declaration can be seen in the above image.

Showing Group Section Index on Windows Store

If your data contains fairly large number of groups, you may want to show the group index to allow users to easily jump to a specific group. 

You can easily enable this feature through Windows Store – and let Crosslight do the rest of process. It will using semantic zoom, you can use Ctrl key, hold and scroll mouse By default, it will shows all section name in rectangle shape it can be in tile mode or list mode, when you choose something in semantic mode, then you will be reverted to previous list but with the items that you choose became group item that is shown.

Code behind:

The results of the above semantic zoom can be seen in the following image.