Внутренняя сетка WPF не масштабируется должным образом

Question

У меня проблемы с масштабированием части моей внутренней сетки до определенного размера. Дело в том, что я хочу создать границу вокруг места, куда я позже вставлю изображение. Я хочу, чтобы мое приложение было масштабируемым, но в настоящее время я не могу это создать.

Итак, вот мой код:

      <Grid>

        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="100" />
            <RowDefinition Height="200*" />
            <RowDefinition Height="50" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50" />
            <ColumnDefinition Width="100*" />
            <ColumnDefinition Width="100*" />
            <ColumnDefinition Width="50" />
        </Grid.ColumnDefinitions>


        <Button Grid.Row="0" Grid.Column="0"
                Style="{StaticResource ReturnBackButtonStyle}"
                Command="{Binding ReturnFromSearchingCommand, Mode=OneWay}" />

        <TextBlock Grid.Row="1" Grid.Column="1"
                   Text="Game"
                   FontSize="48"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />

        <TextBlock Grid.Row="1" Grid.Column="2"
                   Text="Controls"
                   FontSize="48"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center" />

        <Canvas Grid.Row="2" Grid.Column="1"
                Background="LightBlue" 
                Name="MyCanvas" 
                Focusable="True">

            <Grid ShowGridLines="True">
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                    <RowDefinition Height="auto" />
                    <RowDefinition Height="50" />
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50" />
                    <ColumnDefinition />
                    <ColumnDefinition Width="50" />
                </Grid.ColumnDefinitions>

               /* .. Mouse triggers .. */

                <Canvas Grid.Row="0" Grid.Column="0">
                    <Label Name="MashKey" Content="Current key to Mash: NONE" FontSize="18" FontWeight="Bold" Foreground="White"/>
                </Canvas>
                <Canvas Grid.Row="0" Grid.Column="2">
                    <Label Background="Red" Name="MashedCount" Content="Last Mash Count: 0" FontSize="18" FontWeight="Bold" Canvas.Right="0" Foreground="White"/>
                </Canvas>

                <Canvas Background="Black" IsHitTestVisible="False" Grid.Column="1" Grid.Row="1" 
                           HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                           >
                    <Viewbox StretchDirection="DownOnly" >
                        <Rectangle Fill="Red" 
                                   HorizontalAlignment="Stretch" 
                                   VerticalAlignment="Stretch"
                                   Width="auto" 
                                   Height="auto" ></Rectangle>
                    </Viewbox>
                </Canvas>


            </Grid>
        </Canvas>


            <DockPanel Grid.Row="2" Grid.Column="2">
                /* ... the right side of the first Grid ... works fine for now .. */
            </DockPanel>


    </Grid>

Внешняя сетка работает отлично, даже "Canvas Right". Но, к сожалению, я не могу заставить среднюю часть 2-й сетки масштабироваться до максимального потенциала. Есть идеи, как я могу это сделать? Заранее спасибо!