使 Expander 中的 ListBox 不会超出其他控件并滚动

Question

我想在扩展控件中显示一个包含许多项目的列表框。我不想指定 ListBox 的高度，因为我希望保留 UI 中的 fluid/flex 类型响应能力 - 所以明确的高度规范不是这里的方式。

目前的情况是，展开器展开后，ListBox占满整个界面，不显示滚动条。有没有办法让扩展器尊重其下方的控件，适当地显示滚动条和大小。

这是显示行为前后的屏幕截图：

这是我希望 UI 实际看起来像的模拟版本的屏幕截图：

这是基本的 wpf xaml 代码：

   <Grid ShowGridLines="False">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
   </Grid.RowDefinitions>

    <Expander Grid.Row="0" Header="A long list of stuff" Margin="5" >
        <ListBox Margin="5" >
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
        </ListBox>
    </Expander>


    <Expander Grid.Row="1" Header="List of stuff" Margin="5" >
        <ListBox Margin="5" >
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
        </ListBox>
    </Expander>

    <Expander Grid.Row="2" Header="List of more stuff" Margin="5"  >
        <ListBox Margin="5" >
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
            <ListBoxItem>ListBox Item #1</ListBoxItem>
            <ListBoxItem>ListBox Item #2</ListBoxItem>
            <ListBoxItem>ListBox Item #3</ListBoxItem>
        </ListBox>
    </Expander>

</Grid>

Answer 1

您可以通过将网格的对齐方式更改为 'Top' 并向所有扩展器添加 2 个事件来实现此目的

<Grid VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Expander Grid.Row="0" Header="A long list of stuff" Margin="5" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
            <ListBox Margin="5" >
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
            </ListBox>
        </Expander>


        <Expander Grid.Row="1" Header="List of stuff" Margin="5" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
            <ListBox Margin="5" >
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
            </ListBox>
        </Expander>

        <Expander Grid.Row="2" Header="List of more stuff" Margin="5" Expanded="Expander_Expanded" Collapsed="Expander_Collapsed">
            <ListBox Margin="5" >
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
                <ListBoxItem>ListBox Item #1</ListBoxItem>
                <ListBoxItem>ListBox Item #2</ListBoxItem>
                <ListBoxItem>ListBox Item #3</ListBoxItem>
            </ListBox>
        </Expander>
    </Grid>

private void Expander_Expanded(object sender, RoutedEventArgs e)
{
    var expander = (Expander)sender;
    var row = Grid.GetRow(expander);
    ((Grid)expander.Parent).RowDefinitions[row].Height = new GridLength(1, GridUnitType.Star);
}

private void Expander_Collapsed(object sender, RoutedEventArgs e)
{
    var expander = (Expander)sender;
    var row = Grid.GetRow(expander);
    ((Grid)expander.Parent).RowDefinitions[row].Height = new GridLength(1, GridUnitType.Auto);
}

使 Expander 中的 ListBox 不会超出其他控件并滚动

Make a ListBox in an Expander not overrun other controls and scroll

c#

wpf

expander