My demo app displays two rectangles which should fill whole browser's screen. There is a vertical splitter between them. This looks like a basic scenario but I have no idea how to implement this in xaml. I cannot force this to fill whole screen and when moving splitter then whole screen grows. Can anybody help?

<UserControl 
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  
    x:Class="SilverlightApplication1.MainPage"
    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" 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
  <Grid x:Name="LayoutRoot" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>            
        </Grid.ColumnDefinitions>
        <Border BorderBrush="Black" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" MinWidth="50">
        </Border>
        <controls:GridSplitter Grid.Column="1" VerticalAlignment="Stretch" Width="Auto" ></controls:GridSplitter>
        <Border BorderBrush="Blue" BorderThickness="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="2" MinWidth="50"></Border>
    </Grid>
</UserControl>