Grid with two rows and scrollviewers - wpf

Question

I would like to have Grid with two rows. Rows should take only space needed for them (thats why Grid VerticalAlignment is set to Top). When there is not enough space to show both rows scrollbars should appear. I have tried different combinations with Auto, *, MinHeight etc. but without success.
<Window x:Class="WpfApplication5.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WpfApplication5"
Title="MainWindow" Height="388" Width="525" FontSize="25">
<Grid VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Border Height="100" Background="Red" >
<StackPanel>
<TextBlock Text="1"/>
<TextBlock Text="2"/>
<TextBlock Text="3"/>
<TextBlock Text="4"/>
</StackPanel>
</Border>
</ScrollViewer>
<ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Border Background="Green" >
<StackPanel>
<TextBlock Text="1" />
<TextBlock Text="2"/>
<TextBlock Text="3"/>
<TextBlock Text="4"/>
<TextBlock Text="5"/>
<TextBlock Text="6"/>
<TextBlock Text="7"/>
<TextBlock Text="8"/>
<TextBlock Text="9"/>
<TextBlock Text="10"/>
</StackPanel>
</Border>
</ScrollViewer>
</Grid>
</Window>
EDIT Check this image. Why there is not 4 in first row, why there is empty space at bottom.

Answer 1

<Border Height="100" Background="Red" >
Height="100" makes the content in the 1st row no.4 to hide inside. Also, you have made the rows in to two equal parts, however the content is not equal which leaves empty space at the bottom of the window.

Answer 2

There is no solution out of the box, because it depends on what ratio you want between the two scrollviewers, in my example I choose 50/50:
<Window x:Class="WpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Canvas x:Name="OverallCanvas" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Grid x:Name="OverallGrid" Width="{Binding ElementName=OverallCanvas, Path=ActualWidth}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer x:Name="Scroll1" Grid.Row="0" VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="Control1" Background="Red">
<TextBlock Text="1.1"/>
<TextBlock Text="1.2"/>
<TextBlock Text="1.3"/>
<TextBlock Text="1.4"/>
<TextBlock Text="1.5"/>
</StackPanel>
</ScrollViewer>
<ScrollViewer x:Name="Scroll2" Grid.Row="1" VerticalScrollBarVisibility="Auto">
<StackPanel x:Name="Control2" Background="Green">
<TextBlock Text="2.1"/>
<TextBlock Text="2.2"/>
<TextBlock Text="2.3"/>
<TextBlock Text="2.4"/>
<TextBlock Text="2.5"/>
<TextBlock Text="2.6"/>
<TextBlock Text="2.7"/>
<TextBlock Text="2.8"/>
<TextBlock Text="2.9"/>
<TextBlock Text="2.10"/>
</StackPanel>
</ScrollViewer>
</Grid>
</Canvas>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.SizeChanged += MainWindow_SizeChanged;
Control1.SizeChanged += MainWindow_SizeChanged;
Control2.SizeChanged += MainWindow_SizeChanged;
}
private void MainWindow_SizeChanged(object sender, SizeChangedEventArgs e)
{
UpdateScrollHeight();
}
private void UpdateScrollHeight()
{
double overallHeight = OverallCanvas.ActualHeight;
double c1Height = Control1.ActualHeight + Control1.Margin.Top + Control1.Margin.Bottom;
double c2Height = Control2.ActualHeight + Control2.Margin.Top + Control2.Margin.Bottom;
if (overallHeight - c1Height - c2Height < 0)
{
double halfHeight = overallHeight / 2;
double c1Additional = Math.Max(0, halfHeight - c2Height);
double c2Additional = Math.Max(0, halfHeight - c1Height);
Scroll1.MaxHeight = halfHeight + c1Additional;
Scroll2.MaxHeight = halfHeight + c2Additional;
}
else
{
Scroll1.MaxHeight = double.PositiveInfinity;
Scroll2.MaxHeight = double.PositiveInfinity;
}
}
}
I only used the canvas to measure the size available inside the window, this could be done differently as well ...