Как изменить цвет фона панели TabbedPage с помощью темы в Xamarin.Forms?

Я новичок в 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}">

Я очень ценю любую помощь или подсказки. Я хотел бы, чтобы все страницы с вкладками в моем приложении могли использовать эту тему. Заранее спасибо.


person Serena    schedule 08.07.2020    source источник


Ответы (1)


Вы должны добавить ApplyToDerivedTypes = "True" в стиль, поскольку ваш MasterDetailPageDetail является производным от TabbedPage.

Например:

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

См .: style.applytodehibitedtypes < / а>

create-resources- in-xaml

person Jack Hua    schedule 08.07.2020
comment
Большое спасибо! еще один вопрос: я прочитал create-resources-in-xaml, кажется, нам также нужно добавить ApplyToDerivedTypes = True на странице содержимого при использовании темы. Так почему же он работает прямо на странице навигации без установки этого свойства? - person Serena; 08.07.2020
comment
Потому что, когда вы используете страницу навигации, вы используете ее напрямую вместо MyNavigationPage: NavigationPage. - person Jack Hua; 09.07.2020