CODEWITHSUNDEEP
xamarinxamarin.forms
Aravind Shajan
Aravind Shajan

Reputation: 139

Remove ActionBar Top Heading in XamarinForms

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

Upvotes: 4

Views: 596

Answers (3)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10978

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://learn.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://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage

Upvotes: 2

Adarsh s
Adarsh s

Reputation: 318

Use Shell.NavBarIsVisible="False" Inside Content Page Will Work Shell.Current.FlyoutIsPresented = true; in button click Will open Drawer. This answer was Found in

https://learn.microsoft.com/en-us/answers/questions/349760/how-to-hide-navigation-bar-on-xamarin-forms-when-u.html

Upvotes: 2

techie
techie

Reputation: 463

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.

Upvotes: 2

Related Questions