[MVVM] How to correctly do TwoWay bind of a TextBox

[ckorn]

Hello,

bit of a beginners question but I did not figure it out using the ReactiveUI docs.

With the MVVM template I started a new project in Visual Studio 2022.
I have a TextBox and want to have a two way bind.

<TextBox Name="mlLog" AcceptsReturn="True" TextWrapping="Wrap"
		 Text="{Binding Log, Mode=TwoWay}"></TextBox>

This is my ViewModel:

    public class MainWindowViewModel : ViewModelBase
    {
        public string Log { get => log; set { log = value; OnPropertyChanged(); } }
        public string log = "";

        public new event PropertyChangedEventHandler? PropertyChanged;
    }

But with Log = "Hello World"; the UI is not updated.

I did the binding manually here:
https://github.com/ckorn/AutoGitWatcher/blob/master/UI/AutoGitWatcher.Avalonia/Views/MainWindow.axaml.cs#L38

But this does not seem correct ^^

[maxkatz6]

Why do you have "new event" in your view model?

[maxkatz6]

PropertyChanged is already defined in ReactiveObject which you use as it seems

[timunie]

Hi @ckorn

I see a couple of things here:

    public class MainWindowViewModel : ViewModelBase
    {
        public string Log 
        {  
             get => log; 
             set => this.RaiseAndSetIfChanged(ref _searchTerm, value);  // this will update the field and also notify your UI. No need to do it by hand. 
        }

        // The beacking field should not be public
        private string log = ""; // The beacking field should not be public
        
        // You really don't need this. 
        // public new event PropertyChangedEventHandler? PropertyChanged; 
    }

Read more about this here: https://www.reactiveui.net/docs/getting-started/compelling-example

Happy coding
Tim

[timunie]

Looking at your sample there is more wrong. You override the text value in code behind here, so this cannot work:

https://github.com/ckorn/AutoGitWatcher/blob/792ddb6dc3bb05db8f93fd2b90542f79cdf0c64e/UI/AutoGitWatcher.Avalonia/Views/MainWindow.axaml.cs#L24

I'll check it further and provide a PR to you once it works.

[hjrb]

That is wrong
It must be
public string Log
{
get => log;
set => this.RaiseAndSetIfChanged(ref log, value); // this will update the field and also notify your UI. No need to do it by hand.
}

Is there an attribute to decorate properties to use this default behavior? Like
[RaiseUiEventIfChanged]
public string Log { get; set;}

Having to do this for every property of a view model is tedious boiler plate code. In Blazor this simply works.

[timunie]

there is, but you need to use: https://learn.microsoft.com/en-us/dotnet/communitytoolkit/mvvm/generators/observableproperty

[hjrb]

Thanks for the link. But it conflicts with using ReactiveObject as base class. I'll try it one sunny day.

[ckorn]

Oh, wow. I already read about RaiseAndSetIfChanged but it was not visible in my scope. So I thought it was some old technique because the example here looks way more complicated:
https://www.reactiveui.net/docs/handbook/data-binding/avalonia

I did not expect it to be just an extension method. This is why I hate extension methods 😑
Maybe the visual studio template should include such basic binding as an example.
There current example only has a one way binding.

[timunie]

Let me add some more information:

• If you are looking for Avalonia tutorials: https://docs.avaloniaui.net/tutorials/todo-list-app
• I personally find ReactiveUI sometimes too complicated, so I use it in combination with this: https://docs.microsoft.com/en-us/windows/communitytoolkit/mvvm/introduction