How to achieve Partial Flyout Menu - MAUI Windows

Question

How to achieve Partial Flyout Menu - MAUI Windows

Vaibhav Methuku 205

I had created a flyout in Windows - Maui

Facing the below issues while implementing the Flyout:

Unable to change the Hamburger menu icon, Default icon is populating.
Trying to achieve the Flyout Collapsable style as Partial, I had tried below ways but no working.

public FlyoutPage()
{
	InitializeComponent();
	NavigationPage.SetHasNavigationBar(this, false);
	this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().SetCollapseStyle(CollapseStyle.Partial);
	this.On<Microsoft.Maui.Controls.PlatformConfiguration.Windows>().UsePartialCollapse();
	Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific.FlyoutPage.SetCollapseStyle(flyout, CollapseStyle.Partial);
	Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific.FlyoutPage.SetCollapsedPaneWidth(flyout, 20);
	Microsoft.Maui.Controls.PlatformConfiguration.WindowsSpecific.FlyoutPage.CollapsedPaneWidth();
}

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2024-01-09T09:05:36.0666667+00:00
For further investigation, could you please provide the following information?

The MAUI version.

In MAUI, there are two ways to use Flyout through Shell and FlyoutPage. Could you please provide which way you are using, and the minimal layout code that can reproduce this issue, and update it into the issue?

Your prompt reply will be highly appreciated.

Vaibhav Methuku 205

Please find the below information.
Microsoft.Maui.Controls - 8.0.0-rc.2.9373

<FlyoutPage
    x:Class="FlyoutPageSample.AppFlyout"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:FlyoutPageSample"
    IsPresented="False">
    <FlyoutPage.Flyout>
        <ContentPage Title="Test">
            <CollectionView x:Name="collectionView"
                  x:FieldModifier="public"
                  SelectionMode="Single">
                <CollectionView.ItemsSource>
                    <x:Array Type="{x:Type local:FlyoutPageItem}">
                        <local:FlyoutPageItem Title="Contacts"
                                    IconSource="contacts.png"
                                    TargetType="{x:Type local:MainPage}" />
                        <local:FlyoutPageItem Title="TodoList"
                                    IconSource="todo.png"
                                    TargetType="{x:Type local:MainPage}" />
                        <local:FlyoutPageItem Title="Reminders"
                                    IconSource="reminders.png"
                                    TargetType="{x:Type local:MainPage}" />
                    </x:Array>
                </CollectionView.ItemsSource>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid Padding="5,10">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="30"/>
                                <ColumnDefinition Width="*" />
                            </Grid.ColumnDefinitions>
                            <Image Source="{Binding IconSource}" />
                            <Label Grid.Column="1"
                         Margin="20,0"
                         Text="{Binding Title}"
                         FontSize="20"
                         FontAttributes="Bold"
                         VerticalOptions="Center" />
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </ContentPage>
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MainPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

Vaibhav Methuku 205 Reputation points

2024-01-09T10:10:20.5866667+00:00

Added Description

1 answer

Your answer

Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,166 Reputation points Microsoft External Staff

2024-01-09T09:05:36.0666667+00:00

For further investigation, could you please provide the following information?

The MAUI version.

In MAUI, there are two ways to use Flyout through Shell and FlyoutPage. Could you please provide which way you are using, and the minimal layout code that can reproduce this issue, and update it into the issue?

Your prompt reply will be highly appreciated.
Vaibhav Methuku 205 Reputation points

2024-01-09T10:05:28.1833333+00:00

Please find the below information.
Microsoft.Maui.Controls - 8.0.0-rc.2.9373

<FlyoutPage x:Class="FlyoutPageSample.AppFlyout" xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:FlyoutPageSample" IsPresented="False"> <FlyoutPage.Flyout> <ContentPage Title="Test"> <CollectionView x:Name="collectionView" x:FieldModifier="public" SelectionMode="Single"> <CollectionView.ItemsSource> <x:Array Type="{x:Type local:FlyoutPageItem}"> <local:FlyoutPageItem Title="Contacts" IconSource="contacts.png" TargetType="{x:Type local:MainPage}" /> <local:FlyoutPageItem Title="TodoList" IconSource="todo.png" TargetType="{x:Type local:MainPage}" /> <local:FlyoutPageItem Title="Reminders" IconSource="reminders.png" TargetType="{x:Type local:MainPage}" /> </x:Array> </CollectionView.ItemsSource> <CollectionView.ItemTemplate> <DataTemplate> <Grid Padding="5,10"> <Grid.ColumnDefinitions> <ColumnDefinition Width="30"/> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding IconSource}" /> <Label Grid.Column="1" Margin="20,0" Text="{Binding Title}" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" /> </Grid> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView> </ContentPage> </FlyoutPage.Flyout> <FlyoutPage.Detail> <NavigationPage> <x:Arguments> <local:MainPage /> </x:Arguments> </NavigationPage> </FlyoutPage.Detail> </FlyoutPage>
Vaibhav Methuku 205 Reputation points

2024-01-09T10:10:20.5866667+00:00

Added Description

Answer 1

Hello,

Unable to change the Hamburger menu icon, Default icon is populating.

Currently, MAUI provides an API for modifying FlyoutIcon in the Shell. There is currently no API for modifying the hamburger icon in FlyoutPage

<Shell
   ...
    Shell.FlyoutBehavior="Flyout"
    FlyoutIcon="dotnet_bot.png">

For this requirement, you can publish it to the official GitHub repository to make our development team aware of it.

Trying to achieve the Flyout Collapsable style as Partial, I had tried below ways but no working.

This API has not yet been migrated, see Platform Specifics are not working #5856 for details.

FlyoutPage CollapseStyle and CollapsedPaneWidth. While in Xamarin.Forms we used a custom control called FlyoutPageControl where we included properties to manage this Platform Specifics, in .NET MAUI we use RootNavigationView https://docs.microsoft.com/en-us/windows/winui/api/microsoft.ui.xaml.controls.navigationview?view=winui-3.0 without this options without customize the control.

Best Regards,

Alec Liu.

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.

Share via

How to achieve Partial Flyout Menu - MAUI Windows

1 answer

Your answer