Ich arbeite an UWP App diese App enthalten einige Produkte Kategorien und in dieser Kategorie erstellen Sie eine andere Produktliste und dies ist bis zu 3-Level-Navigation.
Vertikale Multi-Level-Navigationsmenü in UWP App
Ich arbeite gerade an einer UWP-App, die die Verwendung solcher Navigation beinhaltet Lassen Sie mich mit dem grundlegenden Code verbinden und dann können Sie ihn nach Ihren Bedürfnissen ändern.
So sieht mein XAML etwas wie folgt aus:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RelativePanel Grid.Row="0" Background="Blue">
<Button x:Name="button" Content="" 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>
Wie Sie Ich habe eine Splitview Steuerelement mit dem Namen ‚MySplitView‘ sehen kann.
Es hat eine Scheibe und ein Gitter.
Der Bereich enthält Navigation, während das Grid Inhalt der Anwendung enthält.
Der Bereich ist in drei Spalten unterteilt, wobei jede Spalte ListView enthält.
Die drei ListView enthält ein einfaches TextBlock-Steuerelement zum Anzeigen von Elementen und ein Klickereignis für dieses TextBlock-Steuerelement, um die sekundäre oder dritte Unterliste basierend auf diesem Element anzuzeigen.
Der Code hinter ist:
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();
}
Hoffnung, das hilft.
Einen schönen Tag.
Grüße,
Raunaq Patel