0

I am working on a .Net Maui app using xaml, what I am trying to achieve is a flyout menu with static tabs at the bottom (Think master/child pages). I have seen some tutorials and was able to achieve having a flyout menu with tabs at the bottom, the issue is that the tabs are only present for the selected menu items within the FlyoutItem

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="App.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:App"
    Shell.FlyoutBehavior="Flyout">

    <Shell.FlyoutHeader>
        <Grid HeightRequest="100" BackgroundColor="DarkSlateBlue">
            <Image Source="applogo.png" HeightRequest="100" WidthRequest="100" />
        </Grid>
    </Shell.FlyoutHeader>

    <FlyoutItem Title="App Title">
        <ShellContent Title="Dashboard"
                  ContentTemplate="{DataTemplate local:MainPage}">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FAS"
                            Glyph="&#xf015;"/>
            </ShellContent.Icon>
        </ShellContent>

        <ShellContent Title="Sessions"
                  ContentTemplate="{DataTemplate local:SessionsPage}">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FAS"
                            Glyph="&#xe53d;"/>
            </ShellContent.Icon>
        </ShellContent>
    </FlyoutItem>

    <FlyoutItem Title="Info">
        <ShellContent Title="Info"
                  ContentTemplate="{DataTemplate local:AboutPage}">
            <ShellContent.Icon>
                <FontImageSource FontFamily="FAS"
                                 Glyph="&#xf05a;"/>
            </ShellContent.Icon>
        </ShellContent>
    </FlyoutItem>

    <Shell.FlyoutFooter>
        <Grid HeightRequest="40" BackgroundColor="DarkSlateBlue">
            <Label TextColor="White" Text="copyright © 2022 All Rights Reserved" />
        </Grid>
    </Shell.FlyoutFooter>


</Shell>

With the code above the 2 Shell Content items Dashboard & Sessions will show the tabs positioned at the bottom of the screen when either one of those pages are active, but when the flyout item Info is selected then tabs disappear. What I am trying to achieve here is that the flout menu and the tabs are always visible whenever any page is active, the catch is that I only want a select number of tabs visible at the bottom at all times (i.e. 4 tabs), but I may have 10 pages/menu items to select from that should not be tabs.

Update: I added screen shots as well as all the code for the AppShell.xaml file

Here is what the app looks like with the flyout menu and the tabs:

Tabs in app: Tabs in app

Flyout Menu with tabs: Flyout Menu with tabs

Info/About Page, there are no tabs present when this page is selected: Info/About Page, there are no tabs present when this page is selected:

This is how I would like the flyout menu to look, notice that all the menu items are now visible, but there are no tabs now when they are separated out like this: This is how I would like the flyout menu to look, notice that all the menu items are now visible, but there are no tabs now when they are separated out like this:

Jack Phillips
  • 75
  • 8
  • Maybe show what it looks like at the moment and provide a sketch of what it actually should look like. Also, is there more to your XAML file than what you're showing? – Julian Dec 27 '22 at 16:27
  • A FlyoutItem has its own pages, if you want to the tab shows in each flyoutitem. You need to added it into the each flyoutitem. In addition, the result you want is not reasonable, if the tabs shows when you go to about page, the tab just has Dashboard page and Sessions page without the about page. – Liyun Zhang - MSFT Dec 28 '22 at 08:30
  • @LiyunZhang-MSFT - I understand what you are saying about tabbed pages and that makes sense. What I am trying to achieve is a master/child page. Using the example shown above, I want the Dashboard and Sessions tabs to always be visible at the bottom of the app no matter what page the user is on (To act like a quick link area), I also want a flyout menu to be available. I was able to achieve this using Maui Blazor using the shared MainLayout.razor page, but can't seem to get the effect/functionality using xaml – Jack Phillips Dec 28 '22 at 18:26
  • In the maui, the tab will just show in the flyoutitem's content which you add the tab. You can make the tab always show unless you add the tab in all the flyoytitems. – Liyun Zhang - MSFT Dec 29 '22 at 08:32

0 Answers0