如何将整个 XAML 组件绑定到 .NET MAUI 中的 ViewModel？

Question

我是 .NET MAUI 的新手，正在尝试不再使用文件隐藏代码，而是使用 MVVM。

在代码隐藏中，很容易为标签赋予“X:Name”属性并使用它来动态更改标签的文本、文本颜色、可见性等。

但是，在迁移到 MVVM 并研究绑定如何工作之后，更改标签文本的当前方法似乎是将标签的 Text 属性绑定到 ViewModel 中的字符串。如果您还想更改它的 TextColor 和 Visibility，则必须绑定所有三个属性。如果一个页面有 3 个标签、2 个按钮等，您想要动态更改多个属性，我可以看到您如何最终得到 100 多行定义所有 [ObservableProperty] 的结果。

尝试绑定整个 Label 组件对我来说似乎很自然，但我似乎无法让它工作。这可能吗？

我目前的尝试：

页面.Xaml：

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

对于我的 [ObservableProperty]，我在 PageViewModel.cs 中尝试了以下两种方法：

        [ObservableProperty]
        Label? testLabel;

        [ObservableProperty]
        Label? TestLabel;

        [ObservableProperty]
        Label testLabel = new Label();

我希望能够像这样设置它的属性：

        public PageViewModel()
        {
            SetLabelProperties();
        }

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

无论我尝试什么，加载页面时的标签值都是在 XAML 中设置的，“ViewModel 应更新此”

Answer 1

在 MVVM 中，ViewModel 不应该包含像 Label 这样的 UI 元素，因为这违反了关注点分离原则。相反，您应该将 Label 的各个属性绑定到 ViewModel 中的相应属性。这是修改后的方法：

1. 在 ViewModel 中为要动态控制的每个属性创建属性。

2. 更新您的 XAML 以绑定这些属性：

   <Label Text="{Binding Text}" TextColor="{Binding TextColor}" IsVisible="{Binding IsVisible}" FontSize="32" HorizontalOptions="Center" />

3. 在 ViewModel 构造函数或任何其他方法中初始化和更新这些属性。通过将 UI 属性与 ViewModel 分离，您可以维护 MVVM 模式，从而使您的代码更加可测试、可维护和解耦。如果您发现自己需要根据某些条件更改多个属性，请考虑使用 DataTriggers 或 Behaviours 来处理这些情况，而无需添加过多的绑定属性。