Xamarin.Forms Trying to add FlyoutHeader not working (FlyoutHeader is not visible)

Question

Hi,

I'm trying to use a FlyoutHeader definition in a Shell (Xamarin.Forms). Bellow you can see the code.

App.xaml.cs

...
namespace TestXamarin
{
    public partial class App : Application
    {

        public App()
        {
            InitializeComponent();

            DependencyService.Register<MockDataStore>();
            MainPage = new AppShell();
        }
...
}

FlyoutHeader.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Grid xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
      HeightRequest="100"
      x:Class="TestXamarin.Views.FlyoutHeader">

    <Image Aspect="AspectFill" 
               Source="icon_about.png" 
               Opacity="0.6" />
    <Label Text="Animals" 
               TextColor="White" 
               FontAttributes="Bold" 
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
</Grid>

FlyoutHeader.xaml.cs

namespace TestXamarin.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class FlyoutHeader : Grid
    {
        public FlyoutHeader()
        {
            InitializeComponent();
        }
    }
}

AppShell.xaml

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:controls="clr-namespace:TestXamarin.Views"
       Title="TestXamarin"
       x:Class="TestXamarin.AppShell">

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

</Shell>

Trying to read the documentation from Shell and FlyoutHeader I come out with this code in order to see if the FlyoutHeader works.
In my case I'm deploying the application to an Android 10 device.
Running this code will display the Shell with a black background, without any FlyoutHeader. Am I doing something wrong? or I forgot to setup something? because from the examples I saw and from documentation I read, I can't find any solution.

Answer 1

Hello BalauroiuRadu-9545,​

Welcome to our Microsoft Q&A platform!

Please add a FlyoutItem at least like following code format. If you do not add one FlyoutItem, your AppShell is empty, So you will get a black background view.

   <?xml version="1.0" encoding="UTF-8"?>  
   <Shell xmlns="http://xamarin.com/schemas/2014/forms"   
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
          xmlns:controls="clr-namespace:TestXamarin.Views"  
                
          x:Class="TestXamarin.AppShell">  
     
       <Shell.FlyoutHeader>  
           <controls:FlyoutHeader />  
       </Shell.FlyoutHeader>  
     
       <FlyoutItem Title="About" Icon="icon_about.png">  
           <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate controls:AboutPage}" />  
       </FlyoutItem>  
        
   </Shell>  

One or more flyout items can be added to the flyout, and each flyout item is represented by a FlyoutItem object.

Here is a document about Xamarin.Forms Shell flyout, please refer to it.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.