Chapter 6 Creating Our Own Layout

The main part you need to focus on here is the OnSelectTemplate method. I did discuss the purpose of this method briefly earlier on; let’s take a deeper look now. Its main purpose is to provide a DataTemplate and something that can be rendered on screen. This is a great way to keep the separation between view and view model.

In your implementation, you can see that

Registering the Template Selector with MauiAppBuilder

Inside your MauiProgram.cs file you need to register your

WidgetTemplateSelector with the MauiAppBuilder to make sure any dependencies can resolve it. Open that file and add the following line into the CreateMauiApp method:

builder.Services.AddSingleton<WidgetTemplateSelector>();

Updating FixedBoardPageViewModel

You need to add in the properties that you can bind to in your view.

private string boardName; private int numberOfColumns; private int numberOfRows;

public string BoardName

{

get => boardName;

194

Chapter 6 Creating Our Own Layout

set => SetProperty(ref boardName, value);

}

public int NumberOfColumns

{

get => numberOfColumns;

set => SetProperty(ref numberOfColumns, value);

}

public int NumberOfRows

{

get => numberOfRows;

set => SetProperty(ref numberOfRows, value);

}

public ObservableCollection<IWidgetViewModel> Widgets { get; }

public WidgetTemplateSelector WidgetTemplateSelector { get; }

Notice that the Widgets and WidgetTemplateSelector properties do not call the SetProperty method to notify the UI of changes. This is a perfectly valid scenario. You know that the value will be set in the constructor and therefore the value will be set before the binding is applied.

You also need to add in the remaining code to your ApplyQueryAttributes method that you added in the last chapter. It should now look like the following:

public void ApplyQueryAttributes(IDictionary<string, object> query)

{

var board = query["Board"] as Board;

BoardName = board.Name;

195

Chapter 6 Creating Our Own Layout

NumberOfColumns = ((FixedLayout)board.Layout). NumberOfColumns;

NumberOfRows = ((FixedLayout)board.Layout).NumberOfRows;

}

Finally, you need to add the WidgetTemplateSelector as a dependency in your constructor. It should now look like the following:

public FixedBoardPageViewModel( WidgetTemplateSelector widgetTemplateSelector

)

{

WidgetTemplateSelector = widgetTemplateSelector;

Widgets = new ObservableCollection<IWidgetViewModel>();

}

You are now ready to add the layout to your page.

Finally Using the Layout

Now that you have built your layout, you should go ahead and use it. You previously added the FixedBoardPage so you can go ahead and change it to the following:

<?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" xmlns:layouts="clr-namespace:WidgetBoard.Layouts" xmlns:viewmodels="clr-namespace:WidgetBoard.ViewModels" x:Class="WidgetBoard.Pages.FixedBoardPage" Title="FixedBoardPage" x:DataType="viewmodels:FixedBoardPageViewModel">

196