Xamarin Forms-颜色如何在iOS的导航栏上工作

Question

我正在尝试为一个简单的XF应用程序设置BarBackgroundColor和BarTextColor，并且不了解输出。代码后面显示了我所看到的图片，所有代码都可以下载here。

我在下面设置了BarBackgroundColor，BarTextColor和BackgroundColor。似乎唯一设置的颜色（来自附件图像）是Color.Blue BarBackgroundColor。导航栏和状态栏中的文本是否应该为白色？为什么页面的其余部分不红色？

App.xaml.cs

public App()
{
    InitializeComponent();

    var navPage = new NavigationPage(new MainPage());
    navPage.BarBackgroundColor = Color.Blue; 
    navPage.BarTextColor = Color.White;
    navPage.BackgroundColor = Color.Red;

    MainPage = navPage;
}

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="SampleApp.MainPage">

    <NavigationPage.TitleView>
        <StackLayout HorizontalOptions="Center" 
                     VerticalOptions="Center">
            <Label Text="Page Title" />
        </StackLayout>
    </NavigationPage.TitleView>

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

这是我得到的输出。

Answer 1

导航栏和状态栏中的文本是否应该为白色？

是的，如果共享代码，则不会。

• First，我们将检查如何在导航栏中设置文本颜色。

因为如下在导航栏中设置了自定义标题视图：

<NavigationPage.TitleView>
    <StackLayout HorizontalOptions="Center" 
                 VerticalOptions="Center">
        <Label Text="Page Title" />
    </StackLayout>
</NavigationPage.TitleView>

然后代码navPage.BarTextColor = Color.White;将不起作用。原因是，您在ContentPage中设置了自定义标题视图，而ContentPage覆盖了导航栏文本的效果。

如果要显示Naviagtion标题的白色，则有两种基于共享代码的方法。

一个是：在自定义标题视图中为标签设置TextColor。

<NavigationPage.TitleView>
    <StackLayout HorizontalOptions="Center" 
                 VerticalOptions="Center">
        <Label Text="Page Title" TextColor = "White" />
    </StackLayout>
</NavigationPage.TitleView>

另一个是：使用原始导航栏标题。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="SampleApp.MainPage"
             Title="Page Title"> // Adding title text here

    <StackLayout>
        <!-- Place new controls here -->
        <Label Text="Welcome to Xamarin.Forms!" 
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>

</ContentPage>

然后代码navPage.BarTextColor = Color.White;将适用于导航栏的文本。

• 第二，我们将检查如何在状态栏中设置文本颜色。

在这里您需要进入iOS解决方案文件夹，然后使用Xml Editor打开Info.plist文件，如下所示：

然后添加键UIViewControllerBasedStatusBarAppearance并将其值设置为false，如下所示。

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

保存和重新编译项目，现在代码navPage.BarTextColor = Color.White;适用于状态栏的文本颜色。

为什么页面其余部分不红色？

此问题对于Android应该有所不同。如果在Android上运行navPage.BackgroundColor = Color.Red;，则可以运行。但是在iOS中则无法运行。

原因是，Android和iOS之间的导航控制器不同。导航栏只是Android中的一个栏，但是导航栏可以是iOS中的整个页面视图。这意味着，如果在Android中将背景色设置为NavigationPage，则可以在Navigation Page和ContentPage中使用。但是，在iOS中，它只能在“导航”页面中工作。如果“希望内容”页面显示不同，则应在“内容”页面中单独设置。

因此，可以在iOS背景色中进行如下设置。

// //在这里添加背景色可以使用

<StackLayout>
    <!-- Place new controls here -->
    <Label Text="Welcome to Xamarin.Forms!" 
           HorizontalOptions="Center"
           VerticalOptions="CenterAndExpand" />
</StackLayout>

最终效果如下：