如何在.NET MAUI中为所有窗口实现统一的页眉和页脚？

给你两种实用的实现方式，都是.NET MAUI里常用的套路：

方式一：自定义基类ContentPage #

这是最直接的做法，先做一个带固定页眉页脚的基页面，所有业务页面都继承它就行。

1. 编写基类页面 #

推荐用XAML来写，布局更直观：
创建BasePage.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"
             x:Class="你的项目命名空间.BasePage">
    <VerticalStackLayout>
        <!-- 全局统一页眉 -->
        <Label Text="我的应用页眉"
               FontSize="20"
               FontAttributes="Bold"
               HorizontalOptions="Center"
               Padding="0,10"/>
        
        <!-- 主内容占位符，子类页面的内容会放到这里 -->
        <ContentView x:Name="MainContentPlaceholder"
                     VerticalOptions="FillAndExpand"/>
        
        <!-- 全局统一页脚 -->
        <Label Text="© 2024 我的应用 保留所有权利"
               FontSize="12"
               HorizontalOptions="Center"
               Padding="0,10"/>
    </VerticalStackLayout>
</ContentPage>

对应的后台代码BasePage.xaml.cs：

public partial class BasePage : ContentPage
{
    public BasePage()
    {
        InitializeComponent();
    }

    // 给子类提供设置主内容的属性
    public View MainContent
    {
        get => MainContentPlaceholder.Content;
        set => MainContentPlaceholder.Content = value;
    }
}

2. 业务页面继承基类 #

比如写个首页HomePage.xaml，直接继承BasePage，然后通过MainContent属性填充自己的内容：

<?xml version="1.0" encoding="utf-8" ?>
<local:BasePage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:你的项目命名空间"
                x:Class="你的项目命名空间.HomePage"
                Title="首页">
    <local:BasePage.MainContent>
        <!-- 这里是首页的具体内容 -->
        <ScrollView Padding="20">
            <VerticalStackLayout>
                <Label Text="欢迎来到首页" FontSize="18" Margin="0,0,0,20"/>
                <Button Text="点击测试" Clicked="Button_Clicked"/>
                <!-- 其他控件随便加 -->
            </VerticalStackLayout>
        </ScrollView>
    </local:BasePage.MainContent>
</local:BasePage>

方式二：使用ControlTemplate（控件模板） #

如果以后需要切换页眉页脚样式，用模板会更灵活，不用改每个页面。

1. 定义全局模板 #

在App.xaml里添加全局可用的控件模板：

<Application.Resources>
    <ControlTemplate x:Key="PageHeaderFooterTemplate">
        <VerticalStackLayout>
            <!-- 页眉 -->
            <Label Text="全局统一页眉"
                   FontSize="20"
                   FontAttributes="Bold"
                   HorizontalOptions="Center"
                   Padding="0,10"/>
            
            <!-- 自动加载页面的内容 -->
            <ContentPresenter Content="{TemplateBinding Content}"
                              VerticalOptions="FillAndExpand"/>
            
            <!-- 页脚 -->
            <Label Text="全局统一页脚"
                   FontSize="12"
                   HorizontalOptions="Center"
                   Padding="0,10"/>
        </VerticalStackLayout>
    </ControlTemplate>
</Application.Resources>

2. 应用模板 #

可以给单个页面直接设置模板：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="你的项目命名空间.SettingPage"
             ControlTemplate="{StaticResource PageHeaderFooterTemplate}">
    <!-- 设置页的内容 -->
    <VerticalStackLayout Padding="20">
        <Label Text="设置页面内容"/>
    </VerticalStackLayout>
</ContentPage>

也可以像方式一那样做个基类，默认应用这个模板，所有子类自动带页眉页脚，省得每个页面都写一遍。

额外技巧 #

如果要动态改页眉页脚的内容（比如根据登录用户显示不同文本），可以把页眉的Text绑定到全局ViewModel的属性，比如：

<Label Text="{Binding GlobalHeaderText}" .../>

然后在全局ViewModel里维护GlobalHeaderText的值，所有页面的页眉就会自动更新。

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