Xamarin.Forms Shell how to remove the space of the FlyoutItem element in the hamburger menu

user_8496520 0
Viewed 2280

I am using Shell and I have a design in which I have a FlyoutItem with the FlyoutDisplayOptions property in AsSingleItem, I also have several MenuItem, this design has a page with tabs and a hamburger menu that shows the MenuItem but the problem is that it is empty if I put the title and icon of the entire FlyoutItem item but if I leave it empty, the space does not disappear and is empty, it is a wasted space, my question is how can I remove that space?

That is my code:

    <FlyoutItem Route="home" x:Name="flyoutItem"
        FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Route="bottomtab1"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate views:x}" />
    <ShellContent Route="bottomtab2"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
    <ShellContent Route="bottomtab3"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
    <ShellContent Route="bottomtab4"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
    <ShellContent Route="bottomtab5"
                  Style="{StaticResource TabBackground}"
                  Icon="home_icon"
                  ContentTemplate="{DataTemplate DataTemplate views:x}" />
</FlyoutItem>

<MenuItem Text="Test 1"
          IconImageSource="home_icon" />

<MenuItem Text="Test 2"
          IconImageSource="home_icon" />

<MenuItem Text="Test 3"
          IconImageSource="home_icon"/>

<MenuItem Text="Test 4"
          IconImageSource="home_icon"/>

<MenuItem Text="Test 5"
          IconImageSource="home_icon"/>

<MenuItem Text="Test 6"
          IconImageSource="home_icon"/>

I leave in these images the design

xamarin.forms.shell xamarin.forms xaml
2 Answers

I had a similar scenario - I had several pages that only should be viewed based on startup logic, and I needed the shell to load them in the correct order, but also not be visible in the flyout. I was able to do this just by adding the pages that should be hidden from the flyout in hierarchal order as FlyoutItems with IsEnabled="True" and is IsVisible="False" attributes. From the xamarin docs

IsEnabled, of type boolean, defines if the item is selectable in the chrome.

IsVisible, of type bool, indicates if the FlyoutItem is hidden on the flyout menu. Its default value is true.

  • When I only set IsVisible to false, I am pretty certain I was still able to click the flyout item where it would have been even though it wasn't visibly there. So that is why I also set the IsEnabled to false. It may be the case only IsVisible=False is required.

When the app runs the MainPage=new AppShell() and it will load the CheckConnection page (now hidden from the flyout) first which has logic to navigate to the correct page (Remember, as @Leon Lu - MSFT said in his answer, to make sure sure you can still navigate correctly to and from "hidden" pages).

<FlyoutItem 
        IsEnabled="True"
        IsVisible="False"
        Title="CheckConnectionPage"
        >
    <ShellContent Route="CheckConnectionPage" ContentTemplate="{DataTemplate local:CheckConnectionPage}"  />
    
</FlyoutItem>
<FlyoutItem 
        IsEnabled="True"
        IsVisible="False"
        Title="StatPage"
        >
    <ShellContent Route="StatPage" ContentTemplate="{DataTemplate local:StatPage}"  />
</FlyoutItem>

<FlyoutItem Title="Configuration" Icon="settings_icon_black.png">
    <ShellContent Route="ConfigurePage"  ContentTemplate="{DataTemplate local:ConfigurePage}" />
</FlyoutItem>

The result is that only the Configuration page is available to tap on in the Flyout, and there is no spacing, and there is no invisible place that a user can accidently click on to cause shell navigation (as is the case if you have a clickable "space" that is an invisible shell flyout item).

enter image description here

You should be able to remove the whitespace from the <FlyoutItem Route="home"... FlyoutItem by adding the same attributes.

user_115968110

If you want to remove the item in the FlyoutItem, but it still was show in the MainPage.Like following GIF. enter image description here

First of all remove the content of FlyoutItem. Then just use TabBar for all of the ShellContent like following code.

  <TabBar>
    <Tab Title="Browse" Icon="tab_feed.png">
        <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
    </Tab>
    <Tab Title="About" Icon="tab_about.png">
        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
    </Tab>
  </TabBar>

But If you hide it, when your click the any MenuItem, you will not come back to the homePage(show aminials information).(For example, my homePage will show aminials information, when i click the About MenuItem, I cannot access my aminials page like following GIF),

enter image description here

So, I advice you give a title and icon for your FlyoutItem, when you click other MenuItems, you can back to the previous homePage.Here is running GIF. enter image description here

user_106272990
Related