How to attach Flyout to MenuFlyoutItem? - xaml

Question

XAML code:
<Page.TopAppBar>
<CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
<AppBarButton AutomationProperties.Name="Sample Button"
AutomationProperties.AutomationId="SampleAppBarButton"
Click="AppBarButton_Click">
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem x:Name="MuteMenu" Icon="Mute" Text="Mute" Click="MuteMenu_Click">
<FlyoutBase.AttachedFlyout>
<Flyout>
<TextBlock Text="Some text..."/>
</Flyout>
</FlyoutBase.AttachedFlyout>
</MenuFlyoutItem>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
</Page.TopAppBar>
C++/CX:
void App2::DirectXPage::MuteMenu_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
FlyoutBase::ShowAttachedFlyout((FrameworkElement^)sender);
}
But ShowAttachedFlyout not working - flyout is not appearing when I click menu item. No errors reported.
Creating and attaching flyout programmatically doesn't work as well.
Target version is 10.0.18362.0.
Visual Studio 2019 (v142).

Answer 1

flyout is not appearing when I click menu item
By testing your code, the flyout doesn't appear is because after the MenuFlyoutItem is clicked, the entire MenuFlyout will be hidden, the Flyout inside it can't appear.
You can try to use MenuFlyoutSubItem which contains a cascading list of menu items.
<Page.TopAppBar>
<CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
<AppBarButton AutomationProperties.Name="Sample Button"
AutomationProperties.AutomationId="SampleAppBarButton"
x:Name="MyAppButton" >
<AppBarButton.Flyout>
<MenuFlyout>
<MenuFlyoutSubItem x:Name="MuteMenu" Icon="Mute" Text="Mute">
<MenuFlyoutItem Text="Some Text..."></MenuFlyoutItem>
<MenuFlyoutItem Text="123"></MenuFlyoutItem>
</MenuFlyoutSubItem>
</MenuFlyout>
</AppBarButton.Flyout>
</AppBarButton>
</CommandBar>
</Page.TopAppBar>
Or you can add a Button.Flyout and include the menuFlyout in the Button.Flyout.
<Page.TopAppBar>
<CommandBar x:Name="bottomAppBar" Padding="10,0,10,0">
<AppBarButton x:Name="button" >
<AppBarButton.Flyout>
<Flyout>
<StackPanel>
<Button>
<StackPanel Orientation="Horizontal">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""></FontIcon>
<TextBlock>Mute</TextBlock>
</StackPanel>
<Button.Flyout>
<MenuFlyout>
<MenuFlyoutItem Text="Some text..."></MenuFlyoutItem>
</MenuFlyout>
</Button.Flyout>
</Button>
</StackPanel>
</Flyout>
</AppBarButton.Flyout>
</CommandBar>
</Page.TopAppBar>