Data Binding Basics

Analogy categoryAnalogies

What Is Data Binding?

Data binding in .NET MAUI links a property on a UI control to a property on a data source — typically a view model — so that changes in one can automatically flow to the other. Instead of writing imperative code like label.Text = person.Name after every change, you declare the relationship once in XAML with the {Binding} markup extension, and the runtime keeps the two sides synchronized through the BindingContext.

🏏

Cricket analogy: Think of a cricket scoreboard operator who no longer manually re-chalks the score after every run, like a Rohit Sharma boundary, because a sensor feeds the total straight to the digital board, the same way {Binding} pushes ViewModel changes to a Label automatically.

Binding Modes: OneWay, TwoWay, OneTime

BindingMode controls the direction data flows between source and target. OneWay pushes source changes to the UI only, TwoWay synchronizes both directions (essential for controls like Entry and Slider that accept user input), and OneTime reads the value once at load and ignores later changes, useful for static configuration data.

🏏

Cricket analogy: OneWay binding is like a stadium screen displaying the umpire's DRS decision on a Virat Kohli review — information flows one direction and the batter can't edit the screen back.

Setting the BindingContext

The BindingContext is the object that {Binding} expressions resolve properties against. Setting page.BindingContext = new PersonViewModel() makes every child control inherit that context unless overridden locally, so a CollectionView's ItemTemplate can rebind to each item while the page itself still points at the parent view model.

🏏

Cricket analogy: Setting a page's BindingContext is like naming the team's designated batting order for an innings — every player (control) below inherits that lineup context unless a substitute is specifically swapped in.

xml

<!-- PersonPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             x:Class="MyApp.PersonPage">
    <VerticalStackLayout Padding="20" Spacing="12">
        <Entry Text="{Binding Name, Mode=TwoWay}" Placeholder="Full name" />
        <Label Text="{Binding Greeting}" FontSize="18" />
        <Slider Value="{Binding Age, Mode=TwoWay}" Minimum="0" Maximum="120" />
        <Label Text="{Binding Age, StringFormat='Age: {0:F0}'}" />
    </VerticalStackLayout>
</ContentPage>

csharp

public partial class PersonPage : ContentPage
{
    public PersonPage()
    {
        InitializeComponent();
        BindingContext = new PersonViewModel { Name = "Asha Rao", Age = 29 };
    }
}

public class PersonViewModel : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get => _name;
        set { _name = value; OnPropertyChanged(nameof(Name)); OnPropertyChanged(nameof(Greeting)); }
    }

    public string Greeting => $"Hello, {Name}!";

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged(string propertyName) =>
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}

Add x:DataType="local:PersonViewModel" to the root element to enable compiled bindings. The XAML compiler resolves {Binding} paths at build time instead of via slow reflection at runtime, which meaningfully improves list-scrolling performance in CollectionView.

INotifyPropertyChanged and Live Updates

For OneWay or TwoWay bindings to update the UI after the initial load, the source object must implement INotifyPropertyChanged and raise the PropertyChanged event whenever a bound property's value changes. Without it, MAUI has no signal that the UI needs refreshing, so the control silently shows stale data even though the underlying property did change.

🏏

Cricket analogy: Raising PropertyChanged is like a scorer immediately signaling the electronic board after Jasprit Bumrah takes a wicket — skip the signal and the board keeps showing the old score.

A common bug: setting a backing field directly (_name = value;) without calling OnPropertyChanged. The property value does change in memory, but any bound Label or Entry will keep showing the old text because MAUI was never told to re-query the binding.

{Binding} connects a control's property to a property on the BindingContext without imperative code-behind.
BindingMode.OneWay pushes source-to-target only; TwoWay synchronizes both directions; OneTime reads once at load.
BindingContext set on a page is inherited by all child controls unless a control sets its own.
INotifyPropertyChanged and the PropertyChanged event are required for OneWay/TwoWay bindings to reflect later changes.
Forgetting to raise PropertyChanged is the most common cause of a UI that silently shows stale data.
x:DataType enables compiled bindings, improving performance and catching binding-path typos at build time.
StringFormat can be applied inline in a Binding expression to format displayed values without a converter.