0

When I have a Flyout Item and a TabBar with 3 Tabs defined in AppShell.xaml, how can I remove the Tab-Item of the first Item here?

<TabBar>
    <Tab>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    </Tab>
    <Tab>
        <ShellContent Title="Calculations" ContentTemplate="{DataTemplate views:Calculations}" Route="Calculations"/>
    </Tab>
</TabBar>

<FlyoutItem Title="Settings" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Title="Settings" ContentTemplate="{DataTemplate views:Settings}" Route="Settings"/>
    <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    <ShellContent Title="Calculations" ContentTemplate="{DataTemplate views:Calculations}" Route="Calculations"/>
</FlyoutItem>

„Settings“ is the page I navigate to by the Flyout and the other 2 Items will be the Tab-Icons, I want to see. Not the entire Tab-Item for Settings. Should be Invisible.

How would I remove or set Invisible the first Tab-Item that is displayed by this? (in Code or XAML)

OXO
  • 391
  • 1
  • 8
  • You can set the `IsVisible` to false for the `ShellContent Title="Settings" ContentTemplate="{DataTemplate views:Settings}" Route="Settings"/>`. – Guangyu Bai - MSFT Mar 22 '23 at 05:27
  • But this will make my Settings ContentPage invisible. The Settings should still be visible. Do not understand the Purpose of an Invisible ShellContent in the API anyway. Are there scenarios where developers could use it? Do you have a clue about the purpose? – OXO Mar 22 '23 at 06:41

3 Answers3

1

Your question is a little bit confusing. So I copied your code directly to a new project. The following window was created and I assume that you're trying to hide the tab I marked in the picture;

enter image description here

You should set IsVisible property to false for this ShellContent. Like this;

<ShellContent Title="Settings" ContentTemplate="{DataTemplate views:Settings}" Route="Settings" IsVisible="false"/>

So the final result will be as follows. There is no more settings tab;

enter image description here

UPDATE

After our discussions, what you want to do is currently not possible in MAUI. Please check this link.

