如何将 Flyout 附加到 MenuFlyoutItem？

Question

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

Answer 1

flyout is not appearing when I click menu item

通过测试你的代码，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 并在 Button.Flyout 中包含 menuFlyout。

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

如何将 Flyout 附加到 MenuFlyoutItem？

How to attach Flyout to MenuFlyoutItem?

xaml

c++-cx

uwp