.Net Maui Two Way One Way Time Binding Complete Guide

We will go through complete examples from start to finish, focusing on how to implement these bindings using XAML and C#.

Prerequisites

• Visual Studio 2022 or later with the .NET MAUI workload installed.
• Basic knowledge of .NET MAUI, C#, and XAML.

Example 1: Two-Way Data Binding

Scenario Overview

In this example, we will create a simple application that allows a user to input their name into an entry field. The input will be automatically reflected in a label below the entry, and vice versa. This demonstrates two-way data binding between a String property in the view model and an Entry control.

Step 1: Create a New .NET MAUI Application

1. Open Visual Studio.
2. Click on "Create a new project."
3. Search for "MAUI App (.NET 6)" and select it.
4. Click "Next."
5. Configure your project:
   • Project name: TwoWayBindingApp
   • Location: Choose your preferred directory
   • Solution name: TwoWayBindingApp
6. Click "Create."

Step 2: Define the ViewModel

The view model is responsible for holding and managing the data. It implements the INotifyPropertyChanged interface to notify the UI when a property changes.

ViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace TwoWayBindingApp;

public class ViewModel : INotifyPropertyChanged
{
    private string _displayName;

    public string DisplayName
    {
        get => _displayName;
        set
        {
            if (_displayName != value)
            {
                _displayName = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Step 3: Update the MainPage.xaml

In the MainPage.xaml, we will bind the Text property of an Entry and a Label to the DisplayName property in ViewModel.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TwoWayBindingApp.MainPage"
             Title="Two-Way Binding Example">

    <ContentPage.BindingContext>
        <viewModels:ViewModel x:FactoryMethod="CreateInstance"
                              x:Name="viewModel"/>
    </ContentPage.BindingContext>

    <VerticalStackLayout Padding="20">

        <!-- Entry for Name -->
        <Entry Placeholder="Enter your name"
               Text="{Binding DisplayName, Mode=TwoWay}"
               HeightRequest="40"/>

        <!-- Label to Display Name -->
        <Label Text="{Binding DisplayName}"
               Padding="5,20,5,5"
               VerticalOptions="StartAndExpand"
               HorizontalOptions="CenterAndExpand"
               FontSize="Large"
               FontAttributes="Bold"/>

    </VerticalStackLayout>

</ContentPage>

Step 4: Add the Factory Method (Optional)

If you want to use x:FactoryMethod to instantiate the ViewModel, add the following static method to the ViewModel class.

Updated ViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace TwoWayBindingApp;

public class ViewModel : INotifyPropertyChanged
{
    private string _displayName;

    public string DisplayName
    {
        get => _displayName;
        set
        {
            if (_displayName != value)
            {
                _displayName = value;
                OnPropertyChanged();
            }
        }
    }

    // Factory Method to Instantiate ViewModel
    public static ViewModel CreateInstance()
    {
        return new ViewModel();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Alternatively, you can set the BindingContext in the code-behind (MainPage.xaml.cs) without a factory method.

Step 5: Set the BindingContext in Code-Behind (Alternative)

This step is necessary only if you have not used x:FactoryMethod in MainPage.xaml.

MainPage.xaml.cs

using TwoWayBindingApp;

namespace TwoWayBindingApp;

public partial class MainPage : ContentPage
{
    private readonly ViewModel viewModel;

    public MainPage()
    {
        InitializeComponent();
        viewModel = new ViewModel();
        BindingContext = viewModel;
    }
}

Step 6: Run the Application

1. Build and run the application on your preferred platform (iOS, Android, macOS, Windows).
2. You should see an entry field and a label displaying the text "Enter your name".
3. Type a name into the entry field; the label will automatically update to reflect the entered text.
4. If you modify the label's text programmatically (through triggers or other means), the entry field will also update accordingly.

Example 2: One-Way-To-Source Data Binding

Scenario Overview

This example will illustrate one-way-to-source binding using a scenario where a user selects a date using a DatePicker. When the date changes, the corresponding property in the view model gets updated. However, changes to the view model property do not affect the DatePicker.

Step 1: Create a New .NET MAUI Application

If you followed the first example, you can reuse the existing solution. Otherwise, follow the steps to create a new .NET MAUI app:

1. Open Visual Studio.
2. Click on "Create a new project."
3. Search for "MAUI App (.NET 6)" and select it.
4. Click "Next."
5. Configure your project:
   • Project name: OneWayToSourceBindingApp
   • Location: Choose your preferred directory
   • Solution name: OneWayToSourceBindingApp
6. Click "Create."

Step 2: Define the ViewModel

Similar to the first example, our ViewModel will implement the INotifyPropertyChanged interface and hold a DateTime property.

ViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace OneWayToSourceBindingApp;

public class ViewModel : INotifyPropertyChanged
{
    private DateTime _selectedDate;

    public DateTime SelectedDate
    {
        get => _selectedDate;
        set
        {
            if (_selectedDate != value)
            {
                _selectedDate = value;
                OnPropertyChanged();
            }
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Step 3: Update the MainPage.xaml

Here, we will bind the Date property of a DatePicker to the SelectedDate property in the ViewModel using one-way-to-source binding mode.

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="OneWayToSourceBindingApp.MainPage"
             Title="One-Way-To-Source Binding Example">

    <ContentPage.BindingContext>
        <viewModels:ViewModel x:FactoryMethod="CreateInstance"
                              x:Name="viewModel"/>
    </ContentPage.BindingContext>

    <VerticalStackLayout Padding="20">

        <!-- DatePicker -->
        <DatePicker Date="{Binding SelectedDate, Mode=OneWayToSource}"
                    HeightRequest="50"/>

        <!-- Label to Display Selected Date -->
        <Label Text="{Binding SelectedDate, StringFormat='{0:MMMM dd, yyyy}'}"
               Padding="5,20,5,5"
               VerticalOptions="StartAndExpand"
               HorizontalOptions="CenterAndExpand"
               FontSize="Medium"/>

    </VerticalStackLayout>

</ContentPage>

Step 4: Add the Factory Method (Optional)

As before, you can use x:FactoryMethod to instantiate the ViewModel.

ViewModel.cs

using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace OneWayToSourceBindingApp;

public class ViewModel : INotifyPropertyChanged
{
    private DateTime _selectedDate;

    public DateTime SelectedDate
    {
        get => _selectedDate;
        set
        {
            if (_selectedDate != value)
            {
                _selectedDate = value;
                OnPropertyChanged();
            }
        }
    }

    // Factory Method to Instantiate ViewModel
    public static ViewModel CreateInstance()
    {
        return new ViewModel();
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Alternatively, set the BindingContext in the MainPage.xaml.cs.

Step 5: Set the BindingContext in Code-Behind (Alternative)

MainPage.xaml.cs

using OneWayToSourceBindingApp;

namespace OneWayToSourceBindingApp;

public partial class MainPage : ContentPage
{
    private readonly ViewModel viewModel;

    public MainPage()
    {
        InitializeComponent();
        viewModel = new ViewModel();
        viewModel.SelectedDate = DateTime.Today; // Default value
        BindingContext = viewModel;
    }
}

Step 6: Run the Application

1. Build and run the application on your preferred platform.
2. You should see a DatePicker displaying the current date and a label showing the selected date in a formatted string.
3. Change the date in the DatePicker; the label will update to reflect the selected date.
4. However, if you programmatically change the SelectedDate property in the ViewModel (e.g., setting it to a future date), the DatePicker will not automatically update to reflect this change.

Additional Considerations

Binding Context Registration

For x:FactoryMethod to work, ensure that the ViewModel namespace is registered in your MainPage.xaml using xmlns.

Example:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:OneWayToSourceBindingApp"
             x:Class="OneWayToSourceBindingApp.MainPage"
             Title="One-Way-To-Source Binding Example">

Validation and Triggers

Data binding can be enhanced with validation rules, triggers, and converters. Here's a brief example of adding a converter to format the date differently.

DateConverter.cs

using System.Globalization;

namespace OneWayToSourceBindingApp;

public class DateConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is DateTimeOffset dateTimeOffset)
        {
            return dateTimeOffset.LocalDateTime.ToString("dddd, MMMM dd yyyy");
        }
        else if (value is DateTime dateTime)
        {
            return dateTime.ToString("dddd, MMMM dd yyyy");
        }

        return value?.ToString();
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (DateTime.TryParse(value as string, out DateTime result))
        {
            return result;
        }

        throw new InvalidCastException($"Unable to convert \"{value}\" back to DateTime.");
    }
}

Registering the Converter in MainPage.xaml

Add the converter to a resource dictionary in MainPage.xaml.

<ContentPage.Resources>
    <ResourceDictionary>
        <converters:DateConverter x:Key="DateConv"/>
    </ResourceDictionary>
</ContentPage.Resources>

Don't forget to register the converter namespace:

xmlns:converters="clr-namespace:OneWayToSourceBindingApp"

Using the Converter

Update the Label's Text binding in MainPage.xaml to use the converter.

<Label Text="{Binding SelectedDate, Converter={StaticResource DateConv}}"
       Padding="5,20,5,5"
       VerticalOptions="StartAndExpand"
       HorizontalOptions="CenterAndExpand"
       FontSize="Medium"/>

Two-Way vs. One-Way-To-Source

• Two-Way Binding: Updates the source property whenever the target property changes and updates the target property whenever the source property changes.
• One-Way-To-Source Binding: Only updates the source property when the target property changes. Changes to the source property do not affect the target property.

Choosing the appropriate binding mode depends on the requirements of your application. For controls like Entry and Editor where user input should be reflected back into the data model, two-way binding is suitable. For controls like DatePicker where the UI state is a result of user actions but should not influence the data model directly, one-way-to-source binding works better.

Conclusion

This guide has provided comprehensive examples of implementing two-way and one-way-to-source data binding in a .NET MAUI application. By utilizing these binding modes effectively, you can build more interactive and intuitive user interfaces.

Feel free to experiment with different controls and properties to gain a deeper understanding of how data binding works in .NET MAUI. Happy coding!

Complete Source Code

Two-Way Binding

TwoWayBindingApp/ViewModel.cs