如何在 UWP 中组合 Flyout 和 MenuFlyout？

Question

我想在同一个地方添加弹出窗口和菜单弹出窗口。

像这样： 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>

但是，我做不到。

我该如何解决这个问题？

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

如何在 UWP 中组合 Flyout 和 MenuFlyout？

How to combine Flyout and MenuFlyout in UWP?

c#

xaml

uwp