CODEWITHSUNDEEP
c#maui
Angelru
Angelru

Reputation: 198

.NET MAUI FlyoutItem Multiple With TabBar

I have:

 <FlyoutItem
        FlyoutDisplayOptions="AsMultipleItems"
   </FlyoutItem>

I would like to have a TabBar in one of the contentPages but I can't get it.

Upvotes: 1

Views: 2651

Answers (2)

Jessie Zhang -MSFT
Jessie Zhang -MSFT

Reputation: 13843

but I can't put it inside my existing FyloutItem, what you put me will be separated by a gray line and below my menu and it will do a strange effect replacing all the content.

I did a test, and there is no gray line.

Please refer to the following code:

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

    <FlyoutItem Route="animals"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Route="domestic"
             >
            <ShellContent Route="cats"
                          Title="Cats"
                          ContentTemplate="{DataTemplate local:CatsPage}" />
            <ShellContent Route="dogs"
                          Title="Dogs"
                          ContentTemplate="{DataTemplate local:DogsPage}" />
        </Tab>

    </FlyoutItem>

    <ShellContent
        Title="Test"
        ContentTemplate="{DataTemplate local:MainPage}"
        Route="MainPage" />

</Shell>

Upvotes: 1

Isidoros Moulas
Isidoros Moulas

Reputation: 697

You can use the below.

<Shell FlyoutBehavior="Flyout">

    <FlyoutItem Title="Home">
        <Tab Title="Tab1">
           <ShellContent ContentTemplate="{DataTemplate pages:Tab1}"/>
        </Tab>
        <Tab Title="Tab2">
           <ShellContent ContentTemplate="{DataTemplate pages:Tab2}"/>
        </Tab>
   </FlyoutItem>
</Shell>

Upvotes: 1

Related Questions