Xamarin.forms: [Enhancement] Add FlyoutItem.IsVisible, Tab.IsVisible, BaseShellItem.IsVisible

[varyamereon]

Summary

Provide attached properties so users can more directly define whether something is visible in the Flyout or in the TabBar.

Future API Suggestions

We should add options so when users use FlyoutDisplayOptions="AsMultipleItems"so they can choose to display the parent as a Header. With the expansion control we could also add that as a setting as well.

API

```C#
FlyoutItem.IsVisible //BP Attached Property
Tab.IsVisible //BP Attached Property
BaseShellItem.IsVisible // BP (not attached property)

## Examples BaseShellItem.IsVisible 

If you set BaseShellIitem IsVisible to false it won't show up in the Flyout or on any of the tabs

## Examples Tab.IsVisible

```xaml
<TabBar>
    <Tab Title="Tab 1">
          <ShellContent Title="Top Tab 1" />
          <ShellContent Title="Top Tab 2"  Tab.IsVisible="false"/>
          <ShellContent Title="Top Tab 3" />
    </Tab>
    <Tab Title="Tab 2" Tab.IsVisible="false">
    </Tab>
</TabBar>

Examples FlyoutItem.IsVisible

Users wants a Flyout that doesn't reflect any of the tabs on the screen.

<MenuItem title="item 1 "/>
<MenuItem title="item 2" />
<MenuItem title="item 3" />
<TabBar Shell.FlyoutBehavior="Flyout" FlyoutItem.IsVisible="False">
    <Tab>
    </Tab>
</TabBar>

Renders 3 Flyout Items

• Item 1
• Item 2

- Item 3

<FlyoutItem title="item 1 " />
<FlyoutItem title="item 2" />
<ShellContent title="Content" FlyoutItem.IsVisible="False" />

Renders 2 Flyout Items even if you are on the ShellContent element

• Item 1
• Item 2

---

Intended Use Case

The use case I have in mind is to have an item in the Hamburger menu for the user to upgrade the app to Premium. Once the user has upgraded the item should then no longer be visible.
Parent: #2415

[wesoos]

Any update on this?

[jamesmcmenamin]

@PureWeen I saw you using this at Xam Dev Summit is this in a Pre or anything yet?

[steveres]

Another intended use case is where one set of features (frequently used) should be visible on the bottom tab bar and another set of features (settings, restore purchases, help, about, etc.) should be accessible from the hamburger menu. If this is already possible, please let me know.

[SirJohnK]

Could we please get an update on this? (really, really want this!)

[groege]

bump

[wesoos]

Really need this

[scriptBoris]

Any update on this?

[Jakar510]

Any update? We really need this.

[wagenheimer]

Any update on this?

[brepetti]

Shell is pretty much useless it seems unless you are building a very small app. Without this we cannot set permissions or hide pages we don't want on the flyout. How is this not a priority right now?

[rodrigojuarez]

You are right @brepetti
I'm wondering if I'm missing something here ...

[jamesmcmenamin]

@rodrigojuarez @brepetti

Funny part is at XDS last year it was discussed as an item that was going to be in soon... To a point where they showed it.

I think this probably ended up being a blocker because of how it is handling the navigation stack. Because I do know that the example shown at XDS was using a mostly custom / rebuilt navigation stack.

[malte1989]

I managed to get it working for TabBar Top Tabs with a manual workaround by creating the ShellContent items manually (adding, removing). In Xamarin.Forms 4.6 it is now also working for iOS (just fixed 1 day ago in 4.6).

Should work for Hamburger Menu also?

[jamesmcmenamin]

@malte1989 Yea we are talking about a shell item aka something that is on the shell visual tree.

[Jakar510]

@malte1989 could you please provide some example code?

[malte1989]

@malte1989 could you please provide some example code?

Sure, I will post the code for my tabbar solution tomorrow.

[malte1989]

@Jakar510

AppShell.xaml

<TabBar Route="tabBar">
        <Tab 
            x:Name="myTab" 
            Route="tab1"
            Icon="tab_icon1.png">
            <ShellContent 
                x:Name="shellStart"
                Route="route1A" 
                Title="title" 
                ContentTemplate="{DataTemplate view:Page1A}" />
        </Tab>
        <Tab 
            Route="tab2"
            Icon="tab_icon2.png">
            <ShellContent 
                Route="route2" 
                Title="title2" 
                ContentTemplate="{DataTemplate view:Page2}" />
        </Tab>
        </Tab>
        <Tab 
            Route="tab3"
            Icon="tab_icon3.png">
            <ShellContent 
                Route="route3" 
                Title="title3" 
                ContentTemplate="{DataTemplate view:Page3}" />
        </Tab>
    </TabBar>

AppShell.xaml.cs

public ShellContent shell0;
public ShellContent shell1;
public ShellContent shell2;
public ShellContent shell3;
public static Tab tabLocal;

constructor

            tabLocal = myTab;
            shell0 = shellStart;
            shell1 = new ShellContent()
            {
                Content = new Page1B(),
                Title = "",
                Route = ""
            };
            shell2 = .... Page1C() ...
            shell3 = .... Page1D() ...
            ...

Switching page 0 to 1

AppShell.tabLocal.Items.Add(shell1);
AppShell.tabLocal.Items.Remove(shell0);

Maybe you need these two method for handling your navigation

protected async override void OnNavigating(ShellNavigatingEventArgs args)
protected override void OnNavigated(ShellNavigatedEventArgs args)

I hope this helps you. Please let me a note if this does work for you.

[PureWeen]

I'll be working on this for 4.7/4.8

I updated the spec if anyone wants to comment

[jamesmcmenamin]

@PureWeen No but I do hope when you get working on this you post the twitch stream so we can make sure to tune in 👍

[ncarandini]

I'll be working on this for 4.7/4.8
I updated the spec if anyone wants to comment

Sorry for the dumb question: where I can find and read the specs?

[PureWeen]

@ncarandini I just updated the description on this issue with the spec

[ncarandini]

Yes, thanks!

[takaz-ams]

I believe i found a workaround for this (for now).
Do this:

• give your flyoutitem or items a name e.g.
  <FlyoutItem Title="Self Review" x:Name="fiSelf"> <FlyoutItem.Icon> <FontImageSource FontFamily="{StaticResource sapcIconFont}" Glyph="{StaticResource IconUser}" Color="{StaticResource IconColor}"/> </FlyoutItem.Icon> <ShellContent> <viewsAssess:StartSelfPage /> </ShellContent> </FlyoutItem>

• override the OnBindingContextChanged in AppShell.cs , and add code to check condition to hide and show then call the Clear method on the Items property of the flyitem
  protected override void OnBindingContextChanged() { base.OnBindingContextChanged(); if(App.IsIntern) { fiAssess.Items.Clear(); fiPeer.Items.Clear(); fiSelf.Items.Clear(); fiVerifications.Items.Clear(); } }

works for me

[samhouts]

closed by #10980

[GeorgeVelikov]

This is still behaving oddly, whenever we dynamically change the IsVisible property on a BaseShellItem, everynow and again the styling of a ShellContent would get lost. Pushing a page on top of the shell content and then popping it seems to fix it.

An example would be to have 2 pages, shell content X has a button which changes a boolean property which is binded to the IsVisible property on shell content Y

[PureWeen]

@GeorgeVelikov can you log an issue?