Shell - How to change topbar background color

Hello, I am learning the Shell and I am trying to change only the background color from the top tabs in Android and iOs.

the code:

<Shell 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:viewsHome="clr-namespace:Teste.Views.Home"
       xmlns:views="clr-namespace:Teste.Views"
       x:Class="Teste.AppShell"
       FlyoutBehavior="Disabled">

    <!-- Styles and Resources -->
    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#CCB585</Color>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
                <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 NavigationPrimary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
        </ResourceDictionary>
    </Shell.Resources>

    <Shell.Items>
        <TabBar>
            <Tab Title="Home">
                <Tab.Icon>
                    <FontImageSource FontFamily="Fonts/FontAwesome.ttf#Font Awesome 5 Pro" Glyph="&#xf015;" Size="16"/>
                </Tab.Icon>

                <ShellContent Title="Para você" ContentTemplate="{DataTemplate viewsHome:ParaVocePage}"  />
                <ShellContent Title="Seguindo" ContentTemplate="{DataTemplate viewsHome:SeguindoPage}" />
                <ShellContent Title="Responder" ContentTemplate="{DataTemplate viewsHome:ResponderPage}" />
                <ShellContent Title="Em Alta" ContentTemplate="{DataTemplate viewsHome:EmAltaPage}" />
            </Tab>
            <Tab Title="Tópicos">
                <Tab.Icon>
                    <FontImageSource FontFamily="Fonts/FontAwesome.ttf#Font Awesome 5 Pro" Glyph="&#xf1ea;" Size="16"/>
                </Tab.Icon>

                <ShellContent ContentTemplate="{DataTemplate views:AboutPage}" />
            </Tab>
            ...
        </TabBar>
    </Shell.Items>
</Shell>

Can help me?

Thanks!

Answers

  • bruno_jiddbruno_jidd Member
    edited August 29

    .

  • LandLuLandLu Member, Xamarin Team Xamurai

    You can't separately change the secondary toolbar's background color. If you want to change the whole toolbar's background color you could use Shell.BackgroundColor. It will also change the tabbar's background color if Shell.TabBarBackgroundColor hasn't been set.
    So you need to set Shell.TabBarBackgroundColor to another color value to change the tabbar's background color.

Sign In or Register to comment.