Make icon invisible in shell

Question

I am trying to disable the hamburger icon is there a way to do that using shell I tried setting the following but it still appears in the simulator.

I want the flyout effect to still happen but I don't want the Hambugger icon their.

<Shell.Resources>
    <ResourceDictionary>
        <Color x:Key="NavigationPrimary">#2196F3</Color>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
            <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
            <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
            <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
            <Setter Property="Shell.TabBarTitleColor" Value="White"/>
        </Style>
        <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
    </ResourceDictionary>
</Shell.Resources>

<Shell.FlyoutHeader>
    <Grid BackgroundColor="Black">
        <Label Text="Test"
           TextColor="White"
           FontAttributes="Bold"
           HorizontalTextAlignment="Center"
           VerticalTextAlignment="Center" />
    </Grid>
</Shell.FlyoutHeader>



<FlyoutItem Title="Collect Data"  >
    <Tab>
        <ShellContent Title="Configuration"
                      ContentTemplate="{DataTemplate local:AboutPage}" />
        <ShellContent Title="Collect Data"
                      ContentTemplate="{DataTemplate local:ItemsPage}" />
    </Tab>
</FlyoutItem>


<FlyoutItem Title="About">

    <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />

</FlyoutItem>

For now, we could reset the icon with FlyoutIcon. docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/… Do not find the way to hide it. — Wendy Zang - MSFT
@WendyZang-MSFT I tried that as in my code it doesnt work when the icon is left blank. — csharpdude77
I found a way to hide the icon througn set the background color to white. You could check the code below. — Wendy Zang - MSFT

Wendy Zang - MSFT Wendy Zang - MSFT · Accepted Answer · 2020-06-11T09:22:28

Try to set the BackgroundColor of shell to White, it would hide the hamburger icon.

 <Shell
      ....
      BackgroundColor="White"
      ....>

Or you could use the custom renderer to reset the toolbar background color to white. It would hide the icon as well.

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]

namespace ShellDemo2.Droid
{
public class MyShellRenderer : ShellRenderer
{
    public MyShellRenderer(Context context) : base(context)
    {
    }
    protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
    {
        return new MyToolbarAppearanceTracker(this);
    }
    protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection)
    {
        return new MyTabLayoutAppearanceTracker(this);
    }

}
public class MyToolbarAppearanceTracker : IShellToolbarAppearanceTracker
{
    private MyShellRenderer myShellRenderer;

    public MyToolbarAppearanceTracker(MyShellRenderer myShellRenderer)
    {
        this.myShellRenderer = myShellRenderer;

    }

    public void Dispose()
    {

    }

    public void ResetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
    {
        toolbar.SetBackgroundColor(Android.Graphics.Color.White);
    }

    public void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
    {

    }
}
}

Make icon invisible in shell

1 Answers