縦向きのネストされたリストビュー

Question

ネストされたリストビューを、メインアイテムのサブアイテムがメインアイテムの右側に表示されるように表示したいとします。ユーザーがメイン項目のみをクリックするとサブ項目が表示されます。

<ListView x:Name="list1" Background="Blue" Width="200" Height="300" VerticalAlignment="Bottom"> 
     <ListView.ItemTemplate> 
      <DataTemplate x:DataType="local:Main"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto"/> 
         <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 
        <TextBlock Text="{x:Bind ItemName}" /> 
        <ListView x:Name="list2" ItemsSource="{x:Bind SubItemsList}" Grid.Row="1"> 
         <ListView.ItemTemplate> 
          <DataTemplate x:DataType="local:Sub"> 
           <TextBlock Foreground="Red" Text="{x:Bind SubItemName}"/> 
          </DataTemplate> 
         </ListView.ItemTemplate> 
        </ListView> 
       </Grid> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
    </ListView> 

上記のコードを使用すると、メインアイテムが連続して取得され、別の行のサブアイテムになります。

Main 1 
Sub 1 
Sub 1 
Main 2 
Sub 2 
Sub 2 

しかし、私の出力は、ユーザーがメイン1​​をクリックした場合、それはようにそのサブ項目を表示しなければならない

Main Items Sub Items 
Main 1  Sub 1 
       Sub 1 
Main 2  Sub 2 
       Sub 2 

でなければなりません。そうでなければ、サブ項目を表示する必要はありません。上記のコードを変更することは可能ですか？

Answer 1

ListViewを使用して求めることができない要件であるため、FlyoutMenuコントロールを使用する必要があります。 ListViewは、クリックされているかどうかにかかわらず、すべてのMainおよびSubItemを表示します。ただし、FlyoutMenuはここでお聞きしたとおりに動作します。クリックされたときにSubItemが表示され、右側（または選択した側）に表示されるようになります。

The microsoft link for the basic idea of Flyout menu

A video tutorial to get you up and running with it right away

これはあなたを助け願っています！