如何在 UWP 中结合 Flyout 和 MenuFlyout？

Posted 2023-03-25

【中文标题】如何在 UWP 中结合 Flyout 和 MenuFlyout？

【英文标题】：How to combine Flyout and MenuFlyout in UWP?

【发布时间】：2022-01-05 11:16:57

【问题描述】：

我想在同一个地方添加 flyout 和 menuflyout。

像这样： enter image description here

而且，我试过这段代码：

<Button Width="24" Height="24" Padding="0" HorizontalAlignment="Right" CornerRadius="12" BorderThickness="0">
    <Image Source="/Assets/UserLogo.png"/>
    <Button.Flyout>
        <Flyout>
            <StackPanel>
                <TextBlock Text="Sample"/>
            </StackPanel>
        </Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedRight">
            <MenuFlyout.Items>
                <MenuFlyoutSubItem Text="Add" Icon="Add" Tag="left">
                    <MenuFlyoutItem Text="New repository"/>
                    <MenuFlyoutItem Text="Import repository"/>
                    <MenuFlyoutItem Text="New gist"/>
                    <MenuFlyoutItem Text="New organization"/>
                    <MenuFlyoutItem Text="New project"/>
                </MenuFlyoutSubItem>
                <MenuFlyoutItem Text="Your profile"/>
                <MenuFlyoutItem Text="Your repository"/>
                <MenuFlyoutItem Text="Your codespaces"/>
                <MenuFlyoutItem Text="Your projects"/>
                <MenuFlyoutItem Text="Your stars"/>
                <MenuFlyoutItem Text="Your gists"/>
                <MenuFlyoutSeparator/>
                <MenuFlyoutItem Text="Settings" Icon="Setting" Tag="right"/>
                <MenuFlyoutSeparator/>
                <MenuFlyoutItem Text="Sign out" Tag="right"/>
            </MenuFlyout.Items>
        </MenuFlyout>
    </Button.Flyout>
</Button>

但是，我做不到。

我该如何解决这个问题？

【问题讨论】：

@FrozenAssassine 的回答能解决你的问题吗？

【参考方案1】：

我不知道我是否理解你的问题，但这就是我得到的：

        <Button Width="24" Height="24" Padding="0" HorizontalAlignment="Right" CornerRadius="12" BorderThickness="0">
        <Image Source="/Assets/UserLogo.png"/>
        <Button.Flyout>
            <Flyout>
                <StackPanel>
                    <!--Replace with your content:-->
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,0,0,20">
                        <Grid Margin="10,0,10,0" CornerRadius="25" Width="50" Height="50" Background="Blue"/>
                        <TextBlock Text="Profile"/>
                    </StackPanel>
                    
                    <!--Here are your Menuitems:-->
                    <MenuFlyoutSubItem Text="Add" Icon="Add" Tag="left">
                        <MenuFlyoutItem Text="New repository"/>
                        <MenuFlyoutItem Text="Import repository"/>
                        <MenuFlyoutItem Text="New gist"/>
                        <MenuFlyoutItem Text="New organization"/>
                        <MenuFlyoutItem Text="New project"/>
                    </MenuFlyoutSubItem>
                    <MenuFlyoutItem Text="Your profile"/>
                    <MenuFlyoutItem Text="Your repository"/>
                    <MenuFlyoutItem Text="Your codespaces"/>
                    <MenuFlyoutItem Text="Your projects"/>
                    <MenuFlyoutItem Text="Your stars"/>
                    <MenuFlyoutItem Text="Your gists"/>
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem Text="Settings" Icon="Setting" Tag="right"/>
                    <MenuFlyoutSeparator/>
                    <MenuFlyoutItem Text="Sign out" Tag="right"/>
                </StackPanel>
            </Flyout>
        </Button.Flyout>
    </Button>