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

现在我想在SplitView窗格的底部显示关于ListBoxItem。 我该怎么做？

Answer 1

最简单的解决方案就是使用第二个ListBox并将其放置在底部（使用Grid），以保持UI样式类似于现在的样式。

<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 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(); 
} 

代替