How to bind an entire XAML component to a ViewModel in .NET MAUI?

Question

I am new to .NET MAUI and am trying to move away from using the code behind file, and use MVVM instead.

In Code behind, it was very easy to give a Label an 'X:Name' property and use that to dynamically change the Label's Text, TextColor, Visibility, etc.

However after moving to MVVM, and looking into how bindings work, it seems that the current way to change the label text would be to bind the Label's Text property to a string in the ViewModel. IF you also wanted to change it's TextColor and Visibility, you would have to bind all three properties. If a page were to have 3 labels, 2 buttons, etc. etc. where you'd want to change mulitple attributes dynamically, I could see how you could end up with 100+ lines of just defining all the [ObservableProperty].

It seems natural for me to just try and bind the entire Label component,but I can't seem to get it to work. Is this possible?

My current attempt:

Page.Xaml:

           <Label BindingContext="{Binding TestLabel, Mode=TwoWay}"
                x:Name="TestLabel"
                Text="ViewModel Should Update This"
                IsVisible="true"
                TextColor="Black"
                FontSize="32"
                HorizontalOptions="Center" />

For my [ObservableProperty], I ahve tried both of the follwing in my PageViewModel.cs:

        [ObservableProperty]
        Label? testLabel;

        [ObservableProperty]
        Label? TestLabel;

        [ObservableProperty]
        Label testLabel = new Label();

And I want to be able to set it's properties like so:

        public PageViewModel()
        {
            SetLabelProperties();
        }

        private async void SetLabelProperties()
        {
            TestLabel.Text = "Hello World";
            TestLabel.TextColor = Colors.Red;
            TestLabel.SetValue(Label.TextProperty, "PLease freakin work");
        }

No matter what I try, the label value when loading the page, is what is set in the XAML, "ViewModel Should Update This"

Answer 1

In MVVM, the ViewModel should not contain UI elements like Label, as that violates the separation of concerns principle. Instead, you should bind individual properties of the Label to corresponding properties in the ViewModel. Here's a revised approach:

1. Create properties in your ViewModel for each attribute you want to control dynamically.

2. Update your XAML to bind these properties: <Label Text="{Binding Text}" TextColor="{Binding TextColor}" IsVisible="{Binding IsVisible}" FontSize="32" HorizontalOptions="Center" />

3. Initialize and update these properties in your ViewModel constructor or any other method.By separating the UI properties from the ViewModel, you maintain the MVVM pattern, making your code more testable, maintainable, and decoupled. If you find yourself needing to change multiple properties based on certain conditions, consider using DataTriggers or Behaviors to handle those cases without adding excessive amounts of binding properties.