Chapter 5 User Interface Essentials

You aren’t going to do anything with this data just yet but it is ready for when you start to build your board layout view in the next chapter. For now, you will continue on with the theme of Shell and define your flyout menu.

You will also need to make your FixedBoardPageViewModel implement the IQueryAttributable interface. Change the class definition from

public class FixedBoardPageViewModel : BaseViewModel

to the following (changes in bold):

public class FixedBoardPageViewModel : BaseViewModel,

IQueryAttributable

Flyout

A flyout is a menu for a Shell application that is accessible through an icon or by swiping from the side of the screen. The flyout can consist of an optional header, flyout items, optional menu items, and an optional footer.

For your application, you are going to provide a basic header and then the main content will be a dynamic list of all the boards your user creates. This means that you are going to have to override the main content but thankfully Shell makes this an easy task.

The first thing I like to do when working on a new XAML file is to turn on compiled bindings, which I covered earlier. If you recall, this is by specifying the x:DataType attribute to tell the compiler the type that your view will be binding to. Let’s do that now (in bold):

<?xml version="1.0" encoding="UTF-8" ?> <Shell

x:Class="WidgetBoard.AppShell"

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

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:DataType="viewmodels:AppShellViewModel">

154

Chapter 5 User Interface Essentials

This helps you as you build the view to see what doesn’t exist in your view model. Of course, if you prefer to build the view model first then this also helps.

Finally, you need to add xmlns:viewmodels="clrnamespace:WidgetBoard.ViewModels" to the top of the file.

FlyoutHeader

The FlyoutHeader can be given any control or layout and therefore you can build a really good looking header option. For your application, you are just going to add a title Label.

Below your ShellContent element you want to add the following:

<Shell.FlyoutHeader>

<Label

Text="My boards" FontSize="20"

HorizontalTextAlignment="Center" /> </Shell.FlyoutHeader>

Hopefully the above is self-explanatory but to cover the parts I haven’t already covered, you have the ability to specify different layout information in a Label so you can make the text centered. It is usually recommended that you use the HorizontrolOptions property over the HorizontalTextAlignment property; however, if you try that here, you will see that it doesn’t center the Label.

Now let’s add in the main part of your menu.

FlyoutContent

First, if you want to use a static set of items in your menu, you can simply add FlyoutItems to the content. This can work well when you have a fixed set of pages such as Settings, Home, and so on. You will be showing the

155

Chapter 5 User Interface Essentials

boards that the user creates, so you will need something dynamic. For this you need to supply the FlyoutContent. More importantly, it’s your first introduction to the CollectionView control.

The CollectionView allows you to define how an item will look and then have it repeated for each item in a collection that is bound to it. Additionally, the CollectionView provides the ability to allow the user to select items in the collection and you can define behavior that will be performed when that selection happens. Let’s add the following to your Shell:

<Shell.FlyoutContent>

<CollectionView ItemsSource="{Binding Boards}" SelectionMode="Single"

SelectedItem="{Binding CurrentBoard}">

<CollectionView.ItemTemplate>

<DataTemplate x:DataType="models:Board"> <Label

Text="{Binding Name}" FontSize="20" Padding="10,0,0,0" />

</DataTemplate>

</CollectionView.ItemTemplate>

</CollectionView>

</Shell.FlyoutContent>

You also need to add xmlns:models="clr-namespace:WidgetBoard. Models" to the top of the file.

Your FlyoutContent will display a Label set to the Name of each Board instance in the collection of Boards in your view model. Additionally, the CurrentBoard property on your view model will be updated when the user selects one of the Labels in this collection.

156

Chapter 5 User Interface Essentials

If you have added all of the parts I have discussed, you will likely notice that the tooling is reporting that you haven’t added any of the properties that you are binding to over in your view model. Let’s jump over to your AppShellViewModel.cs file and add the following

Collection ofBoards

public ObservableCollection<Board> Boards { get; } = new ObservableCollection<Board>();

The ObservableCollection is a special type of collection that implements INotifyCollectionChanged. This means that anything bound to it will monitor changes to the collection and update its contents on screen.

Additionally, for now you will add a fixed entry into this Boards collection to make it possible to interact with. Later you will be saving to and loading from a database.

public AppShellViewModel()

{

Boards.Add( new Board

{

Name = "My first board", Layout = new FixedLayout

{

NumberOfColumns = 3, NumberOfRows = 2

}

});

}

157