如何将 Flyout 附加到 MenuFlyoutItem？答案

【问题标题】：How to attach Flyout to MenuFlyoutItem?如何将 Flyout 附加到 MenuFlyoutItem？
【发布时间】：2020-05-27 06:19:05
【问题描述】：

XAML 代码：

<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);
}

但 ShowAttachedFlyout 不起作用 - 当我单击菜单项时未出现浮出控件。未报告任何错误。

以编程方式创建和附加浮出控件也不行。

目标版本是 10.0.18362.0。 Visual Studio 2019 (v142)。

【问题讨论】：

我测试了上面的代码，它运行良好。当我单击 MenuFlyoutItem 时，会出现浮出控件。你的目标版本和visual studio的版本是什么？能否提供一个简单的样本，可以复制给我们测试？
请查看编辑后的答案。

标签： xaml uwp c++-cx

【解决方案1】：

当我点击菜单项时没有出现弹出窗口

通过测试你的代码，flyout没有出现是因为MenuFlyoutItem被点击后，整个MenuFlyout会被隐藏，里面的Flyout不能出现。

您可以尝试使用包含级联菜单项列表的 MenuFlyoutSubItem。

<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>

或者您可以添加一个 Button.Flyout 并将 menuFlyout 包含在 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="&#xE74F;"></FontIcon>
                                 <TextBlock>Mute</TextBlock>
                            </StackPanel>
                            <Button.Flyout>
                                <MenuFlyout>
                                    <MenuFlyoutItem Text="Some text..."></MenuFlyoutItem>
                                </MenuFlyout>
                            </Button.Flyout>
                        </Button>
                    </StackPanel>
                </Flyout>
            </AppBarButton.Flyout>
    </CommandBar>
</Page.TopAppBar>

【讨论】：