MAUI中基于New/Edit/View模式显示/隐藏控件的实现方案

针对你这种多模式表单的场景，**DataTemplateSelector（数据模板选择器）**是最优雅且性能最优的方案，它能根据当前模式动态加载对应UI控件，避免所有控件提前实例化，同时保持代码结构清晰。

具体实现步骤 #

1. 定义模式枚举 #

先明确三种模式的枚举类型，方便后续传递和判断：

public enum DocumentMode
{
    View,
    Edit,
    New
}

2. 实现自定义DataTemplateSelector #

创建一个继承自对应框架（如MAUI/WPF/Xamarin）自带的DataTemplateSelector的类，根据传入的DocumentMode返回对应模板：

public class DocumentModeTemplateSelector : DataTemplateSelector
{
    public DataTemplate ViewModeTemplate { get; set; }
    public DataTemplate EditModeTemplate { get; set; }
    public DataTemplate NewModeTemplate { get; set; } // 如需独立配置New模式可添加

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item is DocumentMode mode)
        {
            return mode switch
            {
                DocumentMode.View => ViewModeTemplate,
                DocumentMode.Edit => EditModeTemplate,
                DocumentMode.New => NewModeTemplate ?? EditModeTemplate, // New模式默认复用Edit模板
                _ => base.OnSelectTemplate(item, container)
            };
        }
        return base.OnSelectTemplate(item, container);
    }
}

3. 在XAML中定义各模式的模板 #

把不同模式的UI结构分离到独立的DataTemplate中，View模式用只读Label展示字段，Edit/New模式用可编辑控件：

<ContentPage.Resources>
    <!-- View模式模板：仅显示只读标签 -->
    <DataTemplate x:Key="ViewTemplate">
        <ScrollView>
            <StackLayout Spacing="10" Padding="20">
                <Label Text="{Binding Model.Field1}" FontSize="Body" />
                <Label Text="{Binding Model.Field2, StringFormat='创建日期: {0:d}'}" FontSize="Body" />
                <!-- 其余8个字段按此格式添加 -->
            </StackLayout>
        </ScrollView>
    </DataTemplate>

    <!-- Edit模式模板：显示可编辑控件 -->
    <DataTemplate x:Key="EditTemplate">
        <ScrollView>
            <StackLayout Spacing="10" Padding="20">
                <Entry Text="{Binding Model.Field1}" Placeholder="请输入字段1" />
                <DatePicker Date="{Binding Model.Field2}" />
                <!-- 其余8个字段按此格式添加 -->
            </StackLayout>
        </ScrollView>
    </DataTemplate>

    <!-- 实例化自定义模板选择器 -->
    <local:DocumentModeTemplateSelector 
        x:Key="ModeSelector"
        ViewModeTemplate="{StaticResource ViewTemplate}"
        EditModeTemplate="{StaticResource EditTemplate}" />
</ContentPage.Resources>

4. 页面中绑定模式并使用模板选择器 #

在页面的ContentControl中绑定当前DocumentMode，并指定模板选择器：

<ContentControl 
    Content="{Binding CurrentMode}"
    ContentTemplateSelector="{StaticResource ModeSelector}" />

5. ViewModel中处理模式与模型初始化 #

在ViewModel中维护CurrentMode属性，根据模式初始化对应模型：

public class DocumentViewModel : INotifyPropertyChanged
{
    private DocumentMode _currentMode;
    public DocumentMode CurrentMode
    {
        get => _currentMode;
        set { _currentMode = value; OnPropertyChanged(); }
    }

    public YourModel Model { get; set; }

    public DocumentViewModel(DocumentMode mode, YourModel existingModel = null)
    {
        CurrentMode = mode;
        // 根据模式初始化模型
        Model = mode switch
        {
            DocumentMode.New => new YourModel(),
            DocumentMode.Edit => existingModel,
            DocumentMode.View => existingModel,
            _ => null
        };
    }

    // 实现INotifyPropertyChanged接口
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

方案优势 #

• 性能优化：仅加载当前模式对应的控件，不会实例化所有模式的控件，减少内存占用和初始化时间
• 代码分离：不同模式的UI逻辑独立在各自模板中，维护更方便，避免同一页面中大量条件判断
• 扩展性强：后续新增模式只需添加新的模板和修改模板选择器的判断逻辑即可

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