.NET MAUI Collection View — Switch Between Different Item Representations

How many different ways can you present information using the CollectionView? More importantly, which presentation option should you choose for the best possible user experience? Here is our recommendation: Consider offering users multiple options and let them choose based on requirements/preferences.

As you might have guessed by now, the DevExpress .NET MAUI CollectionView allows you to switch between multiple data presentation modes: single/multiple columns or simple/detailed item template. In this blog post, we will review both options in detail.

Multi-Span Layout

In one of our minor releases (v23.2.4), we’ve extended our DXCollectionView with a new DXCollectionView.ItemSpanCount property so you can easily display CollectionView items across a multi-column list. This property allows you to set the number of columns (Orientation is Vertical) or rows (Orientation is Horizontal) the DXCollectionView must display on-screen.

<dxcv:DXCollectionView 
        x:Name="collectionView"
        ItemSpanCount="{Binding ColumnsCount}">
    <!--...-->
</dxcv:DXCollectionView>

The complete source code for our demo app is available on GitHub: Collection View - Filtering UI.

To design a more flexible user interface, you can calculate the number of collection view spans (columns or rows) based on device type (phone or tablet) and screen orientation (landscape or portrait). Obviously, a tablet screen in landscape mode can fit more data items - improving readability when compared to a mobile phone screen.

With this fact in mind, let’s add selection logic for the ItemSpanCount property value based on device parameters. To do so, we’ll use our multi-functional ON class and its ON.Idiom, ON.Orientation and ON.OrientationChanged methods. The following code snippet determines the number of Collection View columns to display.

public MainPage() {
    //...
    ON.OrientationChanged(this, OnOrientationChanged);
    OnOrientationChanged(this);
}
void OnOrientationChanged(ContentPage view) {
    UpdateColumnsCount();
}
void UpdateColumnsCount() {
    ViewModel.ColumnsCount = ON.Idiom<int>(ON.Orientation<int>(1, 2), ON.Orientation<int>(2, Height < 600 ? 2 : 4));
}

Simplified and Detailed Item Template

Additionally, we can vary visual representation of items when using single-column and multi-column modes. This approach can address a diverse set of user preferences and usage scenarios.

The amount of information displayed for a single item may also depend on user preferences. For example, users with impaired vision will typically prefer larger items in a single column. In this instance, you can display less detail, but improve overall readability.

You may also want to display more details when a user filters them against a criteria. For example, if you need to filter the list by the number of orders, you may want to switch to detailed mode to view numbers on-screen.

In our example, we select a simple item template in multi-column mode and a detailed item template in single mode. To deliver this capability, we implemented the ColumnsCountToTemplateConverter that conditionally selects a template to apply to the ItemTemplate property (based on the number of DXCollectionView layout columns).

<ContentPage.Resources>
    <utils:ColumnsCountToTemplateConverter x:Key="cardTemplateConverter" SmallCardTemplate="{StaticResource smallHouseCardTemplate}" CardTemplate="{StaticResource houseCardTemplate}"/>
</ContentPage.Resources>
    <!--...-->
    <dxcv:DXCollectionView 
        x:Name="collectionView" 
        ItemsSource="{Binding ItemsSource}" 
        ItemTemplate="{Binding ColumnsCount, Converter={StaticResource cardTemplateConverter}}" >
    </dxcv:DXCollectionView>

public class ColumnsCountToTemplateConverter : IValueConverter {
    public DataTemplate SmallCardTemplate { get; set; }
    public DataTemplate CardTemplate { get; set; }

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        return ON.Idiom<DataTemplate>((int)value > 1 ? SmallCardTemplate : CardTemplate, CardTemplate);
    }

    //...
}

Summary

By providing users with flexible item presentation options (and by using our flexible .NET MAUI CollectionView component), you can address a variety of business requirements/use cases.

To learn more about our .NET MAUI product line, refer to the following blog posts: 

• How to Profile .NET MAUI Applications and Isolate Performance-Related Issues
• .NET MAUI Bottom Sheet — 3 Ways to Optimize Mobile Screen Space
• .NET MAUI — Incorporate CRUD Operations in Your Mobile App with DevExpress CollectionView
• .NET MAUI Mobile — Collection Filtering Best Practices
• .NET MAUI — 3 ComboBox Dropdown Alternatives for User-Friendly Item Selection within a Mobile App