Xamarin.Forms中如何同时显示基类与派生类XAML的GUI元素？

你遇到的核心问题是子类设置Content属性时会完全覆盖父类的Content——ContentPage的Content是单一属性，赋值后会直接替换掉原来的内容，所以现在你的FilterPage设置Content后，把SubContentPage里的标题栏UI给覆盖了，导致只能看到其中一方的内容。

下面给你两种可行的解决方案，都能实现父类和子类UI同时显示：

方法一：给父类添加子类内容占位区域（代码+XAML结合） #

这种方式适合需要在父类后台代码中对子类内容做额外逻辑处理的场景：

1. 修改SubContentPage.xaml，添加占位区域 #

把原来的布局改成包含固定标题栏+子类内容占位的结构：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="solna_app.GUI.Pages.SubContentPage">
    <ContentPage.Content>
        <StackLayout>
            <!-- 父类固定UI：标题栏 -->
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Image x:Name="BackIcon" HorizontalOptions="Start" Grid.Row="0" />
                <Label x:Name="TitleLabel" HorizontalOptions="Center" FontSize="Large" FontAttributes="Bold" TextColor="Black" Grid.Row="0" />
            </Grid>
            
            <!-- 子类内容的占位容器 -->
            <ContentView x:Name="ChildContentContainer" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

2. 在SubContentPage后台添加自定义属性 #

让子类可以通过这个属性把自己的内容注入到占位容器中：

public partial class SubContentPage : ContentPage
{
    // 定义可绑定属性，用于接收子类的内容
    public static readonly BindableProperty ChildContentProperty =
        BindableProperty.Create(
            nameof(ChildContent), 
            typeof(View), 
            typeof(SubContentPage), 
            propertyChanged: OnChildContentChanged);

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

    private static void OnChildContentChanged(BindableObject bindable, object oldValue, object newValue)
    {
        if (bindable is SubContentPage page && newValue is View content)
        {
            page.ChildContentContainer.Content = content;
        }
    }

    public SubContentPage()
    {
        InitializeComponent();
    }
}

3. 修改FilterPage.xaml，使用自定义属性替换Content #

不再设置Content，而是设置我们刚定义的ChildContent：

<?xml version="1.0" encoding="utf-8" ?>
<d:SubContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                  xmlns:d="clr-namespace:solna_app.GUI.Pages;assembly=solna_app" 
                  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                  mc:Ignorable="d" 
                  x:Class="solna_app.GUI.Pages.FilterPage">
    <!-- 用ChildContent替代Content，避免覆盖父类UI -->
    <d:SubContentPage.ChildContent>
        <StackLayout>
            <Label x:Name="SearchLabel" Text="Search keyword" TextColor="Black" FontSize="Large" Margin="10,10,0,0" />
            <Editor x:Name="SearchEditor" Placeholder="Type a keyword" PlaceholderColor="Gray" Margin="10,10,10,0" HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
    </d:SubContentPage.ChildContent>
</d:SubContentPage>

方法二：使用ControlTemplate（纯XAML实现） #

这种方式更简洁，适合不需要后台逻辑的场景，利用模板复用父类UI：

1. 定义ControlTemplate（推荐放在App.xaml的Resources中） #

把父类的固定UI放到模板里，用ContentPresenter来承载子类的内容：

<Application.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="SubContentPageTemplate">
            <StackLayout>
                <!-- 父类固定UI -->
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Image x:Name="BackIcon" HorizontalOptions="Start" Grid.Row="0" />
                    <Label x:Name="TitleLabel" HorizontalOptions="Center" FontSize="Large" FontAttributes="Bold" TextColor="Black" Grid.Row="0" />
                </Grid>
                <!-- 自动加载子类的Content -->
                <ContentPresenter />
            </StackLayout>
        </ControlTemplate>
    </ResourceDictionary>
</Application.Resources>

2. 修改SubContentPage.xaml，应用模板 #

去掉原来的Content，直接设置ControlTemplate：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="solna_app.GUI.Pages.SubContentPage"
             ControlTemplate="{StaticResource SubContentPageTemplate}">
</ContentPage>

3. FilterPage.xaml保持原有写法即可 #

现在子类可以像之前直接继承ContentPage一样设置Content，模板里的ContentPresenter会自动把子类内容显示在父类UI下方：

<?xml version="1.0" encoding="utf-8" ?>
<d:SubContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
                  xmlns:d="clr-namespace:solna_app.GUI.Pages;assembly=solna_app" 
                  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                  mc:Ignorable="d" 
                  x:Class="solna_app.GUI.Pages.FilterPage">
    <d:SubContentPage.Content>
        <StackLayout>
            <Label x:Name="SearchLabel" Text="Search keyword" TextColor="Black" FontSize="Large" Margin="10,10,0,0" />
            <Editor x:Name="SearchEditor" Placeholder="Type a keyword" PlaceholderColor="Gray" Margin="10,10,10,0" HorizontalOptions="CenterAndExpand"/>
        </StackLayout>
    </d:SubContentPage.Content>
</d:SubContentPage>

两种方法都能完美解决你的问题，核心思路就是避免子类Content覆盖父类Content，而是让两者的UI合并展示。

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