ListViewItemをボトムに表示

Question

このように4つのListBoxItemがあるSplitViewペインに単純なListBoxがあります。

 <SplitView.Pane> 
      <ListBox SelectionChanged="ListBox_SelectionChanged" Name="mListBox" Width="250" HorizontalAlignment="Stretch"> 
       <ListBoxItem Name="Landing_Page"> 
         <StackPanel Orientation="Horizontal" > 
          <TextBlock Text="&#xE10F;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
          <TextBlock Text="Mainpage" Margin="16,0,0,0"/> 
         </StackPanel> 
        </ListBoxItem> 
        <ListBoxItem Name="Page1"> 
         <StackPanel Orientation="Horizontal" > 
          <TextBlock Text="&#xE8D1;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
          <TextBlock Text="Page1" Margin="16,0,0,0"/> 
         </StackPanel> 
        </ListBoxItem> 
        <ListBoxItem Name="Page2"> 
         <StackPanel Orientation="Horizontal" > 
          <TextBlock Text="&#xE774;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
          <TextBlock Text="Page 2" Margin="16,0,0,0"/> 
         </StackPanel> 
        </ListBoxItem> 
       <ListBoxItem Name="About"> 
        <StackPanel Orientation="Horizontal"> 
         <TextBlock Text="&#xE774;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
         <TextBlock Text="About the App" Margin="16,0,0,0"/> 
        </StackPanel> 
       </ListBoxItem> 
      </ListBox> 
     </SplitView.Pane> 

ここで、About ListBoxItemをSplitViewペインの下部に表示したいとします。 どうすればいいですか？

Answer 1

あなたのUIのスタイルを現在のものに似せた最も簡単な解決策は、2番目のListBoxを使用して、グリッドを使用して下部に配置することです。

<SplitView.Pane> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 

     <ListBox SelectionChanged="TopListBox_SelectionChanged" Name="TopListBox" Width="250" HorizontalAlignment="Stretch" Grid.Row="0" VerticalAlignment="Top"> 
      <ListBoxItem Name="Landing_Page"> 
       <StackPanel Orientation="Horizontal" > 
        <TextBlock Text="&#xE10F;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
        <TextBlock Text="Mainpage" Margin="16,0,0,0"/> 
       </StackPanel> 
      </ListBoxItem> 
      <ListBoxItem Name="Page1"> 
       <StackPanel Orientation="Horizontal" > 
        <TextBlock Text="&#xE8D1;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
        <TextBlock Text="Page1" Margin="16,0,0,0"/> 
       </StackPanel> 
      </ListBoxItem> 
      <ListBoxItem Name="Page2"> 
       <StackPanel Orientation="Horizontal" > 
        <TextBlock Text="&#xE774;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
        <TextBlock Text="Page 2" Margin="16,0,0,0"/> 
       </StackPanel> 
      </ListBoxItem> 
     </ListBox> 

     <ListBox SelectionChanged="BottomListBox_SelectionChanged" Name="BottomListBox" Width="250" HorizontalAlignment="Stretch" Grid.Row="1"> 
      <ListBoxItem Name="About"> 
       <StackPanel Orientation="Horizontal"> 
        <TextBlock Text="&#xE774;" Width="16" Height="16" FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="4,0,0,2" TextAlignment="Center" FontFamily="Segoe MDL2 Assets"/> 
        <TextBlock Text="About the App" Margin="16,0,0,0"/> 
       </StackPanel> 
      </ListBoxItem> 
     </ListBox> 
    </Grid> 
</SplitView.Pane> 

私は2番目に最初の行のHeight="*"とAutoを使用していますので、ボタンについて底が常に表示され、あまりにも多くの項目がリストにある場合、トップリストがスクロールします。あなたは今、2個のListBox ESの代わりに、1

private void TopListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    BottomListBox.SelectedItem = null; 
    TopListBox.SelectedItem = e.AddedItems.FirstOrDefault(); 
} 

private void BottomListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) 
{ 
    TopListBox.SelectedItem = null; 
    BottomListBox.SelectedItem = e.AddedItems.FirstOrDefault(); 
} 

を扱っているので、修正する

もう一つは、選択した項目です