在Xamarin中能否插入双行或多行ToolBar及如何修改其背景色

多行Toolbar实现可行性 #

Xamarin完全支持双行/多行Toolbar的实现，常用的有两种实现方案，你可以根据自己的项目需求选择： #

具体实现步骤 #

方案1：Xamarin.Forms 通用方案（无需自定义渲染器，全平台适配） #

直接通过NavigationPage.TitleView属性替换Toolbar默认的标题区域，自由定义多行布局，适配Android、iOS、UWP全平台，实现成本最低：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourProject.YourPage">
    <!-- 自定义Toolbar标题区域 -->
    <NavigationPage.TitleView>
        <StackLayout Orientation="Vertical" Spacing="3" VerticalOptions="Center">
            <Label Text="主标题" FontSize="16" TextColor="White"/>
            <Label Text="副标题/第二行内容" FontSize="12" TextColor="LightGray"/>
            <!-- 可继续添加更多控件实现3行及以上布局 -->
        </StackLayout>
    </NavigationPage.TitleView>
    
    <!-- 页面原有内容 -->
</ContentPage>

方案2：原生自定义Toolbar（适合深度定制场景） #

如果需要对Toolbar的交互、样式做更精细的控制，可以在对应平台端自定义Toolbar布局，以Android端为例：

1. 安卓项目的Resources/layout目录下创建自定义Toolbar布局

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/custom_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingStart="16dp">
        <TextView
            android:id="@+id/toolbar_main_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="@android:color/white"
            android:text="主标题"/>
        <TextView
            android:id="@+id/toolbar_sub_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="12sp"
            android:textColor="@android:color/darker_gray"
            android:text="第二行内容"/>
    </LinearLayout>
</androidx.appcompat.widget.Toolbar>

2. 在Activity的OnCreate方法中替换默认ActionBar为自定义Toolbar即可。

Toolbar背景色修改方法 #

全局修改所有页面Toolbar背景色 #

在App.xaml的资源字典中添加全局样式即可统一修改：

<Application.Resources>
    <Style TargetType="NavigationPage">
        <Setter Property="BarBackgroundColor" Value="#2385bb"/> <!-- 替换为你需要的颜色 -->
        <Setter Property="BarTextColor" Value="White"/>
    </Style>
</Application.Resources>

单独修改指定页面的Toolbar背景色 #

在对应页面的代码后台中设置即可：

public YourPage()
{
    InitializeComponent();
    // 页面加载时修改当前页面Toolbar背景色
    if (Parent is NavigationPage navPage)
    {
        navPage.BarBackgroundColor = Color.FromHex("#ff5722");
    }
}

注意：如果使用TitleView自定义了Toolbar的标题布局，需要保证自定义布局的背景色和Toolbar背景色一致，避免出现颜色断层的显示问题。

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