MAUI项目中用CommunityToolkit MVVM从ViewModel动态添加控件

你之前尝试直接在ViewModel中操作StackLayout的思路不符合MVVM的设计原则——ViewModel不应该直接依赖或操作UI控件，这会导致业务逻辑与UI强耦合，难以维护和测试。正确的做法是通过数据绑定+集合驱动UI来实现动态控件生成，以下是具体实现步骤：

1. 定义动态控件的数据模型 #

先创建一个类来描述动态控件的属性，比如类型、文本、占位符等：

public class DynamicControlItem
{
    public enum ControlType
    {
        Label,
        Entry
    }

    public ControlType Type { get; set; }
    public string Text { get; set; }
    public string Placeholder { get; set; }
}

2. 在ViewModel中维护控件数据集合 #

使用ObservableCollection（自动通知UI更新）来存储动态控件的数据，结合CommunityToolkit MVVM的特性实现命令绑定：

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Collections.ObjectModel;

namespace YourProjectNamespace;

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private ObservableCollection<DynamicControlItem> _dynamicControls = new();

    // 用于触发添加控件的命令
    [RelayCommand]
    private void AddDynamicControl()
    {
        // 添加一个Label
        DynamicControls.Add(new DynamicControlItem
        {
            Type = DynamicControlItem.ControlType.Label,
            Text = "Primary colors"
        });

        // 添加一个Entry
        DynamicControls.Add(new DynamicControlItem
        {
            Type = DynamicControlItem.ControlType.Entry,
            Placeholder = "Enter something..."
        });
    }
}

3. 在XAML中绑定集合并渲染控件 #

用ItemsControl绑定ViewModel的集合，通过DataTemplateSelector根据数据模型的类型渲染对应的UI控件：

3.1 定义模板选择器 #

namespace YourProjectNamespace;

public class ControlTemplateSelector : DataTemplateSelector
{
    public DataTemplate LabelTemplate { get; set; }
    public DataTemplate EntryTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is DynamicControlItem controlItem)
        {
            return controlItem.Type switch
            {
                DynamicControlItem.ControlType.Label => LabelTemplate,
                DynamicControlItem.ControlType.Entry => EntryTemplate,
                _ => base.OnSelectTemplate(item, container)
            };
        }
        return base.OnSelectTemplate(item, container);
    }
}

3.2 编写XAML布局 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:YourProjectNamespace"
             xmlns:local="clr-namespace:YourProjectNamespace"
             x:Class="YourProjectNamespace.MainPage">

    <ContentPage.BindingContext>
        <vm:MainViewModel />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <!-- Label模板 -->
        <DataTemplate x:Key="LabelTemplate">
            <Label Text="{Binding Text}" Margin="0,5,0,5" FontSize="Medium" />
        </DataTemplate>

        <!-- Entry模板 -->
        <DataTemplate x:Key="EntryTemplate">
            <Entry Placeholder="{Binding Placeholder}" Text="{Binding Text}" Margin="0,5,0,5" />
        </DataTemplate>

        <!-- 注册模板选择器 -->
        <local:ControlTemplateSelector x:Key="ControlTemplateSelector"
                                       LabelTemplate="{StaticResource LabelTemplate}"
                                       EntryTemplate="{StaticResource EntryTemplate}" />
    </ContentPage.Resources>

    <VerticalStackLayout Padding="20">
        <!-- 触发添加控件的按钮 -->
        <Button Text="Add Control" Command="{Binding AddDynamicControlCommand}" Margin="0,0,0,15" />
        
        <!-- 动态渲染控件的容器 -->
        <ItemsControl ItemsSource="{Binding DynamicControls}"
                      ItemTemplateSelector="{StaticResource ControlTemplateSelector}" />
    </VerticalStackLayout>
</ContentPage>

核心逻辑说明 #

• ViewModel只负责维护数据集合，不需要关心UI控件的具体实现，完全符合MVVM的关注点分离原则。
• ObservableCollection会在集合内容变化时自动通知UI更新，无需手动操作布局控件。
• DataTemplateSelector可以灵活扩展更多控件类型（比如Picker、Switch等），只需新增模板和枚举类型即可。

内容的提问来源于stack exchange，提问作者Lars