.NET 9 MAUI 中创建可复用基础页面的正确方法及派生页面元素不显示问题

嘿，我来帮你分析下你遇到的问题，顺便讲讲MAUI里创建可复用基础页面的正确姿势～

你现在的问题核心是：派生页面直接替换了基页的Content属性，导致基页里的广告Label被覆盖了。咱们一点点拆解：

问题出在哪？ #

你基页的XAML里，原本的Content是那个包含ScrollView和广告Label的Grid布局。但在派生页的XAML里，你直接在<bav:BaseAdvView>标签下写了<ContentView>，这相当于把基页的Content属性替换成了这个新的ContentView。虽然你在构造函数里调用SetContent(Content)把派生的ContentView塞进了基页的ContentPlaceholder，但此时基页的Content已经不是原来的Grid了——它变成了派生的ContentView，所以基页里的广告Label自然就看不到了。

正确的做法：用自定义ContentProperty实现内容注入 #

MAUI里创建可复用基础页面的标准方式是通过自定义ContentProperty，让派生页的内容自动注入到基页的占位符里，而不是替换基页的整个Content。具体步骤如下：

1. 修改基页的代码，添加自定义ContentProperty

给你的BaseAdvView添加[ContentProperty]特性，指定一个自定义属性（比如PageContent），这样派生页的子元素会自动赋值给这个属性，咱们再把它绑定到基页的ContentPlaceholder上：

using Microsoft.Maui.Controls;

[ContentProperty(nameof(PageContent))]
public partial class BaseAdvView : ContentPage
{
    private Advertisement? _adv;

    // 自定义ContentProperty，派生页的内容会自动绑定到这里
    public View PageContent
    {
        get => ContentPlaceholder.Content;
        set => ContentPlaceholder.Content = value;
    }

    public BaseAdvView(Advertisement advertisement)
    {
        InitializeComponent();
        _adv = advertisement;
        // 如果需要动态设置广告文本，这里可以修改Label的内容
        // AdvLabel.Text = _adv?.Content;
    }
}

基页的XAML保持不变（还是那个包含Grid、ScrollView、ContentPlaceholder和Label的布局）：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="LanguageInUse.Views.BaseAdvView"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <ScrollView>
            <ContentView x:Name="ContentPlaceholder" />
        </ScrollView>
        <!-- 可以给Label加个x:Name方便后续动态修改广告内容 -->
        <Label x:Name="AdvLabel" Grid.Row="1" Margin="10" FontSize="Medium" 
               HorizontalOptions="Center" Text="Advertisement" 
               TextColor="Black" VerticalOptions="Center" />
    </Grid>
</ContentPage>

2. 修改派生页的XAML和代码

派生页不需要再套额外的<ContentView>了，直接把你的页面内容写在<bav:BaseAdvView>标签下即可——因为我们定义了ContentProperty是PageContent，所以这些内容会自动注入到基页的ContentPlaceholder里，不会覆盖基页的Grid布局。

派生页XAML：

<?xml version="1.0" encoding="utf-8" ?>
<bav:BaseAdvView x:Class="LanguageInUse.Views.MainPage"
                 xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:bav="clr-namespace:LanguageInUse.Views">

    <!-- 直接写你的页面内容，不需要套ContentView -->
    <VerticalStackLayout Padding="30,0" Spacing="25">
        <Image Aspect="AspectFit" HeightRequest="185" Source="dotnet_bot.png" />
        <!-- 这里可以加其他控件，比如按钮、文本框等 -->
    </VerticalStackLayout>

</bav:BaseAdvView>

派生页代码也简化了，不需要再调用SetContent(Content)，只需要正常调用基类构造函数即可：

public partial class MainPage : BaseAdvView
{
    private readonly MainPageViewModel? _vm;
    private readonly UserSettings _settings;
    int count = 0;

    public MainPage(MainPageViewModel model, Advertisement advertisement, UserSettings settings) 
        : base(advertisement)
    {
        InitializeComponent();
        _vm = model;
        _settings = settings;
        // 其他初始化逻辑
    }
}

额外小提示 #

• 如果你的广告内容是动态的，可以在基页构造函数里通过_adv对象修改Label的文本，比如AdvLabel.Text = _adv?.AdText;
• 这种自定义ContentProperty的方式不仅适用于基础页面，也可以用来创建可复用的自定义控件，是MAUI里组件复用的常用技巧。

内容来源于stack exchange