MAUI怎么实现自定义导航栏 MAUI Shell TitleView用法-C#.Net教程-PHP中文网

MAUI怎么实现自定义导航栏 MAUI Shell TitleView用法

星降

发布： 2025-12-18 10:12:58

原创

342人浏览过

MAUI自定义导航栏的核心是Shell.TitleView，它允许用任意XAML内容完全替换默认标题栏；需确保页面为Shell子页面，TitleView必须是ContentPage直接子元素，支持绑定与高度控制。

maui怎么实现自定义导航栏 maui shell titleview用法

MAUI 自定义导航栏的核心：Shell.TitleView

MAUI 中实现自定义导航栏，最标准、推荐的方式就是用 Shell.TitleView。它允许你完全替换默认的标题栏区域（包括标题文字、返回按钮等），用任意 XAML 内容（比如 StackLayout、Grid、Image、Button 等）来构建自己的导航栏外观和交互。

启用 TitleView 前要确认 Shell 结构

确保你的页面是 Shell 的子页面（即在 AppShell.xaml 中通过 FlyoutItem 或 TabBar 导航到该页），否则 TitleView 不生效。页面本身不需要继承 ShellContent，而是作为 ContentPage 放在 ShellContent.ContentTemplate 里。

AppShell.xaml 中类似：<shellcontent contenttemplate="{DataTemplate local:MyPage}"></shellcontent>
MyPage.xaml 是普通 ContentPage，顶部加上 Shell.TitleView 即可生效

在页面中使用 TitleView 的基本写法

直接在 ContentPage 根元素内添加 Shell.TitleView，里面放你想要的 UI：

移乐AI

AI一键生成、处理各种图片

211

查看详情

<ContentPage ...>
  <Shell.TitleView>
    <Grid BackgroundColor="LightBlue" Padding="10">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>
      <Button Text="←" Command="{Binding GoBackCommand}" Grid.Column="0"/>
      <Label Text="我的页面" HorizontalOptions="Center" Grid.Column="1"/>
      <Button Text="⋯" Grid.Column="2"/>
    </Grid>
  </Shell.TitleView>
<p><!-- 页面主体内容 -->
<VerticalStackLayout Padding="20">
<Label Text="页面内容"/>
</VerticalStackLayout>
</ContentPage>

登录后复制

注意：Shell.TitleView 必须是 ContentPage 的直接子元素，不能嵌套在其他布局里；它不会影响页面主体内容的布局位置，系统会自动为 TitleView 预留顶部空间。

常用技巧与注意事项

高度控制：TitleView 默认高度跟随平台（iOS 约 44，Android 约 56），如需固定高度，给外层容器加 HeightRequest，但建议优先适配平台习惯
返回逻辑：系统返回按钮会被隐藏，需手动绑定命令或调用 Shell.GoToAsync("..") 实现返回
状态栏适配：iOS 上 TitleView 默认不覆盖状态栏；如需融合，设置 Shell.NavBarIsVisible="False" 并自行处理全屏导航栏（更复杂，非必需）
动态更新：TitleView 支持绑定，比如 <label text="{Binding PageTitle}"></label>，配合 ViewModel 更新标题