Question

我在SplitView窗格中有一个简单的ListBox，里面有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窗格的底部显示About 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，因此底部的“关于”按钮始终可见，如果列表中有太多项目，则顶部列表将滚动。< / p>

要修复的另一件事是所选项目，因为您现在处理的是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

1 个答案: