xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.62k stars 1.87k forks source link

Xamarin.Forms Shell Background color different pages with difference colors. #7077

Open proos85 opened 5 years ago

proos85 commented 5 years ago

Description

Interested in Xamarin.Forms Shell, I created an playground solution, and started playing around, with the Xamarin Shell documentation at hand.

The Shell structure was created from Visual Studio 2019 on the Mac, by using the Solution wizard.

In the AppShell.xaml the following simple structure was defined:

<TabBar>
        <Tab Title="FirstPage" Icon="tab_feed.png">
            <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" />
        </Tab>
    </TabBar>

So only a single ContentPage was created.

Looking at the MainPage.xaml, it has only 1 button, from which the click will navigate to the next page (Shell.Current.GotoAsync). The navigation bar also has the expected background color.

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="ShellPlayground.Pages.MainPage"
             Title="Main"
             Shell.BackgroundColor="#CFCFCF">

        <Button Clicked="GoToPage2Clicked" Text="Page 2"/>
</ContentPage>

Looking at the Page2.xaml, it also only has only 1 button, from which the click will navigate to the page3. The navigation bar also has the expected background color, which is difference from the main page

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:vm="clr-namespace:ShellPlayground.ViewModels"         
             x:Class="ShellPlayground.Pages.Page2"
             Title="{Binding Title}"
             Shell.BackgroundColor="#CFED12">

    <ContentPage.BindingContext>
        <vm:Page2ViewModel/>
    </ContentPage.BindingContext>

            <Button Clicked="GoToPage3Clicked" Text="Page 3"/>

</ContentPage>

Looking at the Page3.xaml, the navigation bar also has the expected background color, which is difference from the main page.

So far every page has its own navigation bar background color. But when I pop back one page, (from page 3 -> 2), the navigation bar background color, stays the same as page 3. When popping back to the root (main page), the navigation bar background color, is the still the same as page 3. When I go to page 2 again, then the correct navigation bar background color is visible.

Expected Behavior

Expected when popping back a page, (for example from page 3 -> 2), that the page 2 navigation bar background color is seen.

Actual Behavior

When popping back a page (page 3 -> 2), the navigation bar background color from page 3 is still visible. When going from page 2 -> 3, than the correct page 3 background color is visible.

Basic Information

jfversluis commented 5 years ago

Indeed seems to work a bit funny. Only happens whenever you navigate within the same navigation stack it seems.

Only happens on iOS, on Android it does work.

Repro7077.zip