如何无需大量自定义renderers/handlers创建带固定控件的Shell导航Master Page

核心思路 #

直接利用.NET MAUI Shell的原生导航能力，将Shell作为顶部可变内容区域，底部固定控件放在根布局中，全程无需自定义渲染器或处理器，只用原生组件就能实现类似新版Microsoft Media Player的布局。

具体实现步骤 #

1. 构建根页面布局
   创建根页面，采用VerticalStackLayout作为容器，分为上下两个区域：

   • 上部：嵌入Shell控件，设置VerticalOptions="FillAndExpand"以占满剩余空间，承载Flyout导航和切换页面
   • 下部：放置初始化后不再变化的固定控件（比如媒体播放栏），设置固定高度

   <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:YourAppName"
                x:Class="YourAppName.MainPage">
       <VerticalStackLayout Spacing="0">
           <!-- 顶部可变内容：Shell导航区域 -->
           <Shell VerticalOptions="FillAndExpand">
               <FlyoutItem Title="首页" Icon="home_icon.png">
                   <ShellContent ContentTemplate="{DataTemplate local:HomePage}" />
               </FlyoutItem>
               <FlyoutItem Title="我的媒体库" Icon="library_icon.png">
                   <ShellContent ContentTemplate="{DataTemplate local:MediaLibraryPage}" />
               </FlyoutItem>
               <FlyoutItem Title="播放列表" Icon="playlist_icon.png">
                   <ShellContent ContentTemplate="{DataTemplate local:PlaylistPage}" />
               </FlyoutItem>
           </Shell>
   
           <!-- 底部固定控件区域 -->
           <Border BackgroundColor="#1E1E1E" HeightRequest="70" Padding="16">
               <HorizontalStackLayout VerticalOptions="Center" Spacing="20">
                   <Button Text="⏮️" BackgroundColor="Transparent" TextColor="White" FontSize="20" />
                   <Button Text="▶️" BackgroundColor="Transparent" TextColor="White" FontSize="24" />
                   <Button Text="⏭️" BackgroundColor="Transparent" TextColor="White" FontSize="20" />
                   <Label Text="正在播放：示例曲目" TextColor="White" HorizontalOptions="EndAndExpand" />
               </HorizontalStackLayout>
           </Border>
       </VerticalStackLayout>
   </ContentPage>
   

2. 默认导航行为适配
   点击Flyout Item时，Shell会自动切换内部的ShellContent页面，底部固定控件不会被刷新或替换，完全满足“仅上部视图变更”的需求。如果需要调整Flyout样式，直接修改Shell的FlyoutHeader、FlyoutBackgroundColor等属性即可，无需额外自定义逻辑。

3. 页面切换时的状态更新（可选）
   如果需要在页面切换时同步更新底部控件的状态（比如显示当前页面关联的媒体信息），可以订阅Shell的Navigated事件：

   public MainPage()
   {
       InitializeComponent();
       Shell.Current.Navigated += OnShellNavigated;
   }
   
   private void OnShellNavigated(object sender, ShellNavigatedEventArgs e)
   {
       // 根据当前页面路径更新底部控件
       var currentPage = e.Current.Location.OriginalString;
       if (currentPage.Contains("MediaLibraryPage"))
       {
           // 示例：更新底部播放栏文本
           // PlaybackLabel.Text = "正在播放：媒体库推荐";
       }
   }
   

方案优势 #

• 完全基于MAUI原生组件，无平台特定代码，适配iOS、Android、Windows等全平台
• 复用Shell成熟的导航系统，无需自行实现页面切换、Flyout菜单等复杂逻辑
• 布局结构简洁直观，后期维护成本低

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