locked
Can't change color Shell bar RRS feed

  • Question

  • User346183 posted

    I'm working with shell template at the beginning it comes with "TabBar" and I've replaced them with "FlyoutItem" but when I did that the color of my NavBar changed to blue again, no matter how many times I change the color it remains in blue.

    This works fine: `

    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#F87412</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>
    
    
    
    <!-- Your Pages -->
    <TabBar>
        <Tab Title="Browse" Icon="tab_feed.png">
            <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
        </Tab>
        <Tab Title="About" Icon="tab_about.png">
            <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
        </Tab>
    </TabBar>
    

    `

    This change the NavBar back to blue: `

    <!-- 
        Styles and Resources 
    -->
    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#F87412</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>
    
    <FlyoutItem Title="Nuevo Proyecto">
        <ShellContent Icon="nuevoProyecto.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
    </FlyoutItem>
    <FlyoutItem Title="Proyectos guardados">
        <ShellContent Icon="proyectosGuardados.png" ContentTemplate="{DataTemplate local:AboutPage}" />
    </FlyoutItem>
    <FlyoutItem Title="Contáctanos">
        <ShellContent Icon="contactanos.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
    </FlyoutItem>
    <FlyoutItem Title="Perfil" >
        <ShellContent Icon="profile.png" ContentTemplate="{DataTemplate local:ItemsPage}" />
    </FlyoutItem>
    

    ` Is this a feature, a bug or something wrong in my code?

    Monday, January 20, 2020 12:48 PM

Answers

  • User382871 posted

    I've replaced them with "FlyoutItem"... the color it remains in blue. Because you only set the color style for the TabBar and it'll only work for TabBar. To fix this, add the line of code to style the ShellItem.

    Check the code: <Shell.Resources> <ResourceDictionary> <Color x:Key="NavigationPrimary">#F87412</Color> <Style x:Key="BaseStyle" TargetType="Element"> ... </Style> <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" /> <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" /> </ResourceDictionary> </Shell.Resources>

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, January 20, 2020 1:46 PM