Microsoft Docs

MAUI Data Binding

Data binding is a fundamental concept in .NET MAUI that allows you to create a connection between the user interface (UI) elements and your application's data. This connection simplifies the process of updating the UI when the data changes and vice versa, leading to more maintainable and robust applications.

What is Data Binding?

Data binding establishes a link between properties of two objects. Typically, one object is a UI element (like a Label, Entry, or ListView) and the other object is a data source (often a ViewModel or a model object).

When data binding is configured:

• Changes in the data source are automatically reflected in the UI.
• Changes in the UI (for bindable properties) can be automatically reflected back in the data source.

Key Concepts

• Bindable Properties: .NET MAUI controls expose properties that can be data bound. These are known as Bindable Properties.
• Data Context: The BindingContext property of a UI element specifies the object from which to retrieve binding information.
• Binding Expressions: These are the expressions used in XAML or C# to define the connection between the source and the target property.

Types of Data Binding

Data binding can be configured in several ways:

• One-Way Binding: Updates the target property when the source property changes.
• Two-Way Binding: Updates the target property when the source property changes, and also updates the source property when the target property changes.
• One-Time Binding: Updates the target property only once when the binding is initialized.
• One-WayToSource Binding: Updates the source property when the target property changes.

XAML Data Binding

The most common way to implement data binding is through XAML. The {Binding} markup extension is used to define bindings.

One-Way Binding Example

Binding the Text property of a Label to a property named Greeting in the BindingContext:

<Label Text="{Binding Greeting}" />

Two-Way Binding Example

Binding the Text property of an Entry to a property named UserName in the BindingContext, allowing for bidirectional updates:

<Entry Text="{Binding UserName, Mode=TwoWay}" />

Binding to Properties of Properties

You can bind to properties of properties by using a dot notation:

<Label Text="{Binding CurrentUser.FullName}" />

Binding to Collections

Data binding is crucial for displaying collections of data in controls like ListView, CollectionView, or ItemsView. You would typically bind the ItemsSource property to an observable collection.

<ListView ItemsSource="{Binding Items}" />

Binding to a Specific Source

If the BindingContext is not the desired source, you can specify the source using the Source property within the binding expression:

<Label Text="{Binding Path=SomeValue, Source={x:Reference MyOtherViewModel}}" />

Convers of Data Types

Data binding can automatically convert data types between the source and target. For more complex conversions, you can use the StringFormat property or custom value converters.

Using StringFormat

<Label Text="{Binding OrderDate, StringFormat='Order Placed: {0:d}'}" />

Code-Behind Data Binding

While XAML is preferred for its readability, data binding can also be set programmatically in C#.

Setting the BindingContext

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
        // Assuming MyViewModel has a public property accessible
        BindingContext = new MyViewModel();
    }
}

Creating Bindings Programmatically

var label = new Label();
var binding = new Binding("Greeting"); // Binds to the Greeting property of BindingContext
label.SetBinding(Label.TextProperty, binding);
Content = label;