Windows 10 UWP app menu flyout inside menu item

Shady Published at Dev

shady

Is it possible to have a menu flyout inside a menu flyout item?

        <AppBarButton x:Name="Button" Icon="Add" Label="Create List">
            <AppBarButton.Flyout>
                <MenuFlyout>
                    <MenuFlyoutItem Text="b1">
                        <FlyoutBase.AttachedFlyout>
                            <MenuFlyout x:Name="ItemsMenu" Placement="Left">
                                <MenuFlyoutItem Text="test1"/>
                                <MenuFlyoutItem Text="test2"/>
                            </MenuFlyout>
                        </FlyoutBase.AttachedFlyout>
                    </MenuFlyoutItem>
                    <MenuFlyoutItem Text="b2" />
                    <MenuFlyoutItem Text="b3" />
                    <MenuFlyoutItem Text="b4" />
                    <MenuFlyoutItem Text="b5" />
                </MenuFlyout>
            </AppBarButton.Flyout>
        </AppBarButton>

Clicking on the item just makes the menu disappear. I tried calling ItemsMenu.ShowAt() on mouse pointer enter but it just makes the menu disappear when I hover over it. Any one have any ideas?

John Zhang

I have tried your code but can't make it work , so I figure out a roundabout method to solve it, I hope this will provide some inspirations for you:

<Page.Resources>
    <CollectionViewSource x:Key="cvs" x:Name="cvs" IsSourceGrouped="True"/>
    <Flyout x:Key="DeclarativeAttachedFlyout">
        <StackPanel>
            <Button Content="b1">
                <Button.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="t1"></MenuFlyoutItem>
                        <MenuFlyoutItem Text="t2"></MenuFlyoutItem>
                        <MenuFlyoutItem Text="t3"></MenuFlyoutItem>
                        <MenuFlyoutItem Text="t4"></MenuFlyoutItem>
                    </MenuFlyout>
                </Button.Flyout>
            </Button>
            <Button Content="b2"></Button>
            <Button Content="b3"></Button>
            <Button Content="b4"></Button>
            <Button Content="b5"></Button>
        </StackPanel>
    </Flyout>

 <MenuFlyout x:Key="DeclarativeAttachedFlyout2">
        <MenuFlyoutItem Text="b1" ></MenuFlyoutItem>
        <MenuFlyoutItem Text="b2" ></MenuFlyoutItem>
        <MenuFlyoutItem Text="b3" ></MenuFlyoutItem>
        <MenuFlyoutItem Text="b4" ></MenuFlyoutItem>
        <MenuFlyoutItem Text="b5" ></MenuFlyoutItem>
        <MenuFlyoutSubItem Text="s1">
            <MenuFlyoutItem Text="b6"></MenuFlyoutItem>
        </MenuFlyoutSubItem>
    </MenuFlyout>
</Page.Resources>
<AppBarButton x:Name="button" Icon="Add" Label="Create List" Flyout="{StaticResource DeclarativeAttachedFlyout}"> </AppBarButton>
<AppBarButton x:Name="button" Icon="Add" Label="Create List" Flyout="{StaticResource DeclarativeAttachedFlyout2}"> </AppBarButton>

Here is a detailed explain about flyout , you may click this

Collected from the Internet

Please contact [email protected] to delete if infringement.