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!

score 4 · Answer 1 · answered Feb 24 '20 at 11:24

4

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);
    }
}
}

answered Feb 24 '20 at 11:24

Wendy Zang - MSFT

10,509
1
7
17

Hi, this isn't working, this is the renderer that I already have. (It's from the Microsoft page that I have linked) I have updated it with IShellToolbarAppearanceTracker instead of ShellToolbarAppearanceTracker like your example but it isn't working... – Elelio Feb 25 '20 at 08:31
It works for me. Do you have some errors from the code? – Wendy Zang - MSFT Feb 25 '20 at 08:34
No, I haven't error from code... It was working for me too, before starting using FlyoutItem instead of TabBar. Are you using TabBar or FlyoutITem? Or Both? – Elelio Feb 25 '20 at 08:38
I just use a Shell template project. If this is what you want, i could post the sample code on GitHub. – Wendy Zang - MSFT Feb 25 '20 at 08:39
From your GIF I see that you haven't a side menu... I had this problem when I started to use the side menu if I roll back to use in Shell I haven't this problem. I see that you are from Microsoft team, did you have an example using side menu? – Elelio Feb 25 '20 at 08:44
You could check the source code on Github `Background Image of Shell ToolBar` folder. https://github.com/WendyZang/Test.git – Wendy Zang - MSFT Feb 25 '20 at 08:46
I would make a sample code with side menu. i need some time and would feedback ASAP. – Wendy Zang - MSFT Feb 25 '20 at 08:48
I have found the solution, I have missed the "tab" tag – Elelio Feb 26 '20 at 12:26

score 0 · Accepted Answer · answered Feb 26 '20 at 12:25

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.

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

2 Answers2