Показать ListViewItem в нижней части

Question

У меня есть простой ListBox внутри панели SplitView с 4 ListBoxItems в нем, как это.

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

Теперь я хочу, чтобы отобразить О ListBoxItem в нижней части панели SplitView. Как я могу это сделать?

Answer 1

Самое легкое решение, чтобы ваш пользовательский интерфейс был похож на то, что у вас есть сейчас, просто использует второй 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> 

Поскольку я использую Height="*" на первый ряду и Auto на второй, нижний О кнопках всегда виден и верхний листать список, если слишком много элементов в списке.

Еще одна вещь, чтобы исправить это выбранный элемент, так как вы теперь имеем дело с 2 ListBox эс вместо 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(); 
}