Working with Collections

Collections are a fundamental part of nearly every application, allowing us to manage and organize groups of related objects. In this chapter, we’ll explore the power of collections in the context of the MVVM design pattern, offering you the tools and knowledge to efficiently work with data in your .NET MAUI applications.

Up until now, our focus has primarily been on binding single values, such as titles, ratings, and commands. However, with the introduction of collections, we can take our applications to the next level. Collections empower us to represent groups of items, whether it be a collection of recipes, lists of ingredients, or arrays of user ratings. By harnessing the capabilities of collections, we can create dynamic, data-driven UIs that provide enhanced user experiences.

This chapter is structured into three key sections:

• Using BindableLayout
• The ICollectionChanged interface
• Working with CollectionView

By the...

Technical requirements

Throughout this chapter, we will be enhancing the functionality of the Recipes! app. The code base for this chapter and all the assets, including the additional classes and code required to cover the topics in this chapter effectively, can be found on GitHub at https://github.com/PacktPublishing/MVVM-pattern-.NET-MAUI/tree/main/Chapter06. The starting point for this chapter is provided in the Start folder, which includes the necessary classes and code that have been added specifically for this chapter. The code in the Start folder serves as the starting point to follow along with this chapter’s content, building upon the foundation we established in the previous chapters. The completed code, which includes all the code we have written throughout this chapter, can be found in the Finish folder for reference and comparison.

Using BindableLayout

The BindableLayout class is a static class that provides attached properties for binding collections to layout containers. An attached property is a concept that allows you to attach additional properties to existing elements or controls. These properties are not defined within the element itself but are provided by an external class. They enable you to extend the behavior and functionality of elements without modifying their underlying code. Grid.Row is probably one of the most commonly used attached properties in .NET MAUI. It can be applied to any UI element, allowing you to define the row position within a Grid layout. It is not a property of the UI element itself; instead, it is an attached property that enhances the flexibility and power of the Grid layout. As such, BindableLayout provides a set of attached properties that can be used to bind collections of data to layout containers, such as VerticalStackLayout or Grid. You can leverage its attached properties...

The ICollectionChanged interface

The ICollectionChanged interface provides a powerful mechanism for notifying the UI about changes in a collection itself, rather than on individual items within the collection. By implementing this interface, a collection can raise events that inform the binding engine and UI elements about structural changes, such as additions, removals, or modifications to the collection itself.

While it is possible to assign an updated list of items to a property on your ViewModel and trigger the PropertyChanged event, dynamically changing a collection requires a more optimal approach. By utilizing a collection that implements the INotifyCollectionChanged interface, we can achieve more efficient rendering of the UI. Instead of needing to re-render the entire collection on the UI, the binding engine can perform updates in a more optimized manner, resulting in improved performance and responsiveness.

The ICollectionChanged interface defines the CollectionChanged...

Working with CollectionView

CollectionView is an advanced control specifically designed for efficiently displaying large amounts of data. It offers all the properties available in BindableLayout, such as ItemsSource, ItemTemplate, ItemTemplateSelector, EmptyView, and EmptyViewTemplate. Additionally, CollectionView provides a wealth of powerful features, including item grouping, header and footer support, item selection and highlighting, item virtualization, and incremental loading of data as the user scrolls. These features enable you to create highly interactive and engaging user interfaces while efficiently managing and presenting your data. Item virtualization ensures that only the visible items are rendered, optimizing performance and memory usage, especially for large collections.

Other specialized controls

Aside from CollectionView, there are other specialized controls, such as CarouselView and ListView, for displaying collections in .NET MAUI. These controls also support...

Summary

In this chapter, we explored the powerful features and capabilities of collections in .NET MAUI. We learned how to effectively bind collections to UI elements using BindableLayout and CollectionView, enabling dynamic and efficient rendering of data. We covered topics such as data templating, item selection, grouping, and incremental loading. CollectionView proved to be a versatile control, offering advanced functionality such as item virtualization and seamless data loading.

As we continue our journey in building robust and scalable apps, in the next chapter, we will delve into the important concepts of dependency injection, services, and messaging. These fundamental aspects of app development will empower us to create modular and maintainable code, enhance code reusability, and enable effective communication between different parts of our application.

Further reading

To learn more about the topics that were covered in this chapter, take a look at the following resources:

• BindableLayout: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/bindablelayout
• CollectionView: https://learn.microsoft.com/dotnet/maui/user-interface/controls/collectionview
• ListView: https://learn.microsoft.com/dotnet/maui/user-interface/controls/listview
• CarouselView: https://learn.microsoft.com/dotnet/maui/user-interface/controls/carouselview
• SwipeView: https://learn.microsoft.com/dotnet/maui/user-interface/controls/swipeview
• RefreshView: https://learn.microsoft.com/dotnet/maui/user-interface/controls/refreshview