如何使用 Xamarin.Forms 中的主题更改 TabbedPage 栏的背景颜色？

Question

我是 Xamarin.Forms 的新手，遇到了一个问题。这是针对我的问题的类似演示。

我按照一些资源在App.xaml中设置了主题和样式，源代码如下：

对于theme.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary 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="QuickDemo.Theme">
    <!--Orange-->
    <Color x:Key="NavigationBarColor">#fb8c00</Color>
    <!--Gray-->
    <Color x:Key="PageBackgroundColor">#f5f5f5</Color>
    <Color x:Key="PrimaryColor">#fb8c00</Color>
    <Color x:Key="SecondaryColor">White</Color>
    <Color x:Key="PrimaryTextColor">Black</Color>
    <Color x:Key="SecondaryTextColor">Black</Color>
    <!--Dark Gray-->
    <Color x:Key="TertiaryTextColor">#383838</Color>
    <Color x:Key="TransparentColor">Transparent</Color>
    
</ResourceDictionary>

对于App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application 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="QuickDemo.App">
    <Application.Resources>
        <ResourceDictionary Source="Theme.xaml">
            <!--Page Style-->
            <Style TargetType="NavigationPage">
                <Setter Property="BarBackgroundColor"
                        Value="{DynamicResource NavigationBarColor}"/>
                <Setter Property="BarTextColor"
                        Value="{DynamicResource SecondaryColor}"/>
                <Setter Property="BackgroundColor"
                        Value="{DynamicResource PageBackgroundColor}"/>
            </Style>

            <Style TargetType="ContentPage">
                <Setter Property="BackgroundColor"
                        Value="{DynamicResource PageBackgroundColor}"/>
            </Style>

            <Style TargetType="TabbedPage">
                <Setter Property="BarBackgroundColor"
                        Value="{DynamicResource NavigationBarColor}"/>
                <Setter Property="BarTextColor"
                        Value="{DynamicResource SecondaryColor}"/>
                <Setter Property="BackgroundColor"
                        Value="{DynamicResource PageBackgroundColor}"/>

            </Style>
        </ResourceDictionary>

    </Application.Resources>
</Application>

对于MasterDetailPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage 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="QuickDemo.MasterDetailPageDemo"
             xmlns:pages="clr-namespace:QuickDemo">
  <MasterDetailPage.Master>
    <pages:MasterDetailPageMaster x:Name="MasterPage" />
  </MasterDetailPage.Master>
  <MasterDetailPage.Detail>
    <NavigationPage>
      <x:Arguments>
        <pages:MasterDetailPageDetail />
      </x:Arguments>
    </NavigationPage>
  </MasterDetailPage.Detail>
</MasterDetailPage>

并且我将详细信息页面更改为标签页，MasterDetailPageDetail.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage 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"
             xmlns:local="clr-namespace:QuickDemo"          
             x:Class="QuickDemo.MasterDetailPageDetail"
             Title="Detail">
    <TabbedPage.Children>
        <NavigationPage Title="Tab One">
            <x:Arguments>
                <local:FirstPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage Title="Tab Two">

        </NavigationPage>
    </TabbedPage.Children>
  
</TabbedPage>

当我运行模拟器时，我得到了这个结果：

导航页的主题好像可以用，为什么标签页的主题不行呢？如果我在页面级别设置颜色，我发现它有效：

<TabbedPage 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"
             xmlns:local="clr-namespace:QuickDemo"          
             x:Class="QuickDemo.MasterDetailPageDetail"
             Title="Detail"
            BarBackgroundColor="{StaticResource PrimaryColor}">

非常感谢任何帮助或提示。我希望我的应用程序中的所有选项卡式页面都可以利用该主题。提前致谢。

Answer 1

您应该在样式中添加 ApplyToDerivedTypes = "True"，因为您的 MasterDetailPageDetail 派生自 TabbedPage。

例如：

    <Style TargetType="TabbedPage"                
           ApplyToDerivedTypes="True">
        
        <Setter Property="BarBackgroundColor"
                Value="Green"/>
        <Setter Property="BarTextColor"
                Value="Pink"/>
    </Style>

参考：style.applytoderivedtypes

create-resources-in-xaml

如何使用 Xamarin.Forms 中的主题更改 TabbedPage 栏的背景颜色？

How to change the TabbedPage bar background color using a theme in Xamarin.Forms?

xamarin.android

xamarin

xamarin.forms

tabbedpage