Why ScrollViewer overrides Grid row height in wpf?

Question

I have a ScrollViewer which contains a Grid having two rows of height '*'

<ScrollViewer>
    <Grid HorizontalAlignment="Stretch">
      <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
      <GroupBox Grid.Row="0" Grid.Column="0"                    
                  Header="XYZ" 
                  VerticalAlignment="Stretch"    
                  HorizontalAlignment="Stretch"
                  Margin="0,10,0,0" 
                  Width="Auto" MinWidth="160"
                  BorderThickness="0"
                  Style="{StaticResource MyGroupBoxStyle}">
        <ListBox Name="lstMentorGroups" IsSynchronizedWithCurrentItem="True"                      
                  ItemsSource="{Binding  Path=MyCollection}"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Style="{StaticResource MyListBoxStyle}">
          <ListBox.ItemTemplate>
            <DataTemplate >
              <TextBlock Text="{Binding Path=Name}"/>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </GroupBox>

      <GroupBox Grid.Row="1" Grid.Column="0" MinWidth="160"          
                  Header="ABC" Margin="0,10,0,0"
                  VerticalAlignment="Stretch" 
                  HorizontalAlignment="Stretch"
                  BorderThickness="0"
                  Style="{StaticResource MyGroupBoxStyle}">
        <ListBox ItemsSource="{Binding  Path=List1, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                  HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                  Style="{StaticResource MyListBoxStyle}" Margin="0,0,5,0">
          <ListBox.ItemTemplate>
            <DataTemplate >
              <TextBlock Text="{Binding Path=Prop1}"/>
            </DataTemplate>
          </ListBox.ItemTemplate>
        </ListBox>
      </GroupBox>
    </Grid>
</ScrollViewer>

But at run time 1st Group box gets full height needed by its containing listbox that means it overrides Grid height * to auto

It works fine if I don't use scrollviewer it gives 50-50% height to each groupbox.

Answer 1

You need set the Height of the Grid if it's in the ScrollViewer, otherwise the Grid will have as much Height as it need, which means the ListBox in the Grid will get unlimited Height to display its items.

Answer 2

To ensure that the both rows takes the same height you should use the SharedSizeGroupe So what you should do is:

<ScrollViewer>
<Grid HorizontalAlignment="Stretch" Grid.IsSharedSizeScope="True">
  <Grid.RowDefinitions>
    <RowDefinition SharedSizeGroup="A"  />
    <RowDefinition SharedSizeGroup="A"  />
  </Grid.RowDefinitions>
  <GroupBox Grid.Row="0" Grid.Column="0"                    
              Header="XYZ" 
              VerticalAlignment="Stretch"    
              HorizontalAlignment="Stretch"
              Margin="0,10,0,0" 
              Width="Auto" MinWidth="160"
              BorderThickness="0"
              Style="{StaticResource MyGroupBoxStyle}">
    <ListBox Name="lstMentorGroups" IsSynchronizedWithCurrentItem="True"                      
              ItemsSource="{Binding  Path=MyCollection}"
              HorizontalAlignment="Stretch"
              VerticalAlignment="Stretch"
              Style="{StaticResource MyListBoxStyle}">
      <ListBox.ItemTemplate>
        <DataTemplate >
          <TextBlock Text="{Binding Path=Name}"/>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
  </GroupBox>

  <GroupBox Grid.Row="1" Grid.Column="0" MinWidth="160"          
              Header="ABC" Margin="0,10,0,0"
              VerticalAlignment="Stretch" 
              HorizontalAlignment="Stretch"
              BorderThickness="0"
              Style="{StaticResource MyGroupBoxStyle}">
    <ListBox ItemsSource="{Binding  Path=List1, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
              HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
              Style="{StaticResource MyListBoxStyle}" Margin="0,0,5,0">
      <ListBox.ItemTemplate>
        <DataTemplate >
          <TextBlock Text="{Binding Path=Prop1}"/>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>
  </GroupBox>
</Grid>

Answer 3

As Grid is placed in ScrollViewer so it takes whole space how much it's controls requires. And I don't want to show vertical scroll bar.

I just set Grid MaxHeight to ScrollViewer ActualHeight

MaxHeight="{Binding ElementName=ScrollViewer, Path=ActualHeight}"