如何在MAUI中自定义顶部导航栏或ActionBar

一、用Shell的ToolbarItems指定显示位置 #

默认ToolbarItems会归入Flyout菜单，但通过设置Order和Priority属性，可让按钮直接显示在ActionBar（Shell顶部导航栏）右侧：

在目标ContentPage的XAML中添加：

<ContentPage.ToolbarItems>
    <!-- 设置按钮 -->
    <ToolbarItem Text="设置" 
                 IconImageSource="settings_icon.png"
                 Order="Primary" 
                 Priority="0"
                 Clicked="Settings_Clicked"/>
    <!-- 注销按钮 -->
    <ToolbarItem Text="注销" 
                 IconImageSource="logout_icon.png"
                 Order="Primary" 
                 Priority="1"
                 Clicked="Logout_Clicked"/>
</ContentPage.ToolbarItems>

参数说明：

• Order="Primary"：强制按钮显示在导航栏主区域（右侧），不会进入Flyout
• Priority：控制按钮排列顺序，数值越小越靠左

后台代码实现点击逻辑：

private void Settings_Clicked(object sender, EventArgs e)
{
    // 此处写打开设置页面的逻辑
}

private void Logout_Clicked(object sender, EventArgs e)
{
    // 此处写注销账号的逻辑
}

二、完全自定义ActionBar布局 #

如果需要更灵活的样式（比如自定义标题、添加多控件布局），可以替换Shell的默认导航栏模板：

在AppShell.xaml中全局设置自定义标题栏：

<Shell.TitleView>
    <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="Center">
        <!-- 自定义标题 -->
        <Label Text="我的应用" FontSize="Large" FontAttributes="Bold" HorizontalOptions="StartAndExpand"/>
        <!-- 设置按钮 -->
        <Button Text="设置" Clicked="Settings_Clicked" Margin="0,0,10,0"/>
        <!-- 注销按钮 -->
        <Button Text="注销" Clicked="Logout_Clicked" Margin="0,0,10,0"/>
    </StackLayout>
</Shell.TitleView>

如果只想给单个页面设置自定义标题栏，直接在对应ContentPage的XAML中添加Shell.TitleView即可，优先级高于全局设置。

三、Android原生ActionBar自定义（进阶） #

如果需要原生级别的调整，可在MAUI/Xamarin.Android项目中直接操作原生ActionBar：

在页面的OnAppearing方法中添加：

protected override void OnAppearing()
{
    base.OnAppearing();
    var activity = Microsoft.Maui.Controls.Platform.CurrentActivity;
    if (activity?.ActionBar != null)
    {
        // 启用自定义视图
        activity.ActionBar.SetDisplayShowCustomEnabled(true);
        // 加载自定义布局
        var customView = LayoutInflater.FromContext(activity).Inflate(Resource.Layout.CustomActionBar, null);
        // 设置为ActionBar视图
        activity.ActionBar.SetCustomView(customView);
        
        // 绑定按钮点击事件
        var settingsBtn = customView.FindViewById<Button>(Resource.Id.settings_btn);
        var logoutBtn = customView.FindViewById<Button>(Resource.Id.logout_btn);
        settingsBtn.Click += Settings_Clicked;
        logoutBtn.Click += Logout_Clicked;
    }
}

对应的Android布局文件CustomActionBar.axml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="Horizontal"
    android:gravity="center_vertical">

    <TextView
        android:id="@+id/title_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的应用"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/settings_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="设置"
        android:marginRight="10dp"/>

    <Button
        android:id="@+id/logout_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="注销"
        android:marginRight="10dp"/>
</LinearLayout>

内容的提问来源于stack exchange，提问作者Billy Jabonete Manoguid