Xamarin.forms: [Bug,Shell] Allow creating TabBar without entry into FlyoutMenu.
Description
In Shell, tabs are invisible if flyout is defined first. If tabs and defined before flyoutitems than both tabs and flyout is visible.
Steps to Reproduce
In the repro project change the order of tabs and flyout.
Expected Behavior
Both Tabs and Flyout should be visible on startup regardless of which one is defined first.
Basic Information
- Version with issue:Xamarin.Forms-pre10
IDE:Visual Studio for Mac
Affected Devices:iOS and Android
Reproduction Link
HobDev
All 30 comments
@HobDev I think there may be some confusion about how you are defining your shell. Are you wanting the same options to show up in the flyout and the tabs? The first item defined in the shell xaml file is going to be the active shell item
<ShellItem>
<ShellSection Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</ShellSection>
<ShellSection Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</ShellSection>
</ShellItem>
Has two bottom tabs so when it's active it'll have two bottom tabs
<ShellItem Title="Browse" Icon="tab_feed.png">
<ShellSection >
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}"/>
</ShellSection>
</ShellItem>
Has only one shell section so it won't have any tabs.
Can you summarize or through screen shots indicate what type of layout/navigation you are trying to achieve?
PureWeen
on 5 May 2019
@PureWeen I wouldn't want same screens for flyout and tabs. This is just for sample. When I keep the tabs sections first i get this:
But when I keep the flyout section first I get this:
The issue is that activating flyout first hides the tabs.
HobDev
on 6 May 2019
Strangely, the only way to bring back tabbar is to click above the first flyout item. This is a very bad user experience.
HobDev
on 6 May 2019
Even if tabbar is activated first it is no longer visible once any flyout item is selected.
HobDev
on 6 May 2019
I think there's some confusion around what's doing what in the AppShell code. We've renamed ShellItem to FlyoutItem to help this out a bit. My question to you though is why do you have 3 shell items?
If you just delete the bottom two and only leave this part
<FlyoutItem>
<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>
</FlyoutItem>
does that give you the UI experience you want?
I guess I'm still a little confused what you're hoping to accomplish for your final result.
Here's a gist that talks about the structures a bit
https://gist.github.com/PureWeen/a29241b9e0ee6d98549fbf81e6aae971
To simplify down your example this is basically what you are defining
<FlyoutItem>
<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>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="tab_feed.png">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}"/>
</FlyoutItem>
<FlyoutItem Title="About" Icon="tab_about.png">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</FlyoutItem>
This will create 3 different flyout items.
When you click on the first one you'll have two tabs
When you click on the second and third one you'll have no tabs
If you can outline what you're trying to accomplish as a final experience then maybe I can help match shell to your needs
PureWeen
on 6 May 2019
@PureWeen In my personal project I have four tabs in the BottomTabBar. Apart from that I have about four items in the flyout. The problem is that when I navigate to any of the flyoutitems the tabbar is invisible. To get back the tabbar I need to click above the first flyoutitem which is a very bad user experience. Please see this video about this behaviour in my project
This one of the Repro Project
HobDev
on 6 May 2019
@HobDev if you change your xaml to be this?
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Xamarin.Forms.Sandbox.ShellPage">
<FlyoutItem Shell.FlyoutBehavior="Disabled">
<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>
</FlyoutItem>
</Shell>
Does that achieve what you want?
PureWeen
on 7 May 2019
@PureWeen Setting FlyoutBehaviour to Disabled will remove the flyout. But the apps design requirements are such that both flyout and tabs are needed. Please view the video I had uploaded. Whenever the flyout is active the tabs are invisible.
HobDev
on 8 May 2019
How about this
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<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>
</FlyoutItem>
@PureWeen No, Same issue. Suggest me something that when I select any flyoutitem it does not make tabbar invisible.
HobDev
on 8 May 2019
Is that the only thing you have specified in your Shell file? If my suggestion above is not working for you can you paste your entire Shell file here?
I downloaded your zip file above and set the AppShell file to
<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:NavigationRepro.Views"
RouteHost="companyname.com"
RouteScheme="app"
Route="NavigationRepro"
FlyoutBehavior="Flyout"
Title="NavigationRepro"
x:Class="NavigationRepro.AppShell">
<Setter Property="Shell.ShellForegroundColor" Value="White" />
<Setter Property="Shell.ShellTitleColor" Value="White" />
<Setter Property="Shell.ShellDisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.ShellUnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.ShellTabBarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
<Setter Property="Shell.ShellTabBarForegroundColor" Value="White" />
<Setter Property="Shell.ShellTabBarUnselectedColor" Value="#95FFFFFF" />
<Setter Property="Shell.ShellTabBarTitleColor" Value="White" />
</Style>
<Style TargetType="ShellItem" BasedOn="{StaticResource BaseStyle}" />
</ResourceDictionary>
</Shell.Resources>
<!-- Your Pages -->
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<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>
</FlyoutItem>
</Shell>
And here is a video of the results
PureWeen
on 8 May 2019
@PureWeen Yes, this works but only where same options are required in flyout and tabbars. But in my project the options for flyout and tabbars are different.
In repro project I gave same options in both places to simplyfy it. But in production apps this is rarely a requirement. Generally the apps will have different options in flyout and tabbar.
HobDev
on 8 May 2019
@HobDev apologies if you've articulated this already and I've just missed it but I'm still not connecting with where Shell is falling short for you. Can you just layout what flyout items you want and what the result should be. Something like
Flyoutitem1 (About)
- clicking on this will result in the following tabs (top tabs: people. places) (bottom tabs: countries, cities)
FlyoutItem 2 (Cats) - clicking on this will result in the following tabs (top tabs: tabby, calico) (bottom tabs: grooming, walking)
PureWeen
on 19 May 2019
@PureWeen My reprosample was not enough to express what I want. So, I modified it. Now while running it on device or emulator I want the following result:
FlyoutItem1 (Browse) Selected:
- bottomtab should be visilbe.
FlyoutItem 2 (About) Clicked
- Still bottomTabBar should be visible
HobDev
on 20 May 2019
@HobDev
- what's the contents of the bottomTabBar when you click on Browse?
- what's the contents of the bottomTabBar when you click on About?
PureWeen
on 20 May 2019
Please try this. On this project clicking on any flyout item results in hidden bottomtabbar
HobDev
on 20 May 2019
FlyoutItem1 (Browse) Selected:
bottomtab should be visilbe.
FlyoutItem 2 (About) Clicked
Still bottomTabBar should be visible
Can you elaborate the contents of the bottomtabbar in each scenario?
The thing to understand is that there is no connection between FlyoutItem1 and FlyoutItem2
They are two completely different screens of your application so whatever is visible (bottomtab bar, top tabbar) on flyout item 1 isn't going to be visible on flyoutitem2
If you want an identical bottom tab bar in flyout item 2 you'll have to specify those same Tab items both places
PureWeen
on 24 May 2019
@PureWeen
Ok, take my repro project from above and make BottomtabBar visible in FlyoutItem1.
HobDev
on 25 May 2019
@HobDev I'm sorry but I'm sort of at a lost where we aren't connecting on your expectation and where the Shell isn't meeting it. The bottomtabbar is relative to each Flyout item it doesn't persist between flyoutitems
You specify what you want the contents of the bottom tab bar to be per flyout item not at a global level
If you want the same Tabbar then you would need to specify that tab bar for each flyout item
<FlyoutItem>
<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>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="tab_feed.png">
<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>x
</FlyoutItem>
<FlyoutItem Title="About" Icon="tab_about.png">
<Tab Title="About" Icon="tab_about.png" Route="About">
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" />
</Tab>
<Tab Title="Browse" Icon="tab_feed.png" Route="AboutFirst">
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" />
</Tab>
</FlyoutItem>
@PureWeen
This is really frustrating. 28 days elapsed and we don't able to make a common understanding about the issue. The title represent the issue correctly. Whenever I select any of the Hamburger Menu Item it hides the BottomTabBar.
As of now the only way to Show the BottomTabBar again is by clicking on top of first Hamburger Menu Item . The code you provided above does not produce the desired result. If this is not possible than you can put this issue in triage.
One way to solve this is providing back button when ever a user clicks on Hamburger Menu. This way by going back the user will get to the first screen with Hamburger Menu and BottomTabBar.
For reference you can try Google Maps App. Whenever a HamburgerMenu is clicked the user gets Screen with Back Button which enables them to go back to the screen which have BottomTabBar.
Does that make more sense now?
HobDev
on 2 Jun 2019
@HobDev So, what you're saying is that you want one global set of tabs on the bottom that should be there, no matter what page you're on. And what @PureWeen is saying is that we designed Shell so that each page has its own set of tabs. Fundamentally, these are different requirements. This is not a bug; it is by design. However, we can consider this is a possible enhancement for the future. In the meantime, @PureWeen offered you a workaround (https://github.com/xamarin/Xamarin.Forms/issues/6094#issuecomment-497972911) that seems like it should show the behavior you're expecting.
I hope we're understanding each other now. Thanks for your patience!
samhouts
on 14 Jun 2019
@samhouts Can anyone help me to show bottomtabbar with first flyoutitem selected. Please show me that by modifying the repro project. I am unable to get the desired result from the (https://github.com/xamarin/Xamarin.Forms/issues/6094#issuecomment-497972911). I understand that it is not possible to set one global set of tabs on the bottom that should be there, no matter what page I am on.
But the bottomtabbar should be there when I select the first flyoutitem from hamburger menu. If I able to show bottom tabs with first flyoutitem than the requirement of my current project will be fulfilled.
For showing bottomtab bar globally throughtout the app that can added in future releases as mentioned by you.
thank you
HobDev
on 29 Jun 2019
@samhouts @PureWeen As per my understanding as of now it is not possible to show BottomTabBar if any of the flyoutitem from slider is selected. This may not be a bug but a design mistake.
HobDev
on 1 Jul 2019
These two requests seem to be at odds with eachother
One way to solve this is providing back button when ever a user clicks on Hamburger Menu. This way by going back the user will get to the first screen with Hamburger Menu and BottomTabBar.
As per my understanding as of now it is not possible to show BottomTabBar if any of the flyoutitem from slider is selected. This may not be a bug but a design mistake.
Are you wanting a back button ? or a persistent BottomTabBar?
Taking the first comment
One way to solve this is providing back button when ever a user clicks on Hamburger Menu. This way by going back the user will get to the first screen with Hamburger Menu and BottomTabBar.
I played around with google maps and what it looks like they have two paradigms with the back button
1) when you click an item it causes a Modal window to slide up from the bottom or it just loads a totally new page without a bottom tab bar at all. You can currently do this with Shell and using menu items to push a modal page
2) The other thing it does (like when clicking Location Sharing) is that it just changes the context of the current page. So it doesn't navigate you away but it just changes the overlay on the map itself. It swaps out the search bar for a navigation bar with a backbutton. Which is another thing you could accomplish with shell by hiding the searchbar and then modifying the BackButtonBehavior for the page
As per my understanding as of now it is not possible to show BottomTabBar if any of the flyoutitem from slider is selected. This may not be a bug but a design mistake.
Every flyout item is a different part of the app. Take the SLACK app for example. On the slack app when you click the hamburger icon to navigate between channels there is never a back button.
PureWeen
on 1 Jul 2019
I have a problem with one of my project. Whenever user click on any hamburger item the BottomTabBar hides. Now I want to give user a simple and easy way to get back to the BottomTabBar.
The solutions that I thought could resolve this is a backbutton or a persistent bottomtabbar. There could be a better way to do that.
Can you or any one from the xamarin team suggest me a way to get back to the BottomTabBar. This will resolve my problem for now.
Thank you
HobDev
on 2 Jul 2019
@PureWeen @samhouts Apologies for my ignorance. I am grateful for the patience and support from you. https://github.com/xamarin/Xamarin.Forms/issues/6094#issuecomment-497972911 is the correct answer. I didn't able to understand the code than.
The blog post by Eduardo Rosas over here helped me to understand the shell even better.
https://github.com/xamarin/Xamarin.Forms/issues/5662 issue is also related.
The option to enable tabbar at global level independent of flyoutitems will be useful.
HobDev
on 5 Jul 2019
@PureWeen @samhouts Can't we design flyout without the tabsmenuitem displaying in flyout?i need bottom tabs added but not to add that to the flyoutmenu (if we give shellcontent inside flyout it is adding as a menu item in flyout also).And if i try to use tab bar, and only menuitems, i am not able to get flyout menu :( . Any idea , where i am going wrong and how can i achieve this ?
uday-lucky
on 4 Nov 2019
@uday-lucky This was my intent when I reported this issue. You define the issue very clearly. @samhouts @PureWeen This is very desirable feature. Hope it gets priority by the Xamarin team.
HobDev
on 4 Nov 2019
@PureWeen @samhouts Can't we design flyout without the tabsmenuitem displaying in flyout?i need bottom tabs added but not to add that to the flyoutmenu (if we give shellcontent inside flyout it is adding as a menu item in flyout also).And if i try to use tab bar, and only menuitems, i am not able to get flyout menu :( . Any idea , where i am going wrong and how can i achieve this ?
Two ways of doing that:
1) on AppShell.xaml, you can set Shell.Flyout="Disabled" and then opt-in on each page where you need the flayout with <ContentPage ... Shell.FlyoutBehavior="Flyout">.
2) Disable the flyout on a page with <ContentPage ... Shell.FlyoutBehavior="Disable">.
But I do think will be better to have a global setting of flyout and tabbar and then be able to change the content from each single page. I was surprised when I discovered that a ShellContent didn't have a IsVisible bindable property!
ncarandini
on 24 May 2020
@ncarandini @HobDev @uday-lucky
I updated the IsVisible spec here with what I'm thinking. I feel like this addresses all the scenarios you've brought up.
https://github.com/xamarin/Xamarin.Forms/issues/5232
Please let me know if you have any concerns
PureWeen
on 26 May 2020
Related issues
Hudhud
·
3Comments
simontocknell
·
3Comments
jgold6
·
3Comments
Papirosnik
·
3Comments
rmarinho
·
3Comments
Most helpful comment
@PureWeen @samhouts Can't we design flyout without the tabsmenuitem displaying in flyout?i need bottom tabs added but not to add that to the flyoutmenu (if we give shellcontent inside flyout it is adding as a menu item in flyout also).And if i try to use tab bar, and only menuitems, i am not able to get flyout menu :( . Any idea , where i am going wrong and how can i achieve this ?