C# UWP应用程序中的垂直多级导航菜单

我正在开发UWP应用程序此应用程序包含一些产品类别，并在此类别中创建另一个产品列表，这是高达3级的导航。

---

我现在正在开发一个UWP应用程序，其中包括使用这种导航。 让我为您介绍基本代码，然后您可以根据需要修改它

因此，我的XAML看起来像这样：

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <RelativePanel Grid.Row="0" Background="Blue">
        <Button x:Name="button" Content="&#xE700;" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="50" Height="50" Foreground="White" BorderBrush="{x:Null}" Background="{x:Null}" FontFamily="Segoe MDL2 Assets" RelativePanel.AlignLeftWithPanel="True" Click="button_Click"/>
        <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Your App Name" Foreground="#FFF7F7F7" RelativePanel.AlignVerticalCenterWithPanel="True" RelativePanel.AlignRightWith="" RelativePanel.RightOf="button" Margin="10,0,0,0" FontSize="22"/>

    </RelativePanel>
    <SplitView x:Name="MySplitView"  IsPaneOpen="False" OpenPaneLength="220"  Grid.Column="0" PaneBackground="SkyBlue" Grid.Row="1" d:LayoutOverrides="LeftMargin, RightMargin, TopMargin, BottomMargin">
        <SplitView.Pane>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <ListView x:Name="_one" Margin="10,0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Tapped="TextBlock_Tapped" Text="{Binding}" SelectionHighlightColor="{x:Null}" Foreground="White"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <ListView x:Name="_two" Grid.Column="1"  Margin="10,0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Tapped="TextBlock_Tapped_1"  Text="{Binding}" SelectionHighlightColor="{x:Null}" Foreground="White"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
                <ListView x:Name="_three" Grid.Column="2"  Margin="10,0">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding}" SelectionHighlightColor="{x:Null}" Foreground="White"/>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>

            </Grid>
        </SplitView.Pane>
        <Grid>
            <TextBlock Text="Your Content" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="36"/>
        </Grid>
    </SplitView>
</Grid>

如您所见，我有一个名为“MySplitView”的SplitView控件

它有一个窗格和一个网格

窗格包含导航，而网格包含应用程序的内容

窗格分为三列，每列包含ListView

三个ListView包含一个用于显示项目的简单TextBlock控件，以及该TextBlock控件上的单击事件，以显示基于该项目的第二或第三个子列表

背后的代码是：

public List<string> mainList;
    public List<SubItem> secondList, thirdList;
    public BlankPage1()
    {
        this.InitializeComponent();

        mainList = new List<string>();
        mainList.Add("Main Item 1");
        mainList.Add("Main Item 2");
        mainList.Add("Main Item 3");
        mainList.Add("Main Item 4");
        mainList.Add("Main Item 5");

        secondList = new List<SubItem>();
        secondList.Add(new SubItem { mainItem = "Main Item 1", subItem = "Second Item 1" });
        secondList.Add(new SubItem { mainItem = "Main Item 1", subItem = "Second Item 2" });
        secondList.Add(new SubItem { mainItem = "Main Item 1", subItem = "Second Item 3" });
        secondList.Add(new SubItem { mainItem = "Main Item 2", subItem = "Second Item 1" });
        secondList.Add(new SubItem { mainItem = "Main Item 2", subItem = "Second Item 2" });
        secondList.Add(new SubItem { mainItem = "Main Item 2", subItem = "Second Item 3" });
        secondList.Add(new SubItem { mainItem = "Main Item 3", subItem = "Second Item 1" });
        secondList.Add(new SubItem { mainItem = "Main Item 3", subItem = "Second Item 2" });
        secondList.Add(new SubItem { mainItem = "Main Item 3", subItem = "Second Item 3" });
        secondList.Add(new SubItem { mainItem = "Main Item 4", subItem = "Second Item 1" });
        secondList.Add(new SubItem { mainItem = "Main Item 4", subItem = "Second Item 2" });
        secondList.Add(new SubItem { mainItem = "Main Item 4", subItem = "Second Item 3" });
        secondList.Add(new SubItem { mainItem = "Main Item 5", subItem = "Second Item 1" });
        secondList.Add(new SubItem { mainItem = "Main Item 5", subItem = "Second Item 2" });
        secondList.Add(new SubItem { mainItem = "Main Item 5", subItem = "Second Item 3" });



        thirdList = new List<SubItem>();
        thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 1" });
        thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 2" });
        thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 3" });
        thirdList.Add(new SubItem { mainItem = "Second Item 1", subItem = "Third Item 4" });
        thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 1" });
        thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 2" });
        thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 3" });
        thirdList.Add(new SubItem { mainItem = "Second Item 2", subItem = "Third Item 4" });
        thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 1" });
        thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 2" });
        thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 3" });
        thirdList.Add(new SubItem { mainItem = "Second Item 3", subItem = "Third Item 4" });


        _one.ItemsSource = mainList;

    }

    public class SubItem
    {
        public string mainItem { get; set; }
        public string subItem { get; set; }
    }

    private void TextBlock_Tapped(object sender, TappedRoutedEventArgs e)
    {
        //Main Item is clicked
        //To show Second Item list
        TextBlock tb = sender as TextBlock;
        List<string> seconditems = new List<string>();
        foreach(SubItem s in secondList)
        {
            if(s.mainItem == tb.Text)
            {
                seconditems.Add(s.subItem);
            }
        }

        this._two.ItemsSource = seconditems;
        this._two.UpdateLayout();

        //In case the user clicks the Main Item when already Third list has items
        _three.ItemsSource = null;
        this._three.UpdateLayout();

        //Set OpenPaneLength manually so Items look nice
        MySplitView.OpenPaneLength = _one.Width + _two.Width + 50;
        this.MySplitView.UpdateLayout();
    }

    private void button_Click(object sender, RoutedEventArgs e)
    {
        //To Open Close SplitView
        MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
    }

    private void TextBlock_Tapped_1(object sender, TappedRoutedEventArgs e)
    {
        // Secondary Item is clicked
        // To show thirdlist
        TextBlock tb = sender as TextBlock;
        List<string> thirditems = new List<string>();
        foreach (SubItem s in thirdList)
        {
            if (s.mainItem == tb.Text)
            {
                thirditems.Add(s.subItem);
            }
        }

        this._three.ItemsSource = thirditems;
        this._three.UpdateLayout();

        //Set OpenPaneLength manually so Items look nice
        MySplitView.OpenPaneLength = _one.Width + _two.Width + _three.Width+ 50;
        this.MySplitView.UpdateLayout();
    }

