Best Practices for Two-Way Data Binding in Large .NET Applications

arunkumar.mr 20

Hello Microsoft Q&A community,

I’m working on a large-scale .NET application, and I’ve been using two-way data binding in my XAML views. However, I’ve heard that this approach can become problematic in large projects. I’d like to understand the best practices and potential pitfalls related to two-way data binding.

Lets assume I have a form which has 50 to 100 input fields and each fields has its own visibility and triggers some other field properties. and some properties triggering API calls. so, is this two way binding triggers any unwanted API calls?

When does it become an anti-pattern in large applications?

How can I optimize performance and maintainability when using two-way data binding?

Is there any other option available to replace two way binding to avoid the above mentioned problems?

Any insights, experiences, or recommended practices would be greatly appreciated. If you’ve encountered challenges related to two-way data binding in large .NET projects, please share your expertise.

Thank you!

Hui Liu-MSFT 38,251 Reputation points Microsoft Vendor

2024-03-20T06:25:06.1333333+00:00

Hi,@arunkumar.mr. Welcome to Microsoft Q&A. The tag of your question is xaml. Could you tell me if your project type is WPF or MAUI?
Hui Liu-MSFT 38,251 Reputation points Microsoft Vendor

2024-03-22T06:34:01.12+00:00

Hi,@arunkumar.mr. Is there any update to the question? If you still face the problem, please share with me more details such as steps and sample code to reproduce the problem for analysis.
Deleted

This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-27T01:39:39.41+00:00

However, I’ve heard that this approach can become problematic in large projects.

Did you ever encounter a similar question?

Do you mean the Mode property? As far as I'm concerned, the most suitable mode should be used in practice.
arunkumar.mr 20 Reputation points

2024-03-27T05:32:45.5833333+00:00

Platform: Winui/WASDK

Did you ever encounter a similar question?

Yes, Please look into this quora question https://www.quora.com/Isnt-two-way-binding-in-a-frontend-framework-dangerouslets consider we have an invoice form which contains customer, address, line items and taxes. we need to update the tax when the customer or address changed.

When changing the customer the address and tax prop will be updated.

When changing the address the tax prop will be updated.

So, the problem here is each prop triggers API call. when changing the customer the tax prop updated twice by customer and address change event. and it will triggers unwanted API call.

Is there any way to find the prop changed trigger is from user interaction and skip the unwanted API call from two-way binding?
Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-27T05:46:12.06+00:00

The thread you attached also don't indicate It's unsafe but possible inefficient. That why I say the most suitable mode should be used in practice.

For the situation you said, could you please show a minimal, reproducible sample without private information?

arunkumar.mr 20

MainWindow.xaml

<Grid Width="300">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <TextBox Header="Customer" Text="{x:Bind Customer, Mode=TwoWay}"/>
    <TextBox Grid.Row="1" Header="Address" Text="{x:Bind Address, Mode=TwoWay}"/>
    <TextBlock Grid.Row="2" Text="{x:Bind Tax, Mode=OneWay}"/>
</Grid>

MainWindow.xaml.cs

public sealed partial class MainWindow : Window, INotifyPropertyChanged
{
    private string _customer;
    public string Customer
    {
        get => _customer;
        set
        {
            if(Set(ref _customer, value))
            {
                Address = "Customer Address";
                Tax = "Customer Tax";
                NotifyPropertyChanged(nameof(Address));
                NotifyPropertyChanged(nameof(Tax));
            }
        }
    }
    private string _address;
    public string Address
    {
        get => _address;
        set
        {
            Set(ref _address, value);
           Tax = "Address Tax";   
            NotifyPropertyChanged(nameof(Tax));
          
        }
    }
    private string _tax;
    public string Tax
    {
        get => _tax;
        set
        {
            Set(ref _tax, value);
            Debug.WriteLine("\n\nTrigger API call\n\n");
        }
    }
    public MainWindow()
    {
        this.InitializeComponent();
    }
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private bool Set<T>(ref T field, T newValue, [CallerMemberName] string propertyName = null)
    {
        if (!EqualityComparer<T>.Default.Equals(field, newValue))
        {
            field = newValue;
            NotifyPropertyChanged(propertyName);
            return true;
        }
        return false;
    }
}

Ourput:

User's image

I expect that this example will be useful.

While user changes the customer, it will update the address and tax. and the API call will be triggered for tax change.

However, the address property also triggers the tax property without any user interaction. This results in an undesired API call being made, as can be seen in the output. Ideally, this should only occur when the user specifically changes the address.

arunkumar.mr 20 Reputation points

2024-03-28T09:41:46.8533333+00:00

Thanks, It works.
Xiaopo Yang - MSFT 11,496 Reputation points Microsoft Vendor

2024-03-29T01:17:06.07+00:00

@arunkumar.mr, could you please mark answer for completion of this question?

Accepted answer

Xiaopo Yang - MSFT 11,496 Microsoft Vendor

Hello @arunkumar.mr, It is due to the set properties are called. Try the following code.

public sealed partial class MainWindow : Window, INotifyPropertyChanged
{
    public MainWindow()
    {
        this.InitializeComponent();
    }
    private string _customer;
    public string Customer
    {
        get => _customer;
        set
        {
            _customer = value;
            NotifyPropertyChanged(nameof(Customer));
            {
                _address = "Customer Address";
                _tax = "Customer Tax";
                NotifyPropertyChanged(nameof(Address));
                NotifyPropertyChanged(nameof(Tax));
            }
        }
    }
    private string _address;
    public string Address
    {
        get => _address;
        set
        {
            _address = value;
            NotifyPropertyChanged(nameof(Address));
            _tax = "Address Tax";
            NotifyPropertyChanged(nameof(Tax));
        }
    }
    private string _tax;
    public string Tax
    {
        get => _tax;
        set
        {
            _tax = value;
            NotifyPropertyChanged(nameof(Tax));
            Debug.WriteLine("\n\nTrigger API call\n\n");
        }
    }
    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Best Practices for Two-Way Data Binding in Large .NET Applications

0 additional answers