Shell.FlyoutHeader not showing in iOS after initialisation of a new Shell instance

benjones84 1 Reputation point
2021-01-19T10:39:28.997+00:00

In our Xamarin Shell app, we have too shells. One is shown on load with a pre-login menu and a simple FlyoutHeader, then following a login process an instance of a new 'logged in' Shell with a different menu and FlyoutHeader are created and the user moved to that. (This shell is removed on logout and the user is returned to the first one).

The code for initialising the 'logged in' Shell is simply,

Shell s = new AppShellLoggedIn();  
Application.Current.MainPage = s;  

In both of the shell XAML files, the FlyoutHeader is included in the same way,

<Shell.FlyoutHeader>  
    <controls:FlyoutHeader />  
</Shell.FlyoutHeader>  
  
<Shell.FlyoutHeader>  
    <controls:FlyoutHeaderLoggedIn />  
</Shell.FlyoutHeader>  

This all works absolutely perfectly on android as you can see in the picture, and it works on iOS on the initial shell, but not the one that's created afterwards, the space where the header should be is simply empty. Duplicating the pre-login Header onto the logged in shell also leaves an empty space with no content.

58106-flyout-headers.jpg

(The text on the logged in header is dynamic and bound to the VM)

The FlyoutHeader controls are nothing particularly exciting, the pre-login one (that doesn't work if duplicated onto the logged-in one) is as below,

<?xml version="1.0" encoding="UTF-8"?>  
<ContentView 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"   
             xmlns:images="clr-namespace:Plugin.CrossPlatformTintedImage.Abstractions;assembly=Plugin.CrossPlatformTintedImage.Abstractions"  
             x:Class="---"   
             x:Name="contentView"   
             HeightRequest="80">  
  
    <StackLayout BackgroundColor="{DynamicResource FlyoutHeaderBackgroundColor}">  
  
        <StackLayout x:Name="slNotLoggedIn">  
            <Grid RowSpacing="0" ColumnSpacing="0"   
                  RowDefinitions="Auto, Auto, 2"  
                  ColumnDefinitions="*, *">  
  
                <images:TintedImage Source="logo"  
                       HorizontalOptions="End"  
                       VerticalOptions="Start"  
                       WidthRequest="100"  
                       Margin="25,30,30,10" Grid.Row="0" Grid.Column="1"  
                       TintColor="{DynamicResource FlyoutLogoTint}"/>  
            </Grid>  
  
        </StackLayout>  
    </StackLayout>  
</ContentView>  

Has anyone any suggestions as to what may be going wrong here?

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,301 questions
{count} votes