.NET MAUI中如何在AppShell顶部添加全局搜索栏及按钮？

针对你需要在所有ShellContent页面顶部共享通用按钮、标签和搜索栏的需求，以下是三种可行的实现方案：

方案一：修复并使用 Shell.TitleView #

你之前使用Shell.TitleView无显示的原因是设置了Shell.NavBarIsVisible="False"，导航栏被隐藏后TitleView也会跟着消失。只需调整导航栏设置，即可实现全局共享头部：

1. 修改AppShell.xaml，恢复导航栏可见性并添加全局TitleView：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="G.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:G"
    Shell.FlyoutBehavior="Disabled">

    <!-- 全局通用头部，所有ShellContent页面自动继承 -->
    <Shell.TitleView>
        <Grid ColumnDefinitions="Auto,*,Auto" Padding="10" BackgroundColor="#f0f0f0">
            <Button Text="菜单" />
            <Label Text="通用标题" HorizontalOptions="Center" FontSize="18" />
            <SearchBar Placeholder="搜索" Grid.Column="2" WidthRequest="200" />
        </Grid>
    </Shell.TitleView>

    <TabBar>
        <Tab>
            <ShellContent
                Title="InventoryPage"
                Route="InventoryPage"
                ContentTemplate="{DataTemplate local:InventoryPage}" />
            <ShellContent
                Title="Home"
                Route="MainPage"
                ContentTemplate="{DataTemplate local:MainPage}" />
        </Tab>
    </TabBar>
</Shell>

2. 若不想显示默认导航栏的标题/返回按钮，可通过样式隐藏：

<Shell.Resources>
    <Style TargetType="NavigationPage">
        <Setter Property="BarTextColor" Value="Transparent" />
        <Setter Property="BackgroundColor" Value="#f0f0f0" />
    </Style>
</Shell.Resources>

方案二：通过AppShell布局嵌套实现独立头部 #

如果完全不想依赖导航栏，可直接在AppShell中用布局将头部和TabBar分离，所有页面会自动渲染在头部下方：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="G.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:G"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False">

    <!-- 用Grid作为根布局，头部占自动高度，TabBar占剩余空间 -->
    <Grid RowDefinitions="Auto,*">
        <!-- 自定义通用头部 -->
        <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Padding="10" BackgroundColor="#f0f0f0">
            <Button Text="返回" />
            <Label Text="全局头部" HorizontalOptions="Center" FontSize="Large" />
            <SearchBar Placeholder="搜索内容" Grid.Column="2" WidthRequest="220" />
        </Grid>

        <!-- 原TabBar放在第二行，页面内容会渲染在这里 -->
        <TabBar Grid.Row="1">
            <Tab>
                <ShellContent
                    Title="InventoryPage"
                    Route="InventoryPage"
                    ContentTemplate="{DataTemplate local:InventoryPage}" />
                <ShellContent
                    Title="Home"
                    Route="MainPage"
                    ContentTemplate="{DataTemplate local:MainPage}" />
            </Tab>
        </TabBar>
    </Grid>
</Shell>

这种方式自定义程度最高，不受平台导航栏样式限制。

方案三：创建基类页面实现灵活共享 #

如果需要个别页面调整头部内容，可创建包含通用头部的基类页面，其他页面继承该基类：

1. 创建基类页面BasePage.xaml：

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    x:Class="G.BasePage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">

    <Grid RowDefinitions="Auto,*">
        <!-- 通用头部 -->
        <Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto" Padding="10" BackgroundColor="#f0f0f0">
            <Button Text="返回" Clicked="BackButton_Clicked" />
            <Label x:Name="PageTitleLabel" Text="默认标题" HorizontalOptions="Center" />
            <SearchBar Placeholder="搜索" Grid.Column="2" />
        </Grid>

        <!-- 子类页面内容容器 -->
        <ContentPresenter Grid.Row="1" x:Name="MainContent" />
    </Grid>
</ContentPage>

2. 基类后台代码BasePage.xaml.cs：

namespace G;

public partial class BasePage : ContentPage
{
    public static readonly BindableProperty PageTitleProperty = BindableProperty.Create(
        nameof(PageTitle), typeof(string), typeof(BasePage), "默认标题");

    public string PageTitle
    {
        get => (string)GetValue(PageTitleProperty);
        set => SetValue(PageTitleProperty, value);
    }

    public BasePage()
    {
        InitializeComponent();
        PageTitleLabel.SetBinding(Label.TextProperty, new Binding(nameof(PageTitle), source: this));
    }

    private void BackButton_Clicked(object sender, EventArgs e)
    {
        Navigation.PopAsync();
    }
}

3. 子类页面（如MainPage）继承基类：

<?xml version="1.0" encoding="UTF-8" ?>
<local:BasePage
    x:Class="G.MainPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:G"
    PageTitle="首页">

    <!-- 直接编写页面内容，会自动嵌入基类的ContentPresenter -->
    <VerticalStackLayout>
        <Label Text="首页内容" FontSize="Large" HorizontalOptions="Center" />
    </VerticalStackLayout>
</local:BasePage>

这种方式支持子类通过绑定修改头部标题，或重写方法调整头部逻辑。

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