Data Binding in .NET MAUI

Data Binding in .NET MAUI

In .NET MAUI, data binding connects two objects—the source (usually a ViewModel) and the target (a UI control property)—to keep them synchronized. The direction and frequency of this synchronization are controlled by the BindingMode.

🔗 What is Data Binding in MAUI?

Data binding connects your UI elements (views) to your data (models/viewmodels) so that changes in one can reflect in the other without manual updates. It’s a core part of the MVVM (Model-View-ViewModel) pattern that MAUI encourages.

📌 One-Way Binding

Definition: Data flows from source → target only.

Use Case: When you want to display data but don’t need the user to modify it.

In One-Way binding, data flows in only one direction: from the source to the target. When the property in your code (source) changes, the UI (target) updates automatically. However, changes made in the UI do not update the source property.

Best For: Displaying read-only data, such as labels, headers, or status messages.

Example: A Label displaying a username. If the UserName property in your ViewModel is updated, the Label reflects it, but the user cannot change the text from the UI.

xml
<!-- XAML Example -->
<Label Text="{Binding UserName, Mode=OneWay}" />
    

Example:

xml
<Label Text="{Binding UserName}" />
    

If UserName changes in the ViewModel, the Label updates.

But editing the Label text won’t change UserName.

🔄 Two-Way Binding

Definition: Data flows both ways — changes in the source update the target, and changes in the target update the source.

Use Case: When user input should update the underlying data.

In Two-Way binding, data flows in both directions: from source to target and target to source. If the source property changes, the UI updates; if the user changes the value in the UI (e.g., typing in a box), the source property in your code is updated immediately.

Best For: Editable forms, settings pages, or any input where the app needs to capture user data.

Example: An Entry (text box) for a user to update their email address.

xml
<!-- XAML Example -->
<Entry Text="{Binding UserEmail, Mode=TwoWay}" />
    

Example:

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

If UserName changes in the ViewModel, the Entry updates.

If the user types in the Entry, UserName updates in the ViewModel.

⚡ Key Points in MAUI

• Default Modes:
• Label.Text → OneWay by default.
• Entry.Text → TwoWay by default.
• INotifyPropertyChanged: Your ViewModel must implement this interface so the UI knows when data changes.
• BindingContext: Set the BindingContext of a page or control to your ViewModel so bindings know where to look.

🧩 Quick Comparison

Binding Mode	Data Flow	Typical Controls	Example
One-Way	Source → Target	Labels, Images, ProgressBar
Two-Way	Source ↔ Target	Entry, Slider, Switch

👉 In short:

• Use One-Way when you only need to show data.
• Use Two-Way when user input should update your data model.