.NET MAUI页面继承：如何同时显示基页与子页内容？

问题原因 #

你当前的写法会导致子页内容覆盖基页内容，因为继承ContentPage时，子页XAML根元素下的内容会直接赋值给页面的Content属性，替换掉基页原本的布局，所以基页的VerticalStackLayout和里面的内容都会被覆盖，只显示子页内容。

解决方案 #

通过给基页定义一个自定义可绑定属性来接收子页内容，让子页的内容嵌入到基页指定的ContentPresenter位置，而非替换整个页面内容。同时保留子页对基页视图和变量的访问权限。

修改后的基页代码 #

基页.xaml

<?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:MauiApp1"
             x:Class="MauiApp1.MainPage"
             Title="MainPage">

  <VerticalStackLayout>
    <!-- 基页固定内容 -->
    <Label x:Name="LabelMain" Text="MainPage content."/>
    
    <!-- 将子页内容绑定到此处 -->
    <ContentPresenter Content="{Binding ChildContent, Source={RelativeSource AncestorType={x:Type local:MainPage}}}"/>
  </VerticalStackLayout>

</ContentPage>

基页.cs

namespace MauiApp1
{
    public partial class MainPage : ContentPage
    {
        // 子页可直接访问的变量
        protected int test = 0;

        // 定义可绑定属性，用于接收子页内容
        public static readonly BindableProperty ChildContentProperty =
            BindableProperty.Create(nameof(ChildContent), typeof(View), typeof(MainPage));

        public View ChildContent
        {
            get => (View)GetValue(ChildContentProperty);
            set => SetValue(ChildContentProperty, value);
        }

        public MainPage()
        {
            InitializeComponent();
        }
    }
}

修改后的子页代码 #

子页.xaml

<?xml version="1.0" encoding="utf-8" ?>
<local:MainPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:MauiApp1"
                x:Class="MauiApp1.NewPage1"
                Title="NewPage1">

    <!-- 将子页内容赋值给基页的ChildContent属性 -->
    <local:MainPage.ChildContent>
        <Label Text="NewPage1 content."/>
    </local:MainPage.ChildContent>

</local:MainPage>

子页.cs

namespace MauiApp1;

public partial class NewPage1 : MainPage
{
    public NewPage1()
    {
        InitializeComponent();
        
        // 直接访问基页的变量和控件
        test = 10;
        LabelMain.Text = "修改后的基页标签文本";
    }
}

核心逻辑说明 #

1. 基页新增ChildContent可绑定属性，专门用于承载子页的内容，避免子页覆盖整个页面的Content。
2. 基页布局中的ContentPresenter通过数据绑定关联到ChildContent属性，实现子页内容的嵌入展示。
3. 子页不再直接设置页面内容，而是通过local:MainPage.ChildContent语法将自己的内容传递给基页。
4. 由于继承关系，子页可以直接访问基页中protected修饰的变量（如test）和带有x:Name的控件（如LabelMain）。

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