Using AppShell the ContentPage 's footer is not white, why?

Question

I using the AppShell, like I show the flow here

How to change the Status Bar in Xamarin Forms ContentPage using AppShell?

at this point I have an issue related with ContentPage's footer, that should be White, but is not, see this picture

In my code I am doing:

BackgroundColor="White"
Shell.BackgroundColor="White"

What is wrong?

I am doing this BaseStyle

   <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Dark={StaticResource Primary}, Light={StaticResource Primary}}" />
                <Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
                <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Dark=Black, Light=White}" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White" />
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarTitleColor" Value="White" />
            </Style>

The XAML Page is

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="Toretto.MobileApp.Views.ForgetPasswordPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:behaviors1="clr-namespace:Toretto.MobileApp.Behaviors"
    xmlns:controls="clr-namespace:Toretto.MobileApp.Controls"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:local="clr-namespace:Toretto.MobileApp;assembly=Toretto.MobileApp"
    xmlns:r="clr-namespace:Toretto.MobileApp.LocalizationResources"
    BackgroundColor="White"
    Shell.BackgroundColor="White"
    Shell.NavBarIsVisible="False">
    <ContentPage.Resources>
        <ResourceDictionary />
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout VerticalOptions="StartAndExpand">
            <StackLayout.Padding>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="iOS" Value="0, 30, 0, 0" />
                        <On Platform="Android" Value="0, 0, 0, 0" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </StackLayout.Padding>
            <StackLayout
                BackgroundColor="{StaticResource Primary}"
                HeightRequest="60"
                Orientation="Horizontal">
                <Image
                    x:Name="BackImage"
                    Margin="10,0,0,0"
                    HeightRequest="36"
                    Source="{local:ImageResource Toretto.MobileApp.Resources.Images.back.png}"
                    VerticalOptions="CenterAndExpand"
                    WidthRequest="36">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BackCommand}" />
                    </Image.GestureRecognizers>
                </Image>
                <Label
                    Margin="-40,10,0,0"
                    FontSize="Medium"
                    HorizontalOptions="CenterAndExpand"
                    Text="{x:Static r:Resource.ForgetPasswordTitle}"
                    TextColor="White"
                    VerticalOptions="CenterAndExpand" />
            </StackLayout>

            <Label
                Margin="20,20,20,0"
                FontSize="Medium"
                HorizontalOptions="StartAndExpand"
                Text="{x:Static r:Resource.ForgetPasswordSubtitle}"
                TextColor="{StaticResource TorettoDarkColor}" />

            <Label
                x:Name="EmailErrorLabel"
                FontSize="Small"
                HorizontalOptions="CenterAndExpand"
                IsVisible="True"
                Style="{StaticResource ValidationErrorLabelStyle}"
                Text="{Binding Email.Errors, Converter={StaticResource ValidationErrorConverter}}" />


            <Label
                Margin="20,10,20,0"
                FontFamily="Lobster-Regular"
                FontSize="Medium"
                Text="{x:Static r:Resource.User}"
                TextColor="{StaticResource TorettoDarkColor}" />
            <controls:CustomEntry
                x:Name="customEntryEmail"
                Margin="20,0,20,10"
                IsPassword="False"
                Style="{StaticResource CustomEntryStyle}"
                Text="{Binding Email.Value, Mode=TwoWay}">
                <Entry.Behaviors>
                    <behaviors1:EventToCommandBehavior Command="{Binding ValidateEmailCommand}" EventName="TextChanged" />
                </Entry.Behaviors>

                <!--  Sample  -->
                <Entry.Triggers>
                    <Trigger TargetType="Entry" Property="IsFocused" Value="True">
                        <Setter Property="BackgroundColor" Value="{StaticResource TorettoLightColor}" />
                        <!--  multiple Setters elements are allowed  -->
                    </Trigger>
                </Entry.Triggers>

            </controls:CustomEntry>
            <Button
                x:Name="loginButton"
                Margin="20,20,20,20"
                Command="{Binding SendCommand}"
                HeightRequest="40"
                Text="{x:Static r:Resource.Send}"
                TextColor="White"
                VerticalOptions="Center">
                <Button.Triggers>
                    <DataTrigger
                        Binding="{Binding Source={x:Reference customEntryEmail}, Path=Text.Length}"
                        TargetType="Button"
                        Value="0">
                        <Setter Property="IsEnabled" Value="False" />
                    </DataTrigger>
                </Button.Triggers>
            </Button>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

where is the XAML for the page? – Jason Sep 08 '21 at 11:32 — Jason, Sep 08 '21 at 11:32
Just update the question, thank you – saramgsilva Sep 08 '21 at 11:40 — saramgsilva, Sep 08 '21 at 11:40

score 2 · Accepted Answer · answered Sep 08 '21 at 12:47

2

go to the App.XAML and change the Primary key to the color you want, or in BaseStyle you find Shell.TabBarBackgroundColor tag change this value to "White"

answered Sep 08 '21 at 12:47

Yanal Abo Hadhod

132
9

Did work: in BaseStyle you find Shell.TabBarBackgroundColor tag change this value to "White" – saramgsilva Sep 08 '21 at 13:47

Using AppShell the ContentPage 's footer is not white, why?

1 Answers1