Vertical Multi-level Navigation Menu in UWP App

Question

I m Working on UWP App this app contain some Products Categories and inside this Category create Another Product list and this is up to 3-level navigation.
For Example

Answer 1

I am working on an UWP app right now which involves use of such navigation. Let me hook you up with basic code and then you can modify it based on your needs.

So, my XAML looks something like this:

 <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>

As you can see I have a SplitView control named 'MySplitView'.

It has a Pane and a Grid.

The pane contains navigation while the Grid contains content of the Application.

The Pane is divided into three columns where each column contains ListView.

The three ListView contains a simple TextBlock control to display items and a click event on that TextBlock control to show the secondary or third sublist based on that item.

The code behind is:

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

Hope this helps.

Have a Good Day.

Regards,

Raunaq Patel