如何在.NET MAUI中实现可复用ContentView并指定内容插入区域？

实现思路 #

无需使用复杂的ControlTemplate，直接给自定义ContentView定义一个可绑定属性来接收外部传入的内容，再在ContentView的布局结构中用ContentPresenter绑定该属性，即可将外部的自定义控件插入到指定的content区域。

代码示例 #

1. 自定义带Header/Content/Footer结构的ContentView #

创建LayoutContainer.xaml及对应的代码隐藏文件：

LayoutContainer.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourNamespace.LayoutContainer">
    <VerticalStackLayout Spacing="0">
        <!-- Header区域 -->
        <Frame BackgroundColor="#2196F3" Padding="16">
            <Label Text="通用头部" TextColor="White" FontSize="18" FontAttributes="Bold"/>
        </Frame>

        <!-- 自定义内容区域：通过ContentPresenter绑定自定义属性 -->
        <ContentPresenter Content="{Binding CustomContent}"
                          Margin="16" VerticalOptions="FillAndExpand"/>

        <!-- Footer区域 -->
        <Frame BackgroundColor="#F5F5F5" Padding="16">
            <Label Text="通用底部" TextColor="#666" FontSize="14"/>
        </Frame>
    </VerticalStackLayout>
</ContentView>

LayoutContainer.xaml.cs

using Microsoft.Maui.Controls;

namespace YourNamespace;

public partial class LayoutContainer : ContentView
{
    // 定义可绑定属性，用于接收外部传入的自定义内容
    public static readonly BindableProperty CustomContentProperty =
        BindableProperty.Create(nameof(CustomContent), typeof(View), typeof(LayoutContainer), null);

    public View CustomContent
    {
        get => (View)GetValue(CustomContentProperty);
        set => SetValue(CustomContentProperty, value);
    }

    public LayoutContainer()
    {
        InitializeComponent();
        // 将绑定上下文设为自身，确保ContentPresenter能正确获取CustomContent属性
        BindingContext = this;
    }
}

2. 在ContentPage中复用并插入自定义控件 #

在目标页面（如MainPage.xaml）中引用该ContentView，并传入自定义内容：

<?xml version="1.0" encoding="utf-8" ?>
<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.MainPage">

    <local:LayoutContainer>
        <local:LayoutContainer.CustomContent>
            <!-- 此处可放置任意自定义控件，示例为Entry+Button组合 -->
            <VerticalStackLayout Spacing="12">
                <Entry Placeholder="请输入内容" />
                <Button Text="提交" BackgroundColor="#4CAF50" TextColor="White" />
                <Label Text="这是自定义的内容区域" Margin="0,16,0,0" />
            </VerticalStackLayout>
        </local:LayoutContainer.CustomContent>
    </local:LayoutContainer>

</ContentPage>

关键说明 #

• 核心是通过BindableProperty实现ContentView与外部页面的内容传递，支持注入任意View类型的内容。
• 若之前使用ControlTemplate未成功，大概率是未正确绑定模板属性，这种直接定义可绑定属性的方式更直观，也更易排查问题。

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