UWP App 中的垂直多级导航菜单

Question

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

Answer 1

我现在正在开发一个涉及使用此类导航的 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 控件。

它有一个窗格和一个网格。

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

Pane 分为三列，每列包含 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();
    }

希望这会有所帮助。

祝你有美好的一天。

问候，

劳纳克·帕特尔