c# - page - Menú de navegación vertical de niveles múltiples en la aplicación UWP

uwp navigate to page

Question

Estoy trabajando en la aplicación UWP esta aplicación contiene algunas categorías de productos y dentro de esta categoría crea otra lista de productos y esta es una navegación de hasta 3 niveles.
Por ejemplo

Answer 1

Estoy trabajando en una aplicación UWP ahora que implica el uso de dicha navegación. Déjame conectarte con un código básico y luego puedes modificarlo en función de tus necesidades.

Entonces, mi XAML se ve así:

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

Como puede ver, tengo un control SplitView llamado ''MySplitView''.

Tiene un panel y una rejilla.

El panel contiene navegación mientras que la Cuadrícula contiene contenido de la Aplicación.

El Panel está dividido en tres columnas donde cada columna contiene ListView.

Los tres ListView contienen un control TextBlock simple para mostrar los elementos y un evento click en ese control TextBlock para mostrar la sublista secundaria o tercera basada en ese elemento.

El código detrás es:

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

Espero que esto ayude.

Tenga un buen día.

Saludos,

Raunaq Patel