时间戳

首页 > 解决方案 > 如何将 Flyout 附加到 MenuFlyoutItem？

xaml - 如何将 Flyout 附加到 MenuFlyoutItem？

问题描述

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

标签： xamluwpc++-cx

解决方案

单击菜单项时未出现弹出窗口

通过测试你的代码，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>

推荐阅读