Chapter 5 User Interface Essentials

<VerticalStackLayout

IsVisible="{Binding IsChecked, Source={x:Reference FixedRadioButton}}">

Bindings can start to look complicated quickly and this is a good example, but if you break it down, it can become much easier to follow. You are binding the IsVisible property on your VerticalStack Layout to the IsChecked property from the Source, which is a

Reference to the RadioButton called FixedRadioButton.

Applying the Remaining Bindings

Let’s apply the remaining bindings to your page and view model so that all fields now update your view model.

In your BoardDetailsPageViewModel class, you need to add the backing fields and properties to bind to

private bool isFixed = true; private int numberOfColumns = 3; private int numberOfRows = 2;

public bool IsFixed

{

get => isFixed;

set => SetProperty(ref isFixed, value);

}

public int NumberOfColumns

{

get => numberOfColumns;

set => SetProperty(ref numberOfColumns, value);

}

140

Chapter 5 User Interface Essentials

public int NumberOfRows

{

get => numberOfRows;

set => SetProperty(ref numberOfRows, value);

}

Then in your BoardDetailsPage.xaml file you need to bind to those new properties with the bold sections below highlighting your additions.

Change the first RadioButton to be

<RadioButton

Content="Fixed"

x:Name="FixedRadioButton"

IsChecked="{Binding IsFixed}" />

Then change the Entry that follows after the RadioButton to be

<Entry

Text="{Binding NumberOfColumns}"

Keyboard="Numeric" />

And finally change the Entry that follows that to be

<Entry

Text="{Binding NumberOfRows}"

Keyboard="Numeric" />

MultiBinding

There can be occasions when you wish to bind multiple source properties to a single target property in a view. To take a minor detour, let’s rework your ClockWidgetViewModel to have two properties: one with the date and one with the time. You should end up with the following code (the bold highlights the new parts):

141

Chapter 5 User Interface Essentials

namespace WidgetBoard.ViewModels;

public class ClockWidgetViewModel : ViewModelBase

{

private readonly Scheduler scheduler = new(); private DateOnly date;

private TimeOnly time;

public ClockWidgetViewModel()

{

SetTime(DateTime.Now);

}

public DateOnly Date

{

get => date;

set => SetProperty(ref date, value);

}

public TimeOnly Time

{

get => time;

set => SetProperty(ref time, value);

}

private void SetTime(DateTime dateTime)

{

Date = DateOnly.FromDateTime(dateTime); Time = TimeOnly.FromDateTime(dateTime);

scheduler.ScheduleAction(

TimeSpan.FromSeconds(1), () =>

{

142

Chapter 5 User Interface Essentials

SetTime(DateTime.Now);

});

}

}

The change in the view model actually opens up a number of possibilities for you. You could

It is the latter you will be using here. Open your ClockWidgetView. xaml file and make the changes you see in bold.

<?xml version="1.0" encoding="utf-8" ?> <Label

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.Views.ClockWidgetView"

FontSize="80"

VerticalOptions="Center"

HorizontalOptions="Center">

<Label.BindingContext> <viewmodels:ClockWidgetViewModel />

</Label.BindingContext>

<Label.Text>

<MultiBinding StringFormat="{}{0} {1}"> <Binding Path="Date" />

<Binding Path="Time" />

143