How to set a background image in the xamarin shell header with a flyout?

Question

I'm developing a Xamarin.Forms 4 project and I'm using the app shell.

I was using the Tabbar and thanks to custom renderer I obtained to add a background image to the "header"

in

<TabBar>
        <Tab
            Title="ANALYSIS"
            Icon ="chart_icon.png">
            <ShellContent
                ContentTemplate="{DataTemplate local:Reports.ReportsPage}" />
        </Tab>
        // other tabs...
</TabBar>

and I have followed THIS for the renderer

And I have obtained this

Now that I have to add the side menu I have substituted the previous AppShell.xaml code with:

    <FlyoutItem  FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="ANALYSIS"
                      Icon="chart_icon.png"
                      ContentTemplate="{DataTemplate local:Reports.ReportsPage}" />
        //other tabs...
    </FlyoutItem>

And I get this: (the icon is temporary and represents the burger menu icon 🙃)

There is a way to create a renderer or something like the Tabbar renderer?

Thank you in advance!

Answer 1

I've found out that I had written wrong the shell XAML, this was the solution!

    <FlyoutItem  FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="ANALYSIS"
             Icon="chart_icon.png">
            <ShellContent ContentTemplate="{DataTemplate local:Reports.ReportsPage}" />
        </Tab>
        <!-- others tabs -->
    </FlyoutItem>

Following the "Xanimals" example I didn't understand the importance of the "Tab" tag, whit this tag the application have returned to use all the styles and renderer.

Answer 2

According to your description, i think you want to set the background image for toolbar not tabbar.

Custom renderer could do that.

MyShell.cs

 public class MyShell:Shell
{
}

AppShell.xaml.cs Note: AppShell need inherit MyShell.

 public partial class AppShell : MyShell
{
    public AppShell()
    {
        InitializeComponent();
    }
}

MyShellRenderer.cs

[assembly: ExportRenderer(typeof(MyShell), typeof(MyShellRenderer))]
namespace ShellDemo.Droid
{
public class MyShellRenderer : ShellRenderer
{
    public MyShellRenderer(Context context) : base(context)
    {
    }

    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
    {
        return new CustomToolbarAppearanceTracker();
    }
}
public class CustomToolbarAppearanceTracker : IShellToolbarAppearanceTracker
{
    public void Dispose()
    {

    }

    public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
    {

    }

    public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
    {
        toolbar.SetBackgroundResource(Resource.Drawable.pink);
    }
}
}