Tabbed Pages inside Flyout Page in Maui

Question

Tabbed Pages inside Flyout Page in Maui

Chinmay Dole 245

I have an application with Maui .NET 8. I want to show tabbed pages and based on the page from the tabbed page selected I want to show the title to the Flyout page. How can I achieve this?

Anonymous

2024-07-29T06:52:10.1966667+00:00

Do you want to use TabbedPage in the Flyoutpage?

I want to show the title to the main page

Do you want to show the title in the Titlebar for the MainPage of TabbedPage?

What behavior do you expect, and how is that different from the actual behavior?

As Note: Please edit this post to add full details. Here is a document about How to write a quality answer on Microsoft Q&A | Microsoft Learn

Accepted answer

0 additional answers

Your answer

Anonymous

2024-07-29T06:52:10.1966667+00:00

Do you want to use TabbedPage in the Flyoutpage?

I want to show the title to the main page

Do you want to show the title in the Titlebar for the MainPage of TabbedPage?

What behavior do you expect, and how is that different from the actual behavior?

As Note: Please edit this post to add full details. Here is a document about How to write a quality answer on Microsoft Q&A | Microsoft Learn

Answer 1

Anonymous

Hello,

You cannot show the Title of pages in the Tabbedpage to the Flyoutpage.

But you can use Shell to implement it. Please add ShellContent to the FlyoutItem and set the title property for the ShellContent.

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    ...
    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
       
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>
    ...
</Shell>

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Anonymous

2024-07-30T07:54:56.9966667+00:00

Chinmay Dole May I know if you have got any chance to check my answer? I am glad to help if you have any other questions.
Chinmay Dole 245 Reputation points

2024-07-31T06:59:31.1333333+00:00

Hi, I want to implement something shown in the below image. The hamburger icon indicates the navigation drawer menu along with icons indicating tabbed pages.

Also, based on the tab select event I should be able to change the title of the page which would be located near the hamburger icon, and change the color of the tabbed bar and navigation bar
Anonymous

2024-07-31T07:18:02.38+00:00
want to implement something shown in the image. The hamburger icon indicates the navigation menu along with icons indicating tabbed pages. Also, based on the tab select event I should be able to change the title of the page which would be located near the hamburger icon, and change the color of the tabbed bar and navigation bar

Now you use Tabbed Pages inside Flyout Page, right？If so, based on the tab select event you could change the title of the page which would be located near the hamburger icon by adding <NavigationPage Title="xx"> in the Tabbedpage like following code.

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" ... > <NavigationPage Title="Today" > <x:Arguments> <local:TodayPage /> </x:Arguments> </NavigationPage> <NavigationPage Title="Schedule"> <x:Arguments> <local:SchedulePage /> </x:Arguments> </NavigationPage> </TabbedPage>

Share via

Tabbed Pages inside Flyout Page in Maui

0 additional answers

Your answer