Xamarin Forms 控制标题栏的颜色/标题答案

【问题标题】：Xamarin Forms control the color/title of the header barXamarin Forms 控制标题栏的颜色/标题
【发布时间】：2017-05-28 04:15:46
【问题描述】：

我使用 Xamarin Forms 创建了以下表单。我画了一个红色矩形来突出问题区域。我需要标题中的蓝色为不同颜色并显示标题。

这是我试图近似的。请忽略后退箭头和汉堡菜单在右侧的事实（顺便说一句，MasterDetail 可以将汉堡放在右侧和左侧吗？）。

以下代码是我用来创建它的代码。我将我的 MainPage（具有 ListView）嵌入到 NavigationPage 中。然后我将 MasterDetailPage 的 Detail 页面设置为上述 NavigationPage。在此处设置 BackgroundColor 属性不起作用。请注意 Title 属性也不起作用。

如何更改标题背景的颜色和标题？

        var navPage = new NavigationPage(new MainPage());

        App.Current.MainPage = new MasterDetailPage
        {
            BackgroundColor = Color.FromHex("#174873"),
            Title = "MY DRIVES",
            Master = new MenuPage()
            {
                Title = "Master Page Title"
            },
            Detail = navPage
        };

【问题讨论】：

标签： xamarin xamarin.forms

【解决方案1】：

设置NavigationPage 的BarBackgroundColor。你可以做这样的事情（在最基本的例子意义上）：

        var nav = new NavigationPage
        {
            Title = "Detail"
        };
        nav.PushAsync(new ContentPage() { Title = "Home" });
        nav.BarBackgroundColor = Color.MediumPurple;

        var mdp = new MasterDetailPage()
        {
            Master = new ContentPage()
            {
                Title = "Master"
            },
            Detail = nav
        };
        MainPage = mdp;

NavigationPage 呈现的ContentPage 的标题将在该栏上显示。

【讨论】：

是的，这行得通。我有一个跟进，我将作为一个新问题提出。谢谢！

【解决方案2】：

如果您想为所有 NavigationPage 元素使用一种颜色，您可以更轻松地做到这一点。为 NavigationPage 的应用添加全局样式

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    x:Class="My.App">
    <Application.Resources>
        <!-- Application resource dictionary -->
        <ResourceDictionary>
          <!-- Pallete -->     
          <Color x:Key="primary-back-title-color">#4a148c</Color>
          <Color x:Key="primary-title-color">#FFFFFF</Color>
          <!-- Pallete-end -->  
          <Style ApplyToDerivedTypes="true" TargetType="NavigationPage">
                <Setter Property="BarBackgroundColor" Value="{StaticResource Key=primary-back-title-color}"/>
                <Setter Property="BarTextColor" Value="{StaticResource Key=primary-title-color}"/>
          </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

现在你可以这样做了：

        void OnTappedProfile(object sender, System.EventArgs e)
        {
            Navigation.PushAsync(new Profile());
        }

Profile 是 ContentPage

【讨论】：

谢谢，这对我有用。这可以用来添加图像，例如导航栏的徽标或背景图像吗？
我认为你可以使用这种方式。如果您需要更多自定义 NavigationPage，则需要使用自定义渲染。您可以尝试使用混合样式和渲染。
这是一个完美的解决方案，ApplyToDerivedTypes="true" 需要在这里突出显示。因为如果您使用没有此值的 ContentPage，它将不起作用。谢谢

【解决方案3】：

BarBackgroundColor 是 NavigationPage 类的一个属性：

public App()
{
    MainPage = new NavigationPage(new Page1())
    {
        BarBackgroundColor = Color.FromHex("#ff5300"),
        BarTextColor = Color.White,
    }; 
}

【讨论】：

【解决方案4】：

别忘了添加

ToolbarResource = Resource.Layout.Toolbar;

到 Android 项目中的 MainActivity，我因此损失了几个小时。

【讨论】：

【解决方案5】：

如果您使用的是 App Shell，您可以编辑 AppShell.xaml 中的预生成样式，编辑 Shell.BackgroundColor 字段：

<Style x:Key="BaseStyle" TargetType="Element">
    <Setter Property="Shell.BackgroundColor" Value="#000" />
    <Setter Property="Shell.ForegroundColor" Value="White" />
    <Setter Property="Shell.TitleColor" Value="White" />
    <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
    <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
    <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
    <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
    <Setter Property="Shell.TabBarTitleColor" Value="White"/>
</Style>

【讨论】：