UWP应用中的垂直多级导航菜单

Question

我正在开发一个UWP应用程序，其中包含一些产品类别，每个类别中又包含另一个产品列表，且导航可达3级。
例如

- Codeguru

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和一个Grid。

Pane包含导航，而Grid包含应用程序的内容。

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();
    }

希望这能有所帮助。

祝你拥有美好的一天。

此致，

Raunaq Patel

- Raunaq Patel