Nesting, ListView inside ListView DataTemplate (Or TreeView representation)

This article builds a data model to represent the nesting relationship which can be displayed in a tree like structure inside nested ListViews. This tries to solve this MSDN problem and create a structure as shown below

Data Model

class Menu
    {
        public ObservableCollection<TopMenu> TopMenuItems { get; set; }
        public Menu()
        {
            TopMenuItems = new ObservableCollection<TopMenu>();
        }
    }
 
    class TopMenu
    {
        public string GroupName { get; set; }
        public ObservableCollection<SubMenu> SubMenuItems { get; set; }
        public TopMenu()
        {
            SubMenuItems = new ObservableCollection<SubMenu>();
        }
    }
 
    class SubMenu
    {
        public string ItemName { get; set; } 
    }

Data in Page Constructor

            Menu menu = new Menu();

            menu.TopMenuItems.Add(new TopMenu() { GroupName = "Basic Reports - Mobile" });
            menu.TopMenuItems[0].SubMenuItems.Add(new SubMenu() { ItemName = "Sales Reports - mobile" });
            menu.TopMenuItems.Add(new TopMenu() { GroupName = "Enhanced Reports - Mobile" });
            menu.TopMenuItems[1].SubMenuItems.Add(new SubMenu() { ItemName = "Subcategory Month - mobile" });
            menu.TopMenuItems[1].SubMenuItems.Add(new SubMenu() { ItemName = "Top Categories - mobile" });
            this.DataContext = menu;

XAML for ListView 

<StackPanel Orientation="Vertical">
            <ListView Name="groupListView" ItemsSource="{Binding TopMenuItems}" CanDragItems="True" CanReorderItems="True" AllowDrop="True" IsSwipeEnabled="True" SelectionMode="None">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <Border x:Name="bordermenu">
                                <TextBlock Foreground="Red" Text="{Binding GroupName}"/>
                            </Border>
                            <ListView Name="itemListViewss" ItemsSource="{Binding SubMenuItems}" CanDragItems="True" CanReorderItems="True" AllowDrop="True" IsSwipeEnabled="True" SelectionMode="None">
                                <ListView.ItemTemplate>
                                    <DataTemplate>
                                        <StackPanel Tapped="StackPanel_Tapped">
                                            <Border x:Name="bordersubmenu">
                                                <TextBlock Foreground="Blue" Text="{Binding ItemName}" x:Name="submenu" /> 
                                            </Border>
                                        </StackPanel>
                                    </DataTemplate>
                                </ListView.ItemTemplate>
                            </ListView>
                        </StackPanel>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
             
            <TextBlock Name="txtSubMenuTapped" FontSize="30" Tag="Sub Menu Selected - " Text="Sub menu tapped - None"/>
        </StackPanel>

Finally, event Handler (StackPanel_Tapped defined in ListView DataTemplate) in page which takes of care of retrieving which sub-menu item was clicked or tapped.

private void StackPanel_Tapped(object sender, TappedRoutedEventArgs e)
       {
           TextBlock txtBlock = ((Windows.UI.Xaml.RoutedEventArgs)(e)).OriginalSource as TextBlock;
           if (txtBlock != null)
           {
               txtSubMenuTapped.Text = txtSubMenuTapped.Tag.ToString() + txtBlock.Text;
           }
           e.Handled = true;
       }