在底部显示 ListViewItem

Question

我在 SplitView 窗格中有一个简单的 ListBox，其中有 4 个 ListBoxItem，就像这样。

      <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

要使您的 UI 样式与现在的样式保持相似，最简单的解决方案是使用第二个 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();
}

在底部显示 ListViewItem

Display ListViewItem at Bottom

c#

windows

visual-studio

uwp

windows-10-universal