UWPアプリケーションの垂直マルチレベルナビゲーションメニュー

Question

I m UWPアプリケーションでの作業このアプリケーションにはいくつかの製品カテゴリがあり、このカテゴリ内に別の製品リストを作成することができます。これは3レベルまでのナビゲーションです。
For Example

Answer 1

私は現在、このようなナビゲーションの使用を含むUWPアプリケーションに取り組んでいます。 基本的なコードを書いてみましょう。あなたのニーズに合わせて修正することができます。

<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コントロールを持って見ることができるように：

だから、私のXAMLは次のようになります。

ペインとグリッドがあります。

ペインにはナビゲーションが含まれ、グリッドにはアプリケーションのコンテンツが含まれています。

このペインは3つの列に分割され、各列にはListViewが含まれています。

3つのListViewには、アイテムを表示する単純なTextBlockコントロールと、そのアイテムに基づいて2番目または3番目のサブリストを表示する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パテル