Chapter 5 User Interface Essentials
both. This process is typically an event-driven one as either side of this synchronization needs to be notified when the other side changes. .NET MAUI wraps this process up for you through a concept called data binding. Data binding provides the ability to link the properties from two objects so that changes in one property are automatically updated in the second.
Binding
The most common type of bindings that you create are between a single value at source and a single value at the target. The target is the owner of the bindable property. I use the terms target and source because you do not have to solely bind between a view and a view model. There are scenarios where you may wish to bind one control to another.
Before you jump in to creating your first binding, you need to first create something to bind to. Open your BoardDetailsPageViewModel class, which is the view model for your view, and add the following:
private string boardName;
public string BoardName
{
get => boardName;
set => SetProperty(ref boardName, value);
}
It is worth noting that a Binding must be created against a property (e.g., the BoardName definition from the code above). Binding to a field (e.g., boardName) will not work.
BindingContext
And finally the crucial step is to set the BindingContext of your page to this view model. In Chapter 4, you did this by setting it in the XAML directly,
136
Chapter 5 User Interface Essentials
but because you have registered your view model with the DI layer, you can make the most of that and have it create the view model and whatever dependencies it has for you. Open your BoardDetailsPage. xaml.cs file and change the constructor to
public BoardDetailsPage(BoardDetailsPageViewModel boardDetailsPageViewModel)
{
InitializeComponent();
BindingContext = boardDetailsPageViewModel;
}
The above code allows you to rely on the constructor injection functionality that .NET MAUI and Shell provides.
The act of setting the BindingContext property means that any bindings created in the page/view and any child views will be by default against this BindingContext.
Now if you jump into the BoardDetailsPage.xaml file, you can apply the binding to your new BoardName property in your view model. You want to modify the first Entry that you added to look like
<Entry
Text="{Binding BoardName}" />
This is a relatively small change and will look like the bindings you created back in Chapter 4 when exploring the MVVM pattern. There isn’t much detail to this but there is a fair amount of implicit behavior that I feel I must highlight. Let’s cover what it tells you first and then what it doesn’t. You are creating a binding between the BoardName property (which exists on your BoardDetailsPageViewModel) and the Text property on the
Entry control.
Now on to what this code doesn’t tell you.
137
Chapter 5 User Interface Essentials
Path
The binding could also be written as
Text="{Binding Path=BoardName}"
The Path element of the binding is implied if you do not explicitly provide it but only as the first part of the binding definition. Why am I telling you this? There are times when you will need to supply the
Path= part.
Mode
I mentioned that bindings keep two properties in sync with each other. When you create a binding, you can define which direction the updates flow. In your example, you have not provided one, which then relies on the default Mode for the bindable property that you are binding to. In this case, it is the Text property of the Entry, which has a default binding mode of TwoWay. I strongly urge you to make sure you are aware of both these defaults and your expectation when creating a binding. Choosing the correct Mode can also boost performance. For example, the OneTime binding mode means that no updates need to be monitored for. In your scenario, you don’t currently need to allow the view model to update the Entry Text property; however, as you progress, this page will also allow for the editing of a board so you will leave it alone. If you didn’t need
to edit, you could in theory modify your binding to be Text="{Binding Path=BoardName, Mode=OneWay}".
There are several variations for binding modes:
•\ Default: As the name suggests, it uses the default, which is defined in the target property.
•\ TwoWay: It allows for updates to flow both ways between source and target. A typical example is binding to the Text property of an Entry where you
138
Chapter 5 User Interface Essentials
want to both receive input from the user and update the UI, such as your scenario that you just added with the Entry and its Text property as Text="{Binding Path=BoardName}".
•\ OneWay: It allows for updates to flow from the source to the target. An example of this is your ClockWidget where you only want updates to flow from your source to your target.
•\ OneWayToSource: It allows for updates to flow from the target to the source. An example of this is binding the SelectedItem property on the ListView to a value in your view model.
•\ OneTime: It only updates the target once when the binding context changes.
Source
As mentioned, a binding does not have to be created against something defined in your code (e.g., a property on a view model). It can, in fact, be created against another control. If you look back at the XAML you created for this page, you will notice that you gave one of the RadioButtons a name of FixedRadioButton. This was actually setting you up for this moment: you can now bind your innermost VerticalStackLayouts visibility to the value of this RadioButton.
If you just wanted to allow the user to optionally turn a setting on in your UI, you could use a Switch control instead. I opted for the
RadioButton as this will play very well with your extra assignment at the end of this chapter.
139