WPF：使 ListBox 成为父级的全高，但也可以滚动

Question

I have a simple app that has three columns in the window. In the middle column, I have a ListBox component.

What I want is the ListBox to stretch the full height of the column, but also be scrollable when it has a lot of stuff in it. Right now, it's not scrollable. I can fix this by adding a Height (eg Height="300" ) property to it, but then it won't stretch with the column anymore. What do I do?

<Window x:Class="UI.MainWindow"
    <!-- window stuff -->
<Border Padding="10">
    <StackPanel>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" MinWidth="150" MaxWidth="200" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <!-- column 1 stuff -->

            <StackPanel x:Name="LogLines" Grid.Column="1">
                <StackPanel Orientation="Horizontal">
                    <Label>Search</Label>
                    <TextBox x:Name="Searchbox" Height="20" TextWrapping="Wrap" Text="TextBox" Width="120" />
                    <CheckBox x:Name="ErrorsOnlyCheckbox" HorizontalAlignment="Right">
                        Errors only
                    </CheckBox>
                </StackPanel>

                <ListBox
                    x:Name="LogLinesList"
                    ScrollViewer.CanContentScroll="True" />
            </StackPanel>

            <GridSplitter Grid.Column="1" Width="10" />

            <!-- column 3 stuff -->
        </Grid>
    </StackPanel>
</Border>
</Window>

Answer 1

Container of your ListBox is StackPanel . StackPanel will increase regarding child controls. You should use another container, try to use Grid instead

<Grid x:Name="LogLines" Grid.Column="1">
     <Grid.RowDefinitions>
         <RowDefinition Width="Auto"/>
         <RowDefinition Width="*" />
     </Grid.RowDefinitions>
    
     <StackPanel Orientation="Horizontal" Grid.Row="0">
          ....
     </StackPanel>
    
     <ListBox Grid.Row="1"/>
</Grid>