Creating MVVM-Friendly Controls

Up to this point, we’ve navigated through a wide spectrum of topics in MVVM and .NET MAUI – from the fundamental design pattern to data binding, navigation, and even working with remote data. Now, let’s dig into another important topic – custom controls.

Sometimes, the built-in controls might fall short in catering to specific user interface requirements or unique design elements. As a consequence, you’ll need to create your own by combining individual UI elements into a single, more effective unit. Making these elements MVVM-friendly and reusable throughout your app is our goal.

In this chapter, we’ll focus on the following:

• Building a custom control with bindable properties
• Enabling interactions on custom controls
• Working with control templates

By the end of this chapter, you’ll know how to make custom controls that not only look good but are also easy to manage in an MVVM...

Technical requirements

We’ll continue to enhance the Recipes! app by diving into custom controls and control templates, all designed with an MVVM architecture in mind. To follow along with the code, make sure to visit the GitHub repository at https://github.com/PacktPublishing/MVVM-pattern-.NET-MAUI/tree/main/Chapter11. The Start folder has the initial code set up to begin this chapter, while the Finish folder contains the completed code for your reference.

Building a custom control with bindable properties

Building a feature-rich application often requires more than just the standard set of UI controls. When you have a combination of controls appearing together across multiple parts of your application – such as an input field with a list of validation errors or a button that’s always used with an activity indicator – it makes sense to package these into custom controls. These custom, reusable elements not only make the code base more maintainable but also align perfectly with MVVM architecture when made bindable.

The focus of this section is not only to create custom controls but also to make them “bindable,” seamlessly integrating them into our MVVM architecture. By crafting controls that are bindable, you enable straightforward communication with your ViewModel. This is key to ensuring that the UI is always up to date with an application’s data and logic.

So, how do we achieve this?

...

Enabling interactions on custom controls

In real-world applications, controls often serve dual roles – they both display data and allow users to interact with it. In this section, we’ll further enhance our FavoriteControl to not only support user interactions through IsFavoriteChangedCommand but also to facilitate two-way data binding. These features will make the control more interactive and further align it with MVVM concepts. We want to allow users to tap the Image on the FavoriteControl. When FavoriteControl’s IsEnabled property is set to true, the IsFavorite property will be updated and IsFavoriteChangedCommand will be executed.

Let’s take a look at the first part of this functionality – updating the IsFavorite property when a user taps on the image and making sure the value bound to this property gets updated as well.

User actions and reflecting state

To start with, let’s add the ability for users to toggle their favorite state...

Working with control templates

So far, we’ve been dealing with a hardcoded look and feel, but what if we want to offer more flexibility without forcing developers to rewrite or extend our control? By supporting control templates, we can expose the structure of our control’s visual tree, enabling both styling and structural changes while retaining its core functionality. This is an excellent way to ensure that our custom control seamlessly fits into a diverse array of user interfaces, providing an even greater degree of customization.

You might wonder how this is relevant to MVVM. Consider the following – a control template serves to separate the logic and behavior of a control from its visual representation, much like how MVVM achieves loose coupling between the ViewModel and the View. In this sense, the control effectively serves as a ViewModel for the control template. It exposes properties that the template binds to. The control template, in turn, can be...

Summary

In this chapter, we explored the powerful possibilities offered by custom controls and control templates in .NET MAUI, all within the context of the MVVM architecture. From understanding the basics of custom controls to creating bindable properties, we’ve delved into the intricacies of data binding on custom controls. We also explored how to add interactivity to our control and how commands can be exposed and dealt with. Furthermore, we dived deep into the flexibility and scalability offered by control templates. Collectively, these techniques enhance reusability and adhere to the principles of separation of concerns. Mastering the art of creating UIs – whether through XAML or code-behind – and understanding how to craft MVVM-friendly controls with bindable properties and commands contributes tremendously to being proficient in MVVM. Whether it’s a simple control with a hardcoded appearance or a complex, template-driven control, the key takeaway...

Further reading

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

• Create a custom control using handlers: https://learn.microsoft.com/dotnet/maui/user-interface/handlers/create
• Customize controls with handlers: https://learn.microsoft.com/dotnet/maui/user-interface/handlers/customize
• More about control templates: https://learn.microsoft.com/dotnet/maui/fundamentals/controltemplate
• Bind to a templated parent: https://learn.microsoft.com/dotnet/maui/fundamentals/data-binding/relative-bindings#bind-to-a-templated-parent