如何在MAUI中创建支持多类型控件的可观察StackLayout

你可以通过两种方式实现无需替换Content就能动态添加多类型控件的需求：

方法一：使用ItemsControl + ObservableCollection<object> #

ItemsControl是MAUI/WPF中专门用于展示集合数据的控件，结合ObservableCollection<object>（支持存储任意类型控件），再将其ItemsPanel指定为StackLayout，就能实现UI与集合的自动同步。

1. 定义可观察集合 #

在页面的代码后台或ViewModel中声明一个ObservableCollection<object>用于存储控件：

using System.Collections.ObjectModel;

// 若直接在代码后台使用，放在页面类中
public ObservableCollection<object> DynamicControls { get; } = new ObservableCollection<object>();

2. XAML中绑定集合并配置布局 #

在XAML中添加ItemsControl，指定其ItemsSource为上述集合，并将ItemsPanel设置为StackLayout：

<ItemsControl ItemsSource="{Binding DynamicControls}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <StackLayout Orientation="Vertical" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

注：如果是在代码后台直接使用，需确保页面的BindingContext已设置为自身，比如在构造函数中添加BindingContext = this;。

3. 动态添加控件 #

修改点击事件代码，直接向DynamicControls集合中添加控件即可，UI会自动更新：

async void StartTurnButton_Clicked(System.Object sender, System.EventArgs e)
{
    var initialSteps = Turns.Take(2);

    foreach (var step in initialSteps)
    {
        Label label = new Label
        {
            Text = step.label,
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center
        };
        DynamicControls.Add(label);
    }

    // 直接添加Button，无需替换Content
    DynamicControls.Add(new Button { Text = "test" });
}

方法二：自定义ObservableStackLayout控件 #

如果想要更贴合原生StackLayout的使用体验，可以自定义一个继承自StackLayout的控件，通过依赖属性绑定可观察集合，自动同步子元素。

1. 实现自定义控件 #

创建自定义控件类，监听集合变化并自动添加/移除子元素：

using System.Collections.ObjectModel;
using System.Collections.Specialized;
using Microsoft.Maui.Controls;

public class ObservableStackLayout : StackLayout
{
    public static readonly BindableProperty ItemsSourceProperty =
        BindableProperty.Create(
            nameof(ItemsSource),
            typeof(ObservableCollection<object>),
            typeof(ObservableStackLayout),
            null,
            propertyChanged: OnItemsSourceChanged);

    public ObservableCollection<object> ItemsSource
    {
        get => (ObservableCollection<object>)GetValue(ItemsSourceProperty);
        set => SetValue(ItemsSourceProperty, value);
    }

    private static void OnItemsSourceChanged(BindableObject bindable, object oldValue, object newValue)
    {
        var layout = (ObservableStackLayout)bindable;
        var oldCollection = oldValue as ObservableCollection<object>;
        var newCollection = newValue as ObservableCollection<object>;

        // 清理旧集合的监听和子元素
        if (oldCollection != null)
        {
            oldCollection.CollectionChanged -= layout.OnCollectionChanged;
            layout.Children.Clear();
        }

        // 绑定新集合并初始化子元素
        if (newCollection != null)
        {
            newCollection.CollectionChanged += layout.OnCollectionChanged;
            foreach (var item in newCollection)
            {
                if (item is View view)
                {
                    layout.Children.Add(view);
                }
            }
        }
    }

    private void OnCollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        switch (e.Action)
        {
            case NotifyCollectionChangedAction.Add:
                foreach (var item in e.NewItems)
                {
                    if (item is View view) Children.Add(view);
                }
                break;
            case NotifyCollectionChangedAction.Remove:
                foreach (var item in e.OldItems)
                {
                    if (item is View view) Children.Remove(view);
                }
                break;
            case NotifyCollectionChangedAction.Reset:
                Children.Clear();
                break;
            // 可按需添加Move、Replace等操作的处理逻辑
        }
    }
}

2. XAML中使用自定义控件 #

在XAML中引用自定义控件并绑定集合：

<!-- 先声明命名空间，假设控件在根命名空间下 -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.YourPage">

    <local:ObservableStackLayout ItemsSource="{Binding DynamicControls}" Orientation="Vertical" />

</ContentPage>

3. 动态添加控件 #

和方法一一样，直接向DynamicControls集合中添加控件即可，自定义控件会自动同步子元素。

两种方法都避免了每次替换Content的操作，通过集合的变化自动更新UI：方法一利用原生控件组合实现，无需自定义控件；方法二更贴近原生StackLayout的使用方式，适合需要统一布局风格的场景。

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