如何在.NET 8 MAUI中创建带可填充分区的BasePage？

完全可行，通过MAUI的ContentPresenter结合绑定属性，就能实现带XAML模板的BasePage，统一管理通用元素和逻辑，同时让子页面在指定区域填充自定义内容。下面是完整实现示例：

一、创建通用BasePage #

1. BasePage的XAML模板 #

用Grid布局划分区域，底部固定广告栏，上方预留两个可自定义的区域，通过ContentPresenter作为占位符：

<?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"
             x:Class="YourAppNamespace.BasePages.BasePage"
             x:Name="RootBasePage">
    <Grid RowDefinitions="*, *, auto">
        <!-- 第一个自定义区域 -->
        <ContentPresenter Grid.Row="0" Content="{Binding FirstContent, Source={x:Reference RootBasePage}}" />
        
        <!-- 第二个自定义区域 -->
        <ContentPresenter Grid.Row="1" Content="{Binding SecondContent, Source={x:Reference RootBasePage}}" />
        
        <!-- 统一底部广告栏 -->
        <Frame Grid.Row="2" BackgroundColor="#f5f5f5" Padding="12" Margin="0,8,0,0">
            <!-- 替换为你的实际广告控件（如AdMob的AdView） -->
            <Label Text="全局底部广告" HorizontalOptions="Center" VerticalOptions="Center" />
        </Frame>
    </Grid>
</ContentPage>

2. BasePage的后台逻辑 #

定义两个绑定属性接收子页面的自定义内容，同时封装通用逻辑（如状态栏空白处理）：

using Microsoft.Maui.Controls;

namespace YourAppNamespace.BasePages;

public partial class BasePage : ContentPage
{
    // 第一个自定义区域的绑定属性
    public static readonly BindableProperty FirstContentProperty =
        BindableProperty.Create(nameof(FirstContent), typeof(View), typeof(BasePage), null);

    public View FirstContent
    {
        get => (View)GetValue(FirstContentProperty);
        set => SetValue(FirstContentProperty, value);
    }

    // 第二个自定义区域的绑定属性
    public static readonly BindableProperty SecondContentProperty =
        BindableProperty.Create(nameof(SecondContent), typeof(View), typeof(BasePage), null);

    public View SecondContent
    {
        get => (View)GetValue(SecondContentProperty);
        set => SetValue(SecondContentProperty, value);
    }

    public BasePage()
    {
        InitializeComponent();
        // 执行通用逻辑：处理状态栏空白
        SetupStatusBarSpacing();
    }

    private void SetupStatusBarSpacing()
    {
        if (DeviceInfo.Platform == DevicePlatform.iOS)
        {
            Padding = new Thickness(0, DeviceInfo.StatusBarHeight, 0, 0);
        }
        else if (DeviceInfo.Platform == DevicePlatform.Android)
        {
            // 安卓可通过依赖服务获取状态栏高度，这里简化处理
            Padding = new Thickness(0, 24, 0, 0);
        }
    }
}

二、创建继承BasePage的子页面 #

子页面的XAML实现 #

直接继承BasePage，通过BasePage.FirstContent和BasePage.SecondContent填充自定义内容：

<?xml version="1.0" encoding="utf-8" ?>
<base:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
               xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
               xmlns:base="clr-namespace:YourAppNamespace.BasePages"
               x:Class="YourAppNamespace.Pages.HomePage"
               Title="首页">
    <base:BasePage.FirstContent>
        <!-- 第一个区域的自定义内容 -->
        <ScrollView Padding="16">
            <VerticalStackLayout Spacing="16">
                <Label Text="首页主内容区" FontSize="Large" FontWeight="Bold" />
                <Entry Placeholder="输入测试内容" />
            </VerticalStackLayout>
        </ScrollView>
    </base:BasePage.FirstContent>

    <base:BasePage.SecondContent>
        <!-- 第二个区域的自定义内容 -->
        <Frame BackgroundColor="#e8f5e9" Padding="12" Margin="16,0">
            <Label Text="首页辅助内容区" FontSize="Medium" />
        </Frame>
    </base:BasePage.SecondContent>
</base:BasePage>

子页面的后台逻辑 #

只需处理自身业务，无需重复实现广告和状态栏逻辑：

using YourAppNamespace.BasePages;

namespace YourAppNamespace.Pages;

public partial class HomePage : BasePage
{
    public HomePage()
    {
        InitializeComponent();
        BindingContext = this;
    }

    // 子页面自定义命令/逻辑
    public ICommand TestCommand => new Command(async () =>
    {
        await DisplayAlert("提示", "子页面逻辑触发", "确定");
    });
}

三、核心说明 #

• ContentPresenter是实现XAML模板复用的关键，它可以绑定接收任意View类型的内容，让子页面灵活填充自定义布局。
• BasePage中可以统一管理所有页面的通用元素（广告、导航栏样式）和通用逻辑（异常捕获、页面生命周期处理），彻底消除重复代码。
• 如果需要调整布局结构，只需修改BasePage的XAML布局，所有子页面会自动继承更新。

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