Setting FlyoutIsPresented="true" results in only the first two items being visible

[Adam-Carr]

Description

Creating an app using the flyout menu and setting the flyout to be presented when first opening the app results in the flyout being presented but only the first two flyout items having their text visible.

I found this while developing my own app which has a flyout header and this displayed correctly. I have 8 flyout items included but only two of them are visible. If I hover over the other items they seem to exist as the hover effect is applied (lighter background colour is shown). This occurs when using multiple methods of setting the FlyoutIsPresented property to true:

• In XAML, using FlyoutIsPresented="true"
• In code behind with Shell.Current.FlyoutIsPresented = true;
• Or with a view model and using binding

Steps to Reproduce

1. Create FIle > New Maui App
2. In the AppShell.xaml file swap the ShellContent for:

<FlyoutItem Title="Cats">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>
<FlyoutItem Title="Dogs">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>
<FlyoutItem Title="Cats2">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>
<FlyoutItem Title="Dogs2">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>
<FlyoutItem Title="Cats3">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>
<FlyoutItem Title="Dogs3">
    <ShellContent ContentTemplate="{DataTemplate local:MainPage}" />
</FlyoutItem>

3. Add FlyoutIsPresented="true" to AppShell.xaml
4. Run the demo app with the changes and the flyout will be presented after launching but displays the text in only the first two flyout items visible.

Version with bug

6.0 (current)

Last version that worked well

Unknown/Other

Affected platforms

Windows, I was not able test on other platforms

Affected platform versions

Windows SDK 10.0.19041.0

Did you find any workaround?

None to make this work on first loading the app, but if you collapse the flyout then open it again, everything displays fine.

Relevant log output

n/a

[Adam-Carr]

I've also now managed to test this using an Android emulator and none of the flyout items seem to be displayed (using the reproduce steps above), rather than only 2 on windows.

Android 11.0 - API 30 - Pixel 5 (the default emulator)

[kristinx0211]

verified on windows and android 12 with vs 17.3.0 Preview 3.0 [32606.354.main]. repro project: MauiApp10.zip run on android 12, none of the flyout items display at first, pull and reload, the flyout items all display. https://user-images.githubusercontent.com/99457000/172284312-2b13debe-c4af-476a-b642-90e5ed667a5c.mp4 run on windows, at fist only two items display, reopen the items will all display: https://user-images.githubusercontent.com/99457000/172284949-91ea929c-63d0-4576-bab4-2223f4c4af2f.mp4

[XamlTest]

Verified this on Visual Studio Enterprise 17.6.0 Preview 7.0. Repro on Android 13.0, not repro on Windows 11 with below Project: 7705.zip

Android: None of the flyout items display at first, pull and reload, the flyout items all display.

Windows: All the items display correct at the first.

[dotnet-policy-service[bot]]

Hi @Adam-Carr. We have added the "s/try-latest-version" label to this issue, which indicates that we'd like you to try and reproduce this issue on the latest available public version. This can happen because we think that this issue was fixed in a version that has just been released, or the information provided by you indicates that you might be working with an older version.

You can install the latest version by installing the latest Visual Studio (Preview) with the .NET MAUI workload installed. If the issue still persists, please let us know with any additional details and ideally a reproduction project provided through a GitHub repository.

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.