公共列表mainList；
公开名单第二名单，第三名单；
公共网页1（）
{
this.InitializeComponent（）；
mainList=新列表（）；
主列表。添加（“主项目1”）；
主列表。添加（“主项目2”）；
主列表。添加（“主项目3”）；
主列表。添加（“主项目4”）；
主列表。添加（“主项目5”）；
secondList=新列表（）；
添加（新的子项{mainItem=“Main Item 1”，子项=“Second Item 1”}）；
添加（新的子项{mainItem=“Main Item 1”，子项=“第二项2”}）；
添加（新的子项{mainItem=“Main Item 1”，子项=“第二项3”}）；
添加（新的子项{mainItem=“Main Item 2”，子项=“第二项1”}）；
添加（新的子项{mainItem=“Main Item 2”，子项=“Second Item 2”}）；
添加（新的子项{mainItem=“Main Item 2”，子项=“第二项3”}）；
添加（新的子项{mainItem=“Main Item 3”，子项=“第二项1”}）；
添加（新的子项{mainItem=“Main Item 3”，子项=“第二项2”}）；
添加（新的子项{mainItem=“Main Item 3”，子项=“Second Item 3”}）；
添加（新的子项{mainItem=“Main Item 4”，子项=“第二项1”}）；
添加（新的子项{mainItem=“Main Item 4”，子项=“第二项2”}）；
添加（新的子项{mainItem=“Main Item 4”，子项=“第二项3”}）；
添加（新的子项{mainItem=“Main Item 5”，子项=“第二项1”}）；
添加（新的子项{mainItem=“Main Item 5”，子项=“第二项2”}）；
添加（新的子项{mainItem=“Main Item 5”，子项=“第二项3”}）；
thirdList=新列表（）；
添加（新的子项{mainItem=“第二项1”，子项=“第三项1”}）；
添加（新的子项{mainItem=“第二项1”，子项=“第三项2”}）；
添加（新的子项{mainItem=“第二项1”，子项=“第三项3”}）；
添加（新的子项{mainItem=“第二项1”，子项=“第三项4”}）；
添加（新的子项{mainItem=“第二项2”，子项=“第三项1”}）；
添加（新的子项{mainItem=“第二项2”，子项=“第三项2”}）；
添加（新的子项{mainItem=“第二项2”，子项=“第三项3”}）；
添加（新的子项{mainItem=“第二项2”，子项=“第三项4”}）；
添加（新的子项{mainItem=“第二项3”，子项=“第三项1”}）；
添加（新的子项{mainItem=“第二项3”，子项=“第三项2”}）；
添加（新的子项{mainItem=“第二项3”，子项=“第三项3”}）；
添加（新的子项{mainItem=“第二项3”，子项=“第三项4”}）；
_one.ItemsSource=mainList；
}
公共类子项
{
公共字符串mainItem{get；set；}
公共字符串子项{get；set；}
}
私有无效文本块（对象发送器，TappedRoutedEventArgs e）
{
//单击主项
//显示第二项列表的步骤
TextBlock tb=发送方为TextBlock；
List seconditems=新列表（）；
foreach（第二个列表中的子项s）
{
if（s.mainItem==tb.Text）
{
第二项。添加（s.子项）；
}
}
这._two.ItemsSource=第二项；
这个；
//如果用户在第三个列表中已有项目时单击主项目
_3.ItemsSource=null；
这个；
//手动设置OpenPaneLength，使项目看起来更美观
MySplitView.OpenPaneLength=\u one.Width+\u two.Width+50；
this.MySplitView.UpdateLayout（）；
}
私有无效按钮\u单击（对象发送者，路由目标e）
{
//打开或关闭拆分视图
MySplitView.IsPaneOpen=！MySplitView.IsPaneOpen；
}
私有void TextBlock_Tapped_1（对象发送方，tappedroutedventargs e）
{
//单击辅助项
//显示第三名
TextBlock tb=发送方为TextBlock；
List thirditems=新列表（）；
foreach（第三个列表中的子项s）
{
如果（南缅因州）