.NET Maui中切换页面元素组可见性的替代方案有哪些？

问题背景 #

我需要构建一个页面，包含始终显示的静态元素，以及多组根据用户操作切换显示/隐藏的元素。目前的实现是将每组元素放入StackLayout这类容器，通过绑定IsVisible属性控制可见性，示例代码如下：

<StackLayout IsVisible="{Binding IsLoaded}">...<StackLayout>

<StackLayout IsVisible="{Binding IsLoaded}, Converter={helpers:InverseBoolConverter}">...<StackLayout>

但当元素组数量超过2个时，这种方式会产生额外开销，因此想找更优方案。我知道DataTemplateSelector但它似乎只适用于列表类控件，想了解是否有类似机制可用于ContentPage或非列表控件，能定义2个及以上可绑定同一ViewModel的备选模板/控件，并根据ViewModel中的数据（比如ViewModel.IsLoaded的值）切换显示对应的模板/控件。

注：仅通过控件样式无法满足需求，因为各组是完全不同的控件。

可行解决方案 #

1. 使用ContentView结合DataTemplateSelector #

虽然DataTemplateSelector常与列表控件搭配，但也可用于ContentView的ContentTemplate绑定。自定义模板选择器后，就能根据ViewModel状态返回对应模板，静态元素直接放在页面根布局，动态区域用ContentView承载。

自定义DataTemplateSelector

public class PageStateTemplateSelector : DataTemplateSelector
{
    public DataTemplate LoadingTemplate { get; set; }
    public DataTemplate LoadedTemplate { get; set; }
    public DataTemplate ErrorTemplate { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        var viewModel = item as YourViewModel;
        if (viewModel == null) return base.OnSelectTemplate(item, container);

        if (viewModel.IsLoading)
            return LoadingTemplate;
        else if (viewModel.IsLoaded)
            return LoadedTemplate;
        else
            return ErrorTemplate;
    }
}

XAML中使用

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourNamespace"
             x:Class="YourNamespace.YourPage">
    <!-- 静态元素，始终显示 -->
    <StackLayout>
        <Label Text="静态标题" />
        <!-- 动态切换区域 -->
        <ContentView Content="{Binding}" ContentTemplateSelector="{StaticResource PageStateTemplateSelector}" />
    </StackLayout>

    <ContentPage.Resources>
        <local:PageStateTemplateSelector x:Key="PageStateTemplateSelector">
            <local:PageStateTemplateSelector.LoadingTemplate>
                <DataTemplate>
                    <StackLayout>
                        <ActivityIndicator IsRunning="True" />
                        <Label Text="加载中..." />
                    </StackLayout>
                </DataTemplate>
            </local:PageStateTemplateSelector.LoadingTemplate>

            <local:PageStateTemplateSelector.LoadedTemplate>
                <DataTemplate>
                    <ScrollView>
                        <Label Text="{Binding DataContent}" />
                        <Button Text="操作按钮" Command="{Binding DoSomethingCommand}" />
                    </ScrollView>
                </DataTemplate>
            </local:PageStateTemplateSelector.LoadedTemplate>

            <local:PageStateTemplateSelector.ErrorTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Label Text="加载失败" />
                        <Button Text="重试" Command="{Binding RetryCommand}" />
                    </StackLayout>
                </DataTemplate>
            </local:PageStateTemplateSelector.ErrorTemplate>
        </local:PageStateTemplateSelector>
    </ContentPage.Resources>
</ContentPage>

2. 使用VisualStateManager #

如果状态数量不多，VisualStateManager也是实用选项。给根布局定义不同视觉状态，每个状态下设置对应控件的IsVisible。不过当控件组差异较大时，模板选择器的结构更清晰。

<StackLayout>
    <!-- 静态元素 -->
    <Label Text="静态标题" />

    <!-- 动态控件组 -->
    <ActivityIndicator x:Name="LoadingIndicator" IsRunning="True" />
    <ScrollView x:Name="LoadedContent">
        <!-- 加载完成内容 -->
    </ScrollView>
    <StackLayout x:Name="ErrorContent">
        <!-- 错误内容 -->
    </StackLayout>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="PageStates">
            <VisualState x:Name="Loading">
                <VisualState.Setters>
                    <Setter TargetName="LoadingIndicator" Property="IsVisible" Value="True" />
                    <Setter TargetName="LoadedContent" Property="IsVisible" Value="False" />
                    <Setter TargetName="ErrorContent" Property="IsVisible" Value="False" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Loaded">
                <VisualState.Setters>
                    <Setter TargetName="LoadingIndicator" Property="IsVisible" Value="False" />
                    <Setter TargetName="LoadedContent" Property="IsVisible" Value="True" />
                    <Setter TargetName="ErrorContent" Property="IsVisible" Value="False" />
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Error">
                <VisualState.Setters>
                    <Setter TargetName="LoadingIndicator" Property="IsVisible" Value="False" />
                    <Setter TargetName="LoadedContent" Property="IsVisible" Value="False" />
                    <Setter TargetName="ErrorContent" Property="IsVisible" Value="True" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</StackLayout>

之后可通过ViewModel绑定触发状态切换，或在代码后台根据ViewModel属性设置当前视觉状态。

3. 直接绑定Content属性 #

在ViewModel中定义View类型的属性，根据状态实例化对应控件，再绑定到ContentView的Content属性。这种方式逻辑集中，但要注意MVVM边界，避免ViewModel直接依赖UI控件。

ViewModel部分

private View _currentView;
public View CurrentView
{
    get => _currentView;
    set => SetProperty(ref _currentView, value);
}

// 根据状态切换视图
private void UpdateView()
{
    if (IsLoading)
        CurrentView = new LoadingView(); // 自定义加载视图控件
    else if (IsLoaded)
        CurrentView = new LoadedView(); // 自定义加载完成视图控件
    else
        CurrentView = new ErrorView(); // 自定义错误视图控件
}

XAML部分

<ContentPage>
    <StackLayout>
        <!-- 静态元素 -->
        <Label Text="静态标题" />
        <!-- 动态视图 -->
        <ContentView Content="{Binding CurrentView}" />
    </StackLayout>
</ContentPage>

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