xamarin/Xamarin.Forms

[Bug] Shell NavBar BackgroundColor

Open

#6,298 opened on May 24, 2019

 (8 comments) (8 reactions) (0 assignees)C# (1,926 forks)batch import
a/shell :shell:e/2 :clock2:help wantedm/high impact :black_large_square:p/iOS 🍎t/bug :bug:up-for-grabs

Repository metrics

Stars
 (5,644 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Description

Navbar Color set using Shell.BackgroundColor is not accurate.

Steps to Reproduce

  1. Set background color of shell using Shell.BackgroundColor

Expected Behavior

Correct color.

Actual Behavior

Color is lighter than actual

Basic Information

  • Version with issue: 4.0.0.425677
  • IDE: Visual Studio for MAC 8.0.7
  • Platform Target Frameworks:
    • iOS: 12.2
<Style x:Key="BaseStyle"
           ApplyToDerivedTypes="True"
           TargetType="Element">
        <Setter Property="Shell.FlyoutBackgroundColor"
                Value="White" />
        <Setter Property="Shell.BackgroundColor"
                Value="#2f353a" />
        <Setter Property="Shell.ForegroundColor"
                Value="White" />
        <Setter Property="Shell.TitleColor"
                Value="White" />
        <Setter Property="Shell.DisabledColor"
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor"
                Value="#95FFFFFF" />
    </Style>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
       xmlns:local="clr-namespace:ABC" 
       xmlns:controls="clr-namespace:ABC.Controls"
       xmlns:views="clr-namespace:ABC.Views"
       x:Name="self"
       Title="Shelltest" x:Class="ABC.AppShell" Style="{StaticResource BaseStyle}">
    
   <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <FlyoutItem Title="Home" FlyoutIcon="icons8_home_30.png" FlyoutDisplayOptions="AsSingleItem">
       <!-- <ShellContent>
            <views:HomePage />
        </ShellContent>-->
        <Tab Title="Dashboard" Icon="icons8_home_30.png">
            <ShellContent>
                <views:HomePage />
            </ShellContent>
        </Tab>
        <Tab Title="Page1" Icon="icons8_user_shield_30.png">
            <ShellContent>
                <views:Page1 />
            </ShellContent>
        </Tab>
    </FlyoutItem>

Screenshots

Color in display:

Color without using shell:

Actual Color:

Reproduction Link

Contributor guide