In the other hand, you can try these;

  1. A back button for returning to main page

  2. Writing a content page from scratch (you'll lose WinUI3 animations in this case)

  3. Moving all your menu items to flyout menu.

Schia
  • 232
  • 1
  • 11
  • If this answer is irrelevant to your question, please let me know. – Schia Mar 21 '23 at 21:09
  • Yes, the Tab you marked in your Screenshot should be InVisible as you mentioned, but the Settings-ContentPage should still be visible. When I set it to IsVisible=„False“ as you did, there is no ContentPage displayed anymore in my Android Emulator. – OXO Mar 22 '23 at 02:15
  • Are Home and Calculations pages part of the Settings Flyout? Because like this it'll be unmanageable. If your Home and Calculations pages are part of Settings Flyout, can you consider renaming the "Settings Tab" to "General"? – Schia Mar 22 '23 at 08:58
  • Not directly part of Settings, they are part of AppShell Tab. But yes, they should be present when Settings is opened, as the lead users to the main pages of the App. Normally, when I use a Flyout and e.g. Settings is opened the Tabs disappear and for me there is no way back to the main Pages „Home“ and „Calculations“ or let’s put it this way, no way back to the Start of the App where all Tabs are present and the user can easily navigate between „Home“- and „Calculations“-Pages. This I want to achieve, basically. The Flyout provides a navigation to less important Pages like „Settings“, „Help“ – OXO Mar 22 '23 at 09:37
  • Ok, I guess I understand what you're trying to achieve now. Unfortunately, you can't do this in a Shell Page or Flyout Page. Because flyout pages has their own content and it will change whole content. So if you need a static bar for navigating through main pages, I recommend creating a new content page and defining the main pages & your own menus below it. Please check [this](https://stackoverflow.com/questions/74931043/flyout-menu-and-static-tabs-net-maui) answer. – Schia Mar 22 '23 at 11:49
  • So, do you mean Design my own Tab-Bar with all visual effects like when a Tab-Item os clicked with corresponding Shadows, hover effects and so on, what the Shell-Tab already provides? Is there anything, I can derive from or would it be, that I just create a Tab-Element in Code and add it to the ContenPagein a new StackLayout below my content? So, your answer is, that I leave Settings as Flyout without defining the other items, but in the actual Settings-Content-Page add my own implementation? Or the other way around? – OXO Mar 22 '23 at 14:54
  • Since MAUI is a new library, it has many shortcomings and we have to wait for its further development. Since the necessary functions are still not provided, I have to write some parts from scratch in some of my projects. I would put a Tab-Bar on my homepage and in the "Settings flyout page" I would just use a back button for returning main pages. But I don't know what you're trying to develop of course. So I think there is 3 options for this; 1- A back button, 2- Writing a content page from scratch (you'll lose WinUI3 animations in this case) 3- Moving all your menu items to flyout menu. – Schia Mar 24 '23 at 15:32
0

You can try to write the Settings ShellContent outside the FlyoutItem element. It will can not be recognized as a FlyoutItem.

<FlyoutItem Title="Settings" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    <ShellContent Title="Calculations" ContentTemplate="{DataTemplate views:Calculations}" Route="Calculations"/>
</FlyoutItem>

 <ShellContent Title="Settings" ContentTemplate="{DataTemplate views:Settings}" Route="Settings"/>
Guangyu Bai - MSFT
  • 2,555
  • 1
  • 2
  • 8
  • Well, the was the main purpose for me. My App should start with the 2 Tabs: „Home“ and „Calculations“. Besides that there are other items that are not the main focus of the App (like „Settings“, „Help“, maybe some others), which should be moved to a Flyout menu. Once a page of the Flyout was opened, like „Settings“, I need to have a navigation back to the main focus of the App, which are the pages reached by „Home“ and „Calculations“. Therefore, I don’t want to have them disappear when Settings is opened as it was before. They should be present when Settings or one of the other Flyouts is ope – OXO Mar 22 '23 at 09:30
  • Alright, I know your thought but unfortunately it can not make it the 2 Tabs with 3 flyouts. – Guangyu Bai - MSFT Mar 23 '23 at 09:46
0

I want to answer my question by myself in regards what I can live with right now. From all your Comments, I got the point that it is not possible with .NET MAUI, what I wanted to achieve :(

Right now, I can live with something that is not my basic idea, but what provides a compromise to the user.

AppShell.xaml:

...
<TabBar>
    <Tab Icon="house.png" Title="MainPage" >
        <ShellContent ContentTemplate="{DataTemplate pages:MainPage}" Route="MainPage" Shell.PresentationMode="Animated" />
    </Tab>
    
    <Tab Icon="calculations.png" Title="Calculations" >
        <ShellContent ContentTemplate="{DataTemplate pages:Calculations}" Route="Calculations" Shell.PresentationMode="Animated" />
    </Tab>
</TabBar>


<FlyoutItem Icon="house.png" Title="Home" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Icon="house.png" Title="MainPage" ContentTemplate="{DataTemplate pages:MainPage}" Route="MainPage" Shell.PresentationMode="Animated" />
    <ShellContent Icon="calculations.png" Title="Calculations}" ContentTemplate="{DataTemplate pages:Calculations}" Route="Calculations" Shell.PresentationMode="Animated" />
</FlyoutItem>

<FlyoutItem FlyoutIcon="settings.png" Title="Settings" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Icon="settings.png" Title="Settings" ContentTemplate="{DataTemplate pages:Settings}" Route="Settings" Shell.PresentationMode="Animated" />
</FlyoutItem>

<FlyoutItem FlyoutIcon="help.png" Title="Help" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Icon="help.png" Title="Help" ContentTemplate="{DataTemplate pages:Help}" Route="Help" Shell.PresentationMode="Animated" IsVisible="True"/>
</FlyoutItem>
...

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();        
    }

    ...

    protected override void OnAppearing()
    {
        base.OnAppearing();

        Shell.SetTabBarIsVisible(this, true);
    }
}

With the TabBar, I make sure it is generally available. The FlyoutItems don't show any Tab right now, but with the first FlyoutItem, I provide the user a possibility to navigate back to where the App started. There the Tabs are present and she can navigate between these two main focus areas. The OnAppearing()-Event also makes sure the TabBar is visible.

@Sireris: You mentioned this Flyout menu and static tabs - .Net MAUI, but there I can't see a solution. I tried to add all Tabs to each Flyout, but they are still all present including the Tab for each Flyout-ContentPage. And the other way around would be my own TabBar-Buttons, e.g. in a StackLayout at the very bottom of a page. But with this, I don't know right now, how to create and apply the same style as when you are clicking a Tab-Item or when a Tab-Item is selected. Is there an easy way to realize that, too? Otherwise, I could live with the code above.

OXO
  • 391
  • 1
  • 8
  • There is no solution in the link I mentioned. There is someone trying to do what you trying to achieve and I sent this page to show you that what you want to do is unfortunately not possible. – Schia Mar 24 '23 at 15:38
  • For your question, as far as I know if you write your own class you'll lose all other animations & stuff because most of the animations & styles are native in MAUI and there is no way to inherit this. You can compare with Windows 11's Settings page. Everything is almost same with default MAUI components. Animations and styles will automatically change when you switch platforms. – Schia Mar 24 '23 at 15:51
  • And for your less important buttons (help, support etc.) you can use `MenuItems` in Flyout. Please check [this](https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-7.0#menu-items) link. Your code and UI will look better. – Schia Mar 24 '23 at 15:58