Remove ActionBar Top Heading in XamarinForms

Viewed 259

I have implemented a dashboard with Navigation Drawer in Xamarin Forms. I want to Remove the Blue part in the below image and move the toggle button to my design. Please help enter image description here

I have implemented navigation Drawer/Flyout as follows using Shell Flyout

NavigationPage.SetHasNavigationBar(this, false);

I tried using the above line of code from another stack overflow question but it didn't work

3 Answers

I think for Shell is a bug to hide this ActionBar. I have a project in Shell and I tried everything to hide it, but nothing worked. So I just deal with it:

<ContentPage.ToolbarItems>
        <ToolbarItem Text="MyTitle" Order="Primary"/>
        <ToolbarItem IconImageSource="img1.png" Order="Primary"/>
        <ToolbarItem IconImageSource="img2.png" Order="Primary"/>
        <ToolbarItem IconImageSource="img3.png" Order="Primary"/>
</ContentPage.ToolbarItems>

If you want, you can remove your actionBar and use this ActionBar of Shell editing it.

According to the screenshot, you have two flyout page.

  1. If you use the Shell template, it has a flyout page by default when you set the FlyoutDisplayOptions to AsMultipleItems.

    Shell flyout: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout

  2. If you only want a flyout without Shell template, a east way is to use FlyoutPage.

    Please note, if you use the NavigationPage in your App.xaml.cs, it would show the bar like below. So do not use it when you use the Flyoutpage.

      MainPage =  new NavigationPage(new Flyoutpage());
    

    FlyoutPage: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage

Related