MAUI中如何在AppShell标签页添加右侧用户工具栏图标

为什么ContentPage的ToolbarItems不生效？ #

因为Shell的导航系统会接管顶部导航栏的渲染逻辑，普通ContentPage中定义的ToolbarItems默认不会集成到Shell的标签页导航栏里，所以你之前的尝试看不到效果。

两种可行的解决方案 #

方案一：在AppShell中添加全局ToolbarItem

直接在AppShell的顶层节点下定义Shell.ToolbarItems，这个配置会自动应用到所有标签页对应的页面：

<Shell x:Class="YourApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourApp">

    <!-- 全局工具栏项 -->
    <Shell.ToolbarItems>
        <ToolbarItem Icon="user_icon.png"
                     Order="Primary"
                     Priority="100" <!-- 高优先级让图标靠右侧显示 -->
                     Clicked="OnUserIconClicked"/>
    </Shell.ToolbarItems>

    <!-- 你的标签页配置 -->
    <TabBar>
        <Tab x:Name="tabApprovals" Title="审批">
            <ShellContent ContentTemplate="{DataTemplate local:ApprovalsPage}" />
            <ShellContent ContentTemplate="{DataTemplate local:AnotherApprovalPage}" />
        </Tab>
        <!-- 其他标签页 -->
    </TabBar>
</Shell>

• Priority值越大，ToolbarItem在导航栏的位置越靠右
• 确保图标文件user_icon.png放在Resources/Images目录，且在项目文件中设置Build Action为MauiImage

方案二：用Shell.TitleView自定义全局导航栏

如果需要更灵活的布局（比如调整图标大小、添加额外元素），可以通过Shell.TitleView自定义整个导航栏：

<Shell x:Class="YourApp.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourApp">

    <!-- 自定义全局导航栏 -->
    <Shell.TitleView>
        <Grid HorizontalOptions="FillAndExpand">
            <!-- 左侧显示页面标题（可选） -->
            <Label Text="{Binding Title}"
                   HorizontalOptions="Start"
                   VerticalOptions="Center"
                   FontSize="Title"/>
            <!-- 右侧用户图标 -->
            <ImageButton Source="user_icon.png"
                         HorizontalOptions="End"
                         VerticalOptions="Center"
                         WidthRequest="30"
                         HeightRequest="30"
                         Clicked="OnUserIconClicked"/>
        </Grid>
    </Shell.TitleView>

    <!-- 你的标签页配置 -->
    <TabBar>
        <Tab x:Name="tabApprovals" Title="审批">
            <ShellContent ContentTemplate="{DataTemplate local:ApprovalsPage}" />
            <ShellContent ContentTemplate="{DataTemplate local:AnotherApprovalPage}" />
        </Tab>
        <!-- 其他标签页 -->
    </TabBar>
</Shell>

这种方式可以完全控制导航栏的布局，适配更复杂的需求。

页面级别的自定义（可选） #

如果某个页面需要隐藏或修改全局的用户图标，只需在对应ContentPage的XAML或代码中重写Shell.TitleView即可：

<ContentPage ...>
    <Shell.TitleView>
        <!-- 这里放该页面专属的导航栏内容，或者设为空隐藏 -->
    </Shell.TitleView>
</ContentPage>

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