.Net Maui Collectionview Vs Listview Complete Guide

Overview: CollectionView vs. ListView in .NET MAUI

Commonalities

• CollectionView and ListView are both controls in .NET MAUI used to display lists of data.
• They allow for customizing the appearance and behavior of items in the list.

Differences

• Flexibility: CollectionView is more flexible, offering various layout options and advanced features like incremental loading and data virtualization.
• Performance: CollectionView is generally more performant, especially for large datasets.
• Customization: CollectionView provides extensive customization options with features like DataTemplateSelectors and ItemTemplate.
• Layout Types: CollectionView supports different layout options (Grid, List, etc.), whereas ListView is primarily a single column list.
• Features: CollectionView includes built-in support for pull-to-refresh, infinite scroll, and grouping, whereas ListView has limited features in comparison.

Example: Creating a Simple List with Both Controls

Setting Up the Project

1. Create a new .NET MAUI project in Visual Studio:

   • Open Visual Studio.
   • Choose "Create a new project".
   • Select "MAUI App" and click "Next".
   • Configure the project (Name, Location, etc.) and click "Create".
   • Choose "Blank App" and click "Create".

2. Open MainPage.xaml for design and MainPage.xaml.cs for code-behind.

Step 1: Preparing the Data

First, let's create a simple list of items that we'll display in both controls. For simplicity, we'll create a list of strings.

MainPage.xaml.cs:

using System.Collections.Generic;
using Microsoft.Maui.Controls;

namespace CollectionViewVsListView
{
    public partial class MainPage : ContentPage
    {
        public List<string> Items { get; set; }

        public MainPage()
        {
            InitializeComponent();

            Items = new List<string>
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5"
            };

            this.BindingContext = this;
        }
    }
}

Step 2: Using ListView

Now, let's bind data to a ListView control.

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewVsListView.MainPage">

    <StackLayout Padding="20">
        <Label Text="ListView Example" FontSize="24" HorizontalOptions="Center"/>
        <ListView ItemsSource="{Binding Items}" Margin="0,10,0,0">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding}" />
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Step 3: Using CollectionView

Similarly, let's bind the same data to a CollectionView control.

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewVsListView.MainPage">

    <StackLayout Padding="20">
        <Label Text="ListView Example" FontSize="24" HorizontalOptions="Center"/>
        <ListView ItemsSource="{Binding Items}" Margin="0,10,0,0">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Label Text="{Binding}" />
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Label Text="CollectionView Example" FontSize="24" HorizontalOptions="Center" Margin="0,20,0,0"/>
        <CollectionView ItemsSource="{Binding Items}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Label Text="{Binding}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Explanation

• ListView:

  • ItemsSource: binds the list of items.
  • ItemTemplate: defines the visual template for each item in the list.
  • ViewCell: wraps the content of each list item.

• CollectionView:

  • ItemsSource: binds the same list of items.
  • ItemTemplate: also defines the visual template for each item, but it doesn't require a ViewCell wrapper.

Step 4: Customizing the UI

Let's add some styling to make the items more visually appealing.

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CollectionViewVsListView.MainPage">

    <StackLayout Padding="20">
        <Label Text="ListView Example" FontSize="24" HorizontalOptions="Center"/>
        <ListView ItemsSource="{Binding Items}" Margin="0,10,0,0">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Frame CornerRadius="10" Padding="10" Margin="0,0,0,5" BackgroundColor="LightBlue">
                            <Label Text="{Binding}" FontSize="18" HorizontalOptions="Center"/>
                        </Frame>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

        <Label Text="CollectionView Example" FontSize="24" HorizontalOptions="Center" Margin="0,20,0,0"/>
        <CollectionView ItemsSource="{Binding Items}">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <Frame CornerRadius="10" Padding="10" Margin="0,0,0,5" BackgroundColor="LightGreen">
                        <Label Text="{Binding}" FontSize="18" HorizontalOptions="Center"/>
                    </Label>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </StackLayout>
</ContentPage>

Step 5: Adding Advanced Features

For demonstration, let's add pull-to-refresh to CollectionView.

MainPage.xaml:

<CollectionView ItemsSource="{Binding Items}" IsPullToRefreshEnabled="True" RefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Frame CornerRadius="10" Padding="10" Margin="0,0,0,5" BackgroundColor="LightGreen">
                <Label Text="{Binding}" FontSize="18" HorizontalOptions="Center"/>
            </Frame>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

MainPage.xaml.cs:

using System.Collections.Generic;
using System.Windows.Input;
using Microsoft.Maui.Controls;

namespace CollectionViewVsListView
{
    public partial class MainPage : ContentPage
    {
        public List<string> Items { get; set; }
        public ICommand RefreshCommand { get; }
        public bool IsRefreshing { get; set; }

        public MainPage()
        {
            InitializeComponent();

            Items = new List<string>
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5"
            };

            RefreshCommand = new Command(async () =>
            {
                IsRefreshing = true;
                // Simulate a network request
                await Task.Delay(2000);
                // Refresh the list
                Items = new List<string>
                {
                    "Refreshed Item 1",
                    "Refreshed Item 2",
                    "Refreshed Item 3",
                    "Refreshed Item 4",
                    "Refreshed Item 5"
                };
                OnPropertyChanged(nameof(Items));
                IsRefreshing = false;
            }, () => !IsRefreshing);

            this.BindingContext = this;
        }
    }
}

Conclusion

While ListView is adequate for simple, single-column lists, CollectionView offers superior flexibility, performance, and features. As applications grow more complex, transitioning to CollectionView provides a better foundation for building robust, user-friendly interfaces.

Feel free to explore the additional capabilities of CollectionView such as different layout types, data virtualization, and more!