Data Binding in .NET MAUI

Unlock the power of dynamic UI development with .NET MAUI Data Binding.

Data binding is a fundamental concept in .NET MAUI that allows you to create a connection between your user interface elements and your data sources. This connection enables changes in your data to be automatically reflected in your UI, and vice versa, leading to more efficient and maintainable application development.

Key Concepts

Binding Modes

The binding mode controls how data flows between the source and the target:

OneWay

Data flows from the source property to the target property. When the source property changes, the target property is updated. The target property does not update the source property.

XAML Example: 
<Label Text="{Binding PersonName, Mode=OneWay}" />

TwoWay

Data flows in both directions. When the source property changes, the target property is updated, and when the target property changes (e.g., user input in an Entry), the source property is updated. This is the default for editable controls like Entry.

XAML Example: 
<Entry Text="{Binding PersonName, Mode=TwoWay}" />

OneTime

Data flows from the source property to the target property. The target property is updated only once when the binding is initially created. Changes to the source property after initialization are not reflected in the target.

XAML Example: 
<Label Text="{Binding InitialMessage, Mode=OneTime}" />

OneWayToSource

Data flows from the target property to the source property. When the target property changes, the source property is updated. This is less common and often used for custom scenarios.

XAML Example: 
<Slider Value="{Binding SliderValue, Mode=OneWayToSource}" />

Setting the Binding Context

The BindingContext property is crucial for establishing data binding. It's typically set on a parent element, and its children can then bind to properties of that context.

Setting BindingContext in XAML

XAML Example: 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                           xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                           xmlns:local="clr-namespace:YourApp.ViewModels"
                           x:Class="YourApp.Views.MyPage">

    <ContentPage.BindingContext>
        <local:MyViewModel />
    </ContentPage.BindingContext>

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

Setting BindingContext in C#

C# Example: 
public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();
        BindingContext = new MyViewModel();
    }
}

Binding to Properties

You can bind to properties of your data context or other objects within your view model.

Simple Property Binding

Bind a Label's text to a string property in your ViewModel:

ViewModel (C#): 
public class MyViewModel : INotifyPropertyChanged
{
    private string _message = "Hello from ViewModel!";
    public string Message
    {
        get => _message;
        set
        {
            _message = value;
            OnPropertyChanged();
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}
XAML: 
<Label Text="{Binding Message}" />

Command Binding

Commands are used to handle user interactions like button clicks, linking them to methods in your ViewModel.

ViewModel (C#): 
public class MyViewModel : INotifyPropertyChanged
{
    // ... (previous properties)

    public ICommand ButtonClickedCommand { get; }

    public MyViewModel()
    {
        ButtonClickedCommand = new Command(OnButtonClick);
    }

    private void OnButtonClick()
    {
        // Handle button click logic
        Message = "Button was clicked!";
    }

    // ... (INotifyPropertyChanged implementation)
}
XAML: 
<Button Text="Click Me" Command="{Binding ButtonClickedCommand}" />

More Advanced Scenarios

Explore the official .NET MAUI Data Binding documentation for more in-depth examples and advanced features.