Chapter 5 User Interface Essentials

by default do use an amount of reflection in order to handle the value changes between source and target. Compiled bindings, as just discussed, help to reduce this so let’s learn how to turn them on.

Compiled bindings also provide design-time validation. If you set a binding to a property on your view model that doesn’t exist (imagine you made a typo, which I do a lot!), without compiled bindings the application would still build but your binding won’t do anything. With a compiled binding, the application will fail to build and the tooling will report that the property you mistyped doesn’t exist.

<ContentPage

xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:viewmodels="clr-namespace:WidgetBoard.ViewModels" x:Class="WidgetBoard.Pages.BoardDetailsPage" x:DataType="viewmodels:BoardDetailsPageViewModel">

Now that you have set up your BoardDetailsPage to allow user entry and even perform an action when the Save button is interacted with, you need to structure your application so that you can see this happen.

Shell

Shell in .NET MAUI enables you to define how your application will be laid out, not in terms of actual visuals but by defining things like whether you want your pages viewed in tabs or just a single page at a time. It also enables you to define a flyout, which is a side menu in your application. You can choose to have it always visible or toggle it to slide in/out, and this can also vary based on the type of device you are running on. Typically

a desktop has more visual real estate so you may wish to keep the flyout always open then.

148

Chapter 5 User Interface Essentials

For your application, you are going to make use of the flyout to allow you to define multiple boards that you can configure and load. I really like the idea of having one board for when I work and then swapping to something else when working on a side project or even for gaming.

To save having to return to this area and change bits, you are going to jump straight into the more in-depth option and feature-rich outcome. Don’t worry, though; as you discover each new concept, you will dive into some detail to cover what it is and why you are using along with then applying that concept to your application.

ShellContent

If you take a look at your AppShell.xaml file, you should see very little inside. Currently it has the following line:

<ShellContent

Title="Home"

ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />

This code sets the main content on the application to be an instance of the MainPage. In fact, you want to delete this line and replace it with

<ShellContent

ContentTemplate="{DataTemplate pages:BoardDetailsPage}" />

There isn’t too much difference here but you should explore what it means.

Your application’s main content will now be an instance of your recently created BoardDetailsPage. You don’t need the Title or Route options anymore as you will be controlling them in different ways.

The Title property will be set based on the page that is shown so you will learn about this a little later on.

149