Make ScrollViewer dynamic fill area

Question

In the example below, I cannot get ScrollViewer to fill the available space. The height is unknown due to the dynamic content above, but is there no way that it can fill the free space, and not exceed it?

<Grid x:Name="Main" Height="200" MaxHeight="200"> <StackPanel> <Grid x:Name="MainContent" Height="170" MaxHeight="170"> <StackPanel> <TextBlock FontSize="24" Text="Dynamic data "/> <TextBlock FontSize="24" Text="height "/> <TextBlock FontSize="24" Text="unknown... "/> <Grid x:Name="Results" Background="Red"> <ScrollViewer> <StackPanel> <TextBlock FontSize="24" Text="Result set... 0"/> <TextBlock FontSize="24" Text="Result set... 1"/> <TextBlock FontSize="24" Text="Result set... 2"/> <TextBlock FontSize="24" Text="Result set... 3"/> </StackPanel> </ScrollViewer> </Grid> </StackPanel> </Grid> <Grid x:Name="Nav"> <Button HorizontalAlignment="Left" Content="Back"/> <Button HorizontalAlignment="Right" Content="Forward"/> </Grid> </StackPanel> </Grid> 

Answer 1

in the MainContent Grid use a DockPanel instead of a StackPanel with LastChildFill=True , something like this:

 <Grid x:Name="MainContent" Height="170" MaxHeight="170"> <DockPanel LastChildFill="True"> <TextBlock DockPanel.Dock="Top" FontSize="24" Text="Dynamic data "/> <TextBlock DockPanel.Dock="Top" FontSize="24" Text="height "/> <TextBlock DockPanel.Dock="Top" FontSize="24" Text="unknown... "/> <Grid x:Name="Results" Background="Red"> <ScrollViewer> <StackPanel> <TextBlock FontSize="24" Text="Result set... 0"/> <TextBlock FontSize="24" Text="Result set... 1"/> <TextBlock FontSize="24" Text="Result set... 2"/> <TextBlock FontSize="24" Text="Result set... 3"/> </StackPanel> </ScrollViewer> </Grid> </DockPanel> </Grid> 

then the last DockPanel will adjust to the available space

Answer 2

First, your layout is a mess. Why do you need to put the StackPanel as the only child of the Grid . For strings? Use RowDefinitions and ColumnDefinitions When Working With Grid

From my understanding of your layout, you can pretty much do everything you need with just the Grid and DockPanel . When working with container layouts, strive to ensure that your layout with the least number of containers is "effective." Even if this does not bring any real benefits to the job, it is extremely helpful when navigating through the code of another user so as not to have excessive nesting.

 <Grid x:Name="Main"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <TextBlock Grid.Row="0" FontSize="24" Text="Dynamic data " /> <TextBlock Grid.Row="1" FontSize="24" Text="height " /> <TextBlock Grid.Row="2" FontSize="24" Text="unknown... " /> <ScrollViewer Grid.Row="3" Background="Red"> <StackPanel> <TextBlock FontSize="24" Text="Result set... 0" /> <TextBlock FontSize="24" Text="Result set... 1" /> <TextBlock FontSize="24" Text="Result set... 2" /> <TextBlock FontSize="24" Text="Result set... 3" /> </StackPanel> </ScrollViewer> <DockPanel x:Name="Nav" Grid.Row="4" LastChildFill="False"> <Button Content="Back" DockPanel.Dock="Left" /> <Button Content="Forward" DockPanel.Dock="Right" /> </DockPanel> </Grid> 

This should give you everything you are looking for. If you need to limit Height dimensions to static values, add them accordingly when absolutely necessary.

Regarding the “Nav” DockPanel , yes, you can use the HorizontalAlignment so that your Button is left and right and thus does not use the DockPanel , but this would contradict the concept of trying to save the “one” in the Grid cell and therefore using the DockPanel .

Answer 3

I solved this by adding another element for the height of the Scrollviewer to bind:

 <grid Grid.row="3" x:Name="Mirror"> </grid> <ScrollViewer Grid.row="3" Height="{Binding ElementName=uxMirror,XPath=ActualHeight}"> </ScrollViewer>