Why doesn't the ScrollViewer limit vertical expansion? - wpf

Question

I've been working with WPF for several years, now, yet the layout mechanism often makes me feel like a noob (and maybe I still am). My page is fairly complex. Below, I've eliminated much of the unrelated content, but left the general structure of the page in tact. I have two ItemsControls. Both have ScrollViewers. They both used to have the ScrollViewrs wrapping the <ItemsPresenter />. A post I saw had me try moving the first one to wrap the entire ItemsControl to see if that fixed my issue. It did not.
The main differences between the ItemsControls is that the first has a series of DataTemplates for the content, where the second defines the content inline.
Everything displays properly with the exception that the first one forces its Grid cell to expand to accommodate all content, rather than enabling the vertical scroll bar. The second instance, properly activates the ScrollViewer when the content is to long.
What am I missing? (Hopefully something stupid I just missed.)
Here's my XAML:
<vsupport:CBUserControlBase x:Class="CB.WPFClient.Views.BillingMasterView" ... >
<vsupport:CBUserControlBase.Resources>
<Storyboard>
<ThicknessAnimation />
</Storyboard>
<Storyboard>
<ThicknessAnimation />
</Storyboard>
</vsupport:CBUserControlBase.Resources>
<Grid Margin="1" IsEnabled="{Binding Path=IsBusy, Converter={StaticResource BoolInverse}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<local:FirmSelectorView Grid.Row="0" Margin="1,1,1,1"/>
<Grid Grid.Row="1" ClipToBounds="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Margin="1,0,0,0">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Column="1" Margin="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.IsSharedSizeScope="True">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Background="White">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Row="1" Margin="0,1,0,0">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Row="2" Margin="0,1,0,0">
<!-- Unrelated Content -->
</Grid>
<Grid Grid.Row="3" Margin="0,1,0,0">
<!-- Unrelated Content -->
</Grid>
<!-- Notes and Related Entities -->
<Grid Grid.Row="4" Margin="0,1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<!-- Unrelated Content -->
</Grid>
<!-- Related Entities -->
<Grid Grid.Column="1" Margin="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Background="{StaticResource brush_Logo}" Foreground="White" Padding="5,0,0,0" Height="24"
HorizontalContentAlignment="Left" VerticalContentAlignment="Center"
Content="Related Entities" />
<!-- This one expands when multiple content items are longer than vertical space. -->
<!-- Scroll viewer used to be inside ItemsControl. Tried moving it to see if that helped. -->
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">
<ItemsControl ItemsSource="{Binding Path=RelatedEntities}" x:Name="RelatedEntitiesItemsControl">
<ItemsControl.Resources>
<DataTemplate DataType="{x:Type models:C}">
<Grid Margin="2,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="5,0,0,5" Padding="0,2,0,2">
<TextBlock Foreground="White" FontSize="10" Background="Transparent">
</TextBlock>
</Border>
<Border Grid.Column="1" Background="#FFF5F7FF" CornerRadius="0,5,5,0" Margin="3,0,0,0">
<Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type models:P}">
<Grid Margin="2,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="5,0,0,5" Padding="0,2,0,2" Background="{StaticResource brush_Plan}">
<TextBlock Foreground="White" FontSize="10" Background="Transparent">
</TextBlock>
</Border>
<Border Grid.Column="1" Background="#FFF5F7FF" CornerRadius="0,5,5,0" Margin="3,0,0,0">
<Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type models:A}">
<Grid Margin="2,2,2,2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" CornerRadius="5,0,0,5" Padding="0,2,0,2" Background="{StaticResource brush_Account}">
<TextBlock Foreground="White" FontSize="10" Background="Transparent">
</TextBlock>
</Border>
<Border Grid.Column="1" Background="#FFF5F7FF" CornerRadius="0,5,5,0" Margin="3,0,0,0">
<Grid>
</Grid>
</Border>
</Grid>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<!-- Old ScrollViewer Location -->
<ItemsPresenter />
<!-- Old ScrollViewer Location -->
</ControlTemplate>
</ItemsControl.Template>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Grid>
<ContentControl Grid.Row="1">
</ContentControl>
<Grid Grid.Row="2" Margin="0,1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
</Grid>
<Grid Grid.Column="1" Margin="1,0,0,0">
</Grid>
<!-- This one works properly -->
<Grid Grid.Column="2" Margin="1,0,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
</Grid>
<ItemsControl Grid.Row="1" AlternationCount="2" ItemsSource="{Binding Path=Stuff}">
<ItemsControl.Template>
<ControlTemplate TargetType="{x:Type ItemsControl}">
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</ItemsControl.Template>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Margin="0,1,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label />
<Label />
</Grid>
<DataTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="WhiteSmoke" TargetName="StaticTextLabel" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="{StaticResource brush_LogoLight}" TargetName="StaticTextLabel" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</Grid>
<Grid Grid.Row="3" Margin="0,1,0,0">
</Grid>
</Grid>
</Grid>
</Grid>
</vsupport:CBUserControlBase>

Answer 1

Just a tip....you'll have a bit better luck getting answers in future by providing a proper MCVE. In this particular case your issue can be boiled down to this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden">
<ItemsControl>
<ItemsControl.ItemsSource>
<x:Array Type="{x:Type sys:String}">
<sys:String>Hello World</sys:String>
<sys:String>Goodbye World</sys:String>
<sys:String>Hello World</sys:String>
<sys:String>Goodbye World</sys:String>
<!-- ... etc ... -->
<sys:String>Hello World</sys:String>
<sys:String>Goodbye World</sys:String>
</x:Array>
</ItemsControl.ItemsSource>
</ItemsControl>
</ScrollViewer>
</Grid>
When you do Height="Auto" in your row definition you're basically saying "give the controls on this row as much space as they need, which ScrollViewer promptly does irrespective of how much space its parent has. When you use Auto in conjunction with more than one row you're effectively telling the layout manager that you are expecting the first row to never exceed the amount of available space...otherwise, why would you declare another row beneath it?
The reason WPF layout is tricky is because it's different to most other layouts. Most things start at the top and work their way down, figuring out how much space to allocate based on how much is available. WPF starts by asking each control how much it wants, and then works it's way up. Once it gets to the top THEN it walks back down assigning actual sizes. So in your case you've got this ScrollViewer asking for more space than is actually available, but it's inside about 7 or 8 layers of nested Grid panels. At each level while walking up the tree the layout manager is looking at these saying "how should I split the available space amongst this Grid's children?", and each one of these is specifying "Auto" for the row in question, which is effectively saying "give this particular row as much as it wants, even if it's more than I have to offer".
I know this probably isn't what you want to hear but my suggestion would be to throw the whole layout out and start again. RowSpan and ColumnSpan are absolutely key in layouts like this, if you start using them then you'll find you can collapse the entire thing down to just a few nested layers, and you won't have ScrollViewer problems like the one above. If that's not an option then you're going to have to walk up the visual tree yourself changing each RowDefinition from Auto to something else that better meets your actual GUI requirements.