Chapter 5 User Interface Essentials

Selected Board

You bind the SelectedItem property from the CollectionView to your CurrentBoard property. When your property changes, you can navigate to the board that was selected.

private Board currentBoard;

public Board CurrentBoard

{

get => currentBoard; set

{

if (SetProperty(ref currentBoard, value))

{

BoardSelected(value);

}

}

}

You may recall that I discussed in Chapter 4 the potential value of SetProperty returning a Boolean value. You have finally found a use for it! You only want to handle a board selection change if the CurrentBoard property really has changed.

Navigation to the Selected Board

Following on from the “Navigation” section earlier, you will navigate to the route “fixedboard” which your FixedBoardPage is configured to. You will also pass in the selected board so that it can be presented on screen.

private async void BoardSelected(Board board)

{

await Shell.Current.GoToAsync(

158

Chapter 5 User Interface Essentials

"fixedboard",

new Dictionary<string, object>

{

{ "Board", board}

});

}

Before your bindings will work you, need to make some further changes.

Setting the BindingContext of Your AppShell

Let’s change the constructor of your AppShell.xaml.cs file to set the

BindingContext.

public AppShell(AppShellViewModel appShellViewModel)

{

InitializeComponent();

BindingContext = appShellViewModel;

}

You should recall that you added the AppShellViewModel as a transient in the MauiProgram.cs file, meaning that you will be provided with a new instance when your AppShell class is created for you.

Register AppShell with the MAUI App Builder

Let’s register AppShell in your MauiProgram.cs file.

builder.Services.AddTransient<AppShell>();

Resolve the AppShell Instead of Creating It

Change the constructor in your App.xaml.cs file to be as follows:

159