MAUI中如何在Shell右侧添加按钮并导航至ProfilePage？

1. 在Shell右侧添加Profile按钮（保留默认标题） #

不要自定义Shell.TitleView（这会替换默认标题栏导致标题丢失），直接使用Shell的ToolbarItems集合添加按钮，这样按钮会自动出现在标题栏右侧，且保留默认标题：

修改Shell的XAML代码： #

<Shell
    x:Class="Mandatos.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:MyProject.Views"
    FlyoutBehavior="Flyout">

    <!-- 添加右侧Profile按钮 -->
    <Shell.ToolbarItems>
        <ToolbarItem Text="Profile" 
                     Order="Primary"  <!-- 按钮放在标题栏右侧的Primary区域 -->
                     Priority="0"    <!-- 控制按钮顺序，0表示最右侧 -->
                     Clicked="ProfileToolbarItem_Clicked" />
    </Shell.ToolbarItems>

    <!-- 原有Flyout页面 -->
    <FlyoutItem Title="First" >
        <ShellContent ContentTemplate="{DataTemplate views:FirstPage}" />
    </FlyoutItem>

    <FlyoutItem Title="Second">
        <ShellContent ContentTemplate="{DataTemplate views:SecondPage}" />
    </FlyoutItem>

    <!-- 注册ProfilePage路由（隐藏在Flyout外） -->
    <ShellContent Route="ProfilePage" 
                  ContentTemplate="{DataTemplate views:ProfilePage}" 
                  IsVisible="False" />
</Shell>

关键说明： #

• Order="Primary"：指定按钮属于标题栏的主操作区域，在iOS/Android上默认显示在右侧。
• Priority="0"：数值越小，按钮越靠右（如果有多个ToolbarItem，数值小的排在更右侧）。
• 注册ProfilePage的路由并设置IsVisible="False"，避免该页面出现在Flyout菜单中。

2. 处理点击事件导航到ProfilePage #

方式1：直接使用Clicked事件（代码后台） #

在AppShell.xaml.cs中实现点击逻辑：

private async void ProfileToolbarItem_Clicked(object sender, EventArgs e)
{
    // 使用Shell内置的导航方法跳转到ProfilePage
    await Shell.Current.GoToAsync(nameof(ProfilePage));
}

方式2：使用ICommand（MVVM模式） #

如果采用MVVM架构，可在Shell的ViewModel中定义命令：

using Microsoft.Maui.Controls;
using System.Windows.Input;

public class AppShellViewModel
{
    public ICommand NavigateToProfileCommand { get; }

    public AppShellViewModel()
    {
        NavigateToProfileCommand = new Command(async () => 
        {
            await Shell.Current.GoToAsync(nameof(ProfilePage));
        });
    }
}

然后在Shell的XAML中绑定ViewModel和命令：

<Shell
    ...
    xmlns:viewmodels="clr-namespace:MyProject.ViewModels"
    BindingContext="{StaticResource AppShellViewModel}">

    <Shell.Resources>
        <viewmodels:AppShellViewModel x:Key="AppShellViewModel" />
    </Shell.Resources>

    <Shell.ToolbarItems>
        <ToolbarItem Text="Profile" 
                     Order="Primary" 
                     Priority="0"
                     Command="{Binding NavigateToProfileCommand}" />
    </Shell.ToolbarItems>

    <!-- 其他页面定义 -->
</Shell>

额外说明： #

如果没有通过ShellContent注册路由，也可以在App.xaml.cs的OnStart方法中手动注册：

protected override void OnStart()
{
    Routing.RegisterRoute(nameof(ProfilePage), typeof(ProfilePage));
}

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