Chapter 5 User Interface Essentials

</MultiBinding>

</Label.Text>

</Label>

To list what you have done here, you have

You should notice a slightly different syntax to the single binding approach. In fact, you can write a single binding in a similar way, such as

<Label.Text>

<Binding Path="Time" /> </Label.Text>

However, I am sure you can appreciate that the original Text="{Binding Time}" is a lot more concise and easier to read. Each of the properties that you covered under the “Binding” section apply to each of the Binding elements under MultiBinding.

You must supply either a StringFormat or a Converter in a MultiBinding or an exception will be thrown. The reason for this is to allow for the multiple values to be mapped down to the single value on the target.

Command

Very often you will need your applications to respond to user interaction. This can be by tapping or clicking on a button or selecting something in a list. This interaction is recorded in your view, but you usually require

144

Chapter 5 User Interface Essentials

that the logic to handle this interaction to be performed in the view model. This comes in the form of a Command and an optional associated CommandParameter set of properties. The Command property itself can be bound from the view to the view model and allows the view model to not only handle the interaction but also to determine whether the interaction can be performed in the first place. You already added a Button to your BoardDetailsPage.xaml file but you didn’t hook it, so let’s do exactly that!

You just need to modify your button to be (changes in bold)

<Button

Text="Save"

HorizontalOptions="End"

Command="{Binding SaveCommand}" />

Based on the binding content that you have explored, you can say that this Buttons Command property is now bound to a property on your view model called SaveCommand. You haven’t actually created this property yet. If you are thinking it would be great if the tooling could know this and report it to me, then the next section has got you covered. “Compiled Bindings” will show you how to inform the tooling of how to report it to

you. First, though, open your BoardDetailsPageViewModel.cs file and add your command implementation.

Your implementation comes in multiple parts.

\ 1.\ You define the property itself:

public Command SaveCommand { get; }

You typically define a command as a read-only property as you rarely want it to change. You will likely come across commands being defined with the use of the ICommand interface rather than the Command class. The reason you are using the latter is so that you can make use of a specific method (see part 3) to update some of your view.

145

Chapter 5 User Interface Essentials

\ 2.\ You define what action will be performed when the command is executed (basically when the Button is tapped/clicked in this scenario).

public BoardDetailsPageViewModel()

{

SaveCommand = new Command( () => Save(),

() => !string.IsNullOrWhiteSpace(BoardName));

}

private void Save()

{

var board = new Board

{

Name = BoardName, Layout = new FixedLayout

{

NumberOfColumns = NumberOfColumns, NumberOfRows = NumberOfRows

}

};

}

The Command class takes two parameters. The first is the action to perform when the command is executed and the second, which is optional, is

a way of defining whether the command can be executed. A good use case for this is if you wish to make sure that the user has entered all the required information. In your scenario, you will make sure that the user has entered a name for the board.

146

Chapter 5 User Interface Essentials

\ 3.\ You notify the view when the status of whether the command can be executed changes. To be clear, you don’t have to know that the status has changed; you can simply inform the view that it should requery the status. This is where the Command class and

its ChangeCanExecute method come in. For this, you need to tweak your BoardName property to the following:

public string BoardName

{

get => boardName; set

{

SetProperty(ref boardName, value); SaveCommand.ChangeCanExecute();

}

}

This change means that every time the BoardName property changes (and this will be done via the binding from the view), the Button that is bound to the SaveCommand will requery to check whether the command can be executed. If it can, the Button will be enabled and the user can interact with it; if not, it will be disabled.

Compiled Bindings

Compiled bindings are a great feature that you should in almost all cases turn on! They help to speed up your applications because they help the compiler know what the bindings will be set to and reduce the amount of reflection that is required. Reflection is notoriously bad for performance so wherever possible it is highly recommended to avoid using it. Bindings

147