Forum Libraries, Components, and Plugins

Shell - How to change topbar background color

bruno_jiddbruno_jidd Member

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 2019

    .

  • 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.

  • saiyamjain143saiyamjain143 Member
    edited January 9

    Can we change the title color of the second tab?

  • DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

    We will be making this easier to do directly in the Shell API, but for now this video shows the details of how to do it.

Sign In or Register to comment.