WPF: ListBox or other Items Control in a ScrollViewer

Question

We have a form that contains various elements and a datagrid. When the list box is contained in a scroll viewer, all is well when we increase the size of the window. When the window size is decreased the list box remains the same height and the vertical scrollbar becomes active. If you get rid of the height binding on the list box, the list box goes to its maximum required height. If we dont have a list box at all the border behaves as we want.

We can simulate our problem using the following code.

<Window
   x:Class="WpfApplication1.MainWindow"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Title="MainWindow"
   Height="150"
   Width="525">

   <Grid
      Margin="10">

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

            <Border
               x:Name="border"
               MinHeight="40" />

            <ListBox
               Height="{Binding ElementName=border, Path=ActualHeight}">
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
               <ListBoxItem>Item 1</ListBoxItem>
            </ListBox>

            <ToolBar
               Grid.Row="1">
               <Button
                  Content="Add" />
            </ToolBar>
         </Grid>

      </ScrollViewer>
   </Grid>
</Window>

How do we get the ListBox to resize the same way the border does when there is no ListBox?

Answer 1

Not 100% sure what you are looking for, but I think

<ListBox HorizontalAlignment="Stretch"
         VerticalAlignment="Stretch">

might be what you need. It will shrink the list box down until it reaches it's minimum size (to show all the items) then activate the scrollbar.

Answer 2

i'm not sure what you're trying to do here, but if you want the listbox to reduce it height when the window's height is decreased then you have to add Margin to the border so it's like

        <Border
           Margin="5"
           x:Name="border"
           MinHeight="40" />

Note:

this will make the listbox height decreased but then it might activate the inner scroll of the listbox so you will see two scrollbar there.

on another note you can also remove the height="*" of the first rowdefinition so it will have the rest of the grid height.