Data Binding in .NET MAUI

Data binding connects UI elements to data sources, allowing you to separate UI from business logic. This tutorial walks through the fundamentals of binding in .NET MAUI, from simple one‑way bindings to advanced scenarios using converters and BindingMode.TwoWay.

1️⃣ What Is Data Binding?

In MAUI, a binding links a BindableObject property (such as Label.Text) to a property on a data source (usually a view model). When either side changes, the UI updates automatically.

2️⃣ One‑Way Binding

The simplest form – the UI reflects changes made in the view model.

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

3️⃣ Two‑Way Binding

Useful for input controls where changes flow both ways.

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

4️⃣ BindingContext

Set the BindingContext of a page or view to the view model instance.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainViewModel();
    }
}

5️⃣ Value Converters

Transform data between source and target.

public class BoolToColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        return (bool)value ? Colors.Green : Colors.Red;
    }

    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture) => throw new NotImplementedException();
}

<Label Text="Status"
       TextColor="{Binding IsActive,
                 Converter={StaticResource BoolToColorConverter}}" />

6️⃣ Common Pitfalls

• Forgot to implement INotifyPropertyChanged in the view model.
• Incorrect BindingMode for editable controls.
• Missing BindingContext on a child view.

💡 Try It Live

Click the button below to see a live example of two‑way binding with a simple counter.