WPF inner Grid does not scale up as it should have

Question

I am haveing trouble scaling part of my inner grid to a specific size. The thing is, what I want to do, is create a border around a place, where I will later insert image in. I want my app to be scalable, but currently, I am unable to create this.

So, here is my code:

<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>

The outter Grid works perfectly fine, even the "Canvas Right". But unfortunately, I am unable to make the middle part of the 2nd grid to scale up to its max potential. Any idea how can I do this ? Thank you in advance!