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

代替