How to create a MenuFlyoutItem in UWP?

Viewed 305

I need to create a MenuFlyoutItem like the Image below,

enter image description here

How to create, this type of MenuFlyoutItem in UWP?

1 Answers

need to create a MenuFlyoutItem like the Image below,

You could use MenuFlyoutSubItem to make next level menu items. And make the end level like above in MenuFlyoutItem's Template

For example

<Button Content="File Options">
    <Button.Flyout>
        <MenuFlyout>
            <MenuFlyoutItem Text="Open" />
            <MenuFlyoutSubItem Text="Send to">
                <MenuFlyoutItem Text="Bluetooth" />
                <MenuFlyoutItem Text="Desktop (shortcut)" />
                <MenuFlyoutSubItem Text="Compressed file">
                    <MenuFlyoutItem>
                        <MenuFlyoutItem.Template>
                            <ControlTemplate>
                                <StackPanel x:Name="endLevelContent">
                                    <TextBlock
                                        Margin="0,0,0,12"
                                        Style="{ThemeResource BaseTextBlockStyle}"
                                        Text="All items will be removed. Do you want to continue?" />
                                    <Button Click="DeleteConfirmation_Click" Content="Yes, empty my cart" />
                                </StackPanel>
                            </ControlTemplate>
                        </MenuFlyoutItem.Template>  
                    </MenuFlyoutItem> 
                </MenuFlyoutSubItem>
            </MenuFlyoutSubItem>
        </MenuFlyout>
    </Button.Flyout>
</Button>

Update

<MenuFlyoutSubItem Text="Compressed file">
    <MenuFlyoutItem>
        <MenuFlyoutItem.Template>
            <ControlTemplate>
                <StackPanel x:Name="endLevelContent">
                    <ListView Loaded="ListView_Loaded">
                        <ListView.ItemTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding}"/>
                            </DataTemplate>
                        </ListView.ItemTemplate>
                    </ListView>
                </StackPanel>
            </ControlTemplate>
        </MenuFlyoutItem.Template>
    </MenuFlyoutItem>
</MenuFlyoutSubItem>

Code behind

public ObservableCollection<string> IconItems { get; set; } = new ObservableCollection<string>();
private void ListView_Loaded(object sender, RoutedEventArgs e)
 {
     for (int i = 0; i < 10; i++)
     {
         IconItems.Add($"index{i}");
     }
     var listview = sender as ListView;
     listview.ItemsSource = IconItems;
 }
Related