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

Question

I am new to Xamarin.Forms and met an issue. Here is a similar demo for my question.

I followed some resources to set the theme and style in the App.xaml, source code as follow:

For 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>

For 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>

For 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>

And I changed the detail page to a tabbedpage, 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>

When I run the emulator, I got this result:

It seems the theme for navigation page is working, but why it doesn't work for the tabbed page then? I found it work if I set the color on page level:

<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}">

I really appreciate any help or hints. I would like all the tabbed pages in my app can take advantage of the theme. Thanks in advance.

Jack Hua Jack Hua · Accepted Answer · 2020-07-08T06:18:04

You should add ApplyToDerivedTypes = "True" in the style as your MasterDetailPageDetail is Derived from TabbedPage.

For example:

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

Refer : style.applytoderivedtypes

create-resources-in-xaml

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

1 Answers