如何在MAUI中通过Binding与DataTemplate展示任意类型数据？寻找WPF ContentControl的替代方案

Great question! MAUI doesn't have a direct out-of-the-box equivalent to WPF's ContentControl, but we can build exactly the behavior you're looking for using a custom DataTemplateSelector paired with ContentView. Let's break this down step by step.

1. Create a Custom DataTemplateSelector #

First, we need a selector that looks up the appropriate DataTemplate based on the actual type of your Value property. This replicates WPF's automatic template matching logic.

using Microsoft.Maui.Controls;

namespace YourAppNamespace;

public class DataTypeTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if (item == null) return null;

        // Get the parent page to access its resources
        var parentPage = container as Page ?? container.FindParent<Page>();
        var dataType = item.GetType();

        // Look up the template using the data type as the key
        if (parentPage?.Resources.TryGetValue(dataType, out var template) == true)
        {
            return template as DataTemplate;
        }

        // Fallback: show a label if no template exists
        return new DataTemplate(() => new Label { Text = $"No template for {dataType.Name}" });
    }
}

2. Define DataTemplates and Selector in Resources #

Next, add your type-specific templates and the selector to your page's resources. Note that we'll use type objects as template keys (instead of string names) for reliable matching, and we'll add a converter for DateOnly since MAUI's DatePicker uses DateTime.

First, add required namespaces to your XAML:

xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:YourAppNamespace"

Then define the resources:

<Page.Resources>
    <!-- Custom template selector -->
    <local:DataTypeTemplateSelector x:Key="DataTypeTemplateSelector"/>

    <!-- Converter for DateOnly ↔ DateTime (since DatePicker uses DateTime) -->
    <local:DateOnlyToDateTimeConverter x:Key="DateOnlyToDateTimeConverter"/>

    <!-- Type-specific templates -->
    <DataTemplate x:Key="{x:Type sys:String}">
        <Entry Text="{Binding Mode=TwoWay}" Margin="0,0,0,5"/>
    </DataTemplate>

    <DataTemplate x:Key="{x:Type sys:Int32}">
        <NumberPicker Value="{Binding Mode=TwoWay}" Margin="0,0,0,5"/>
    </DataTemplate>

    <DataTemplate x:Key="{x:Type sys:DateOnly}">
        <DatePicker Date="{Binding Mode=TwoWay, Converter={StaticResource DateOnlyToDateTimeConverter}}" Margin="0,0,0,5"/>
    </DataTemplate>
</Page.Resources>

Here's the converter for DateOnly:

using System.Globalization;
using Microsoft.Maui.Controls;

namespace YourAppNamespace;

public class DateOnlyToDateTimeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is DateOnly dateOnly ? dateOnly.ToDateTime(TimeOnly.MinValue) : DateTime.Now;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return value is DateTime dateTime ? DateOnly.FromDateTime(dateTime) : DateOnly.MinValue;
    }
}

3. Use ContentView with the Selector #

Now you can bind your PropertyViewModel data and use ContentView to render the correct template based on Value's type:

<ScrollView Margin="20">
    <StackLayout BindableLayout.ItemsSource="{Binding Properties}" Spacing="10">
        <BindableLayout.ItemTemplate>
            <DataTemplate>
                <DockLayout>
                    <!-- Property name label -->
                    <Label Text="{Binding Name}" 
                           DockLayout.Dock="Left" 
                           VerticalOptions="Center" 
                           WidthRequest="120"/>
                    
                    <!-- Dynamic content renderer -->
                    <ContentView BindingContext="{Binding Value}"
                                ContentTemplateSelector="{StaticResource DataTypeTemplateSelector}"
                                VerticalOptions="Center"/>
                </DockLayout>
            </DataTemplate>
        </BindableLayout.ItemTemplate>
    </StackLayout>
</ScrollView>

Assuming your page's BindingContext has an ObservableCollection<PropertyViewModel> named Properties, this will automatically render the right control for each Value type.

Optional: Wrap in a Custom ContentControl (for WPF-like syntax) #

If you want a cleaner, WPF-style syntax, you can wrap this logic into a custom control:

using Microsoft.Maui.Controls;

namespace YourAppNamespace;

public class ContentControl : ContentView
{
    public static readonly BindableProperty ContentProperty =
        BindableProperty.Create(nameof(Content), typeof(object), typeof(ContentControl), null, propertyChanged: OnContentChanged);

    public static readonly BindableProperty ContentTemplateSelectorProperty =
        BindableProperty.Create(nameof(ContentTemplateSelector), typeof(DataTemplateSelector), typeof(ContentControl), null);

    public object Content
    {
        get => GetValue(ContentProperty);
        set => SetValue(ContentProperty, value);
    }

    public DataTemplateSelector ContentTemplateSelector
    {
        get => (DataTemplateSelector)GetValue(ContentTemplateSelectorProperty);
        set => SetValue(ContentTemplateSelectorProperty, value);
    }

    private static void OnContentChanged(BindableObject bindable, object oldValue, object newValue)
    {
        ((ContentControl)bindable).UpdateContent();
    }

    private void UpdateContent()
    {
        if (ContentTemplateSelector != null && Content != null)
        {
            var template = ContentTemplateSelector.SelectTemplate(Content, this);
            if (template != null)
            {
                var view = template.CreateContent() as View;
                view.BindingContext = Content;
                base.Content = view;
                return;
            }
        }

        // Fallback if no template is found
        base.Content = new Label { Text = Content?.ToString() ?? "No content" };
    }
}

Now you can use it just like WPF's ContentControl:

<local:ContentControl Content="{Binding Value}"
                      ContentTemplateSelector="{StaticResource DataTypeTemplateSelector}"/>

This setup gives you the exact flexibility you had with WPF's ContentControl—automatic template selection based on data type, two-way binding support, and full control over each type's UI.

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