Layout autoscale Windows 8

I want to make a simple layout: This is my code:

<ScrollViewer Grid.Column="1" Grid.Row="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Disabled" VerticalContentAlignment="Stretch">
    <StackPanel  Name="MainStack" Orientation="Horizontal">     
        <StackPanel Width="800" Height="800" Margin="140,0,10,0" Background="#FFAC3737"/>
            <StackPanel Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" />              
            </StackPanel>

            <StackPanel Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="Black" HorizontalAlignment="Left" />              
            </StackPanel>

            <StackPanel  Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="#FF5686AE" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="#FF5583AA" HorizontalAlignment="Left" />              
            </StackPanel>

            <StackPanel Width="400" Height="800" Margin="0,0,10,0">
                <StackPanel Width="400" Height="395" Background="#FF5180A8" HorizontalAlignment="Left" Margin="0,0,0,10" />
                <StackPanel Width="400" Height="395" Background="#FF426E93" HorizontalAlignment="Left" />              
            </StackPanel>    
        </StackPanel>
    </StackPanel>
</ScrollViewer>

Now It looks like this:

What is the best way to scale this layout to all resolutions ?

Grid is a great control for specifying how you want to use available space. I like to use * (star) sizing and think of each * as a percentage. So, if I want two columns to each take up 50 percent of the screen, their widths would be 50* and 50* (though technically as long as they're equal numbers they'll take up equal space so 1* and 1* would do the same thing).

The problem with Grid is that it tries to use all the space you give it. So, if you design a layout on a square monitor (4:3 aspect ratio) then display it on a widescreen monitor (16:9 aspect ratio) all your squares become rectangles!

You could sort of deal with this in code by monitoring whenever the size changes and making sure that the width is always some percentage of the height. But that's an ugly fix and leaves one more challenge to contend with: font size.

Many times when you're creating a very specific layout you want it to scale perfectly to all screen sizes, including text. But just because Grid adapts to the available real estate doesn't mean that the font size will automatically scale up too. That is, unless you use ViewBox.

ViewBox is an awesome control. You can put anything inside of it with a specific width and height, and as the available space for the ViewBox increases or decreases, it automatically scales everything inside of it. ViewBox maintains the correct aspect ratio for you and automatically does font scaling too!

So, start with a Grid and give it a specified width and height, then divide the rows and columns to make it look like your image above. Start at whatever width and height you want, but I suggest 1366 x 768 because that's the lowest recommended resolution for Windows 8. Finally, wrap the Grid in a ViewBox and you're done!

<ViewBox>   
   <Grid Width="1366" Height="768">
   ...
   </Grid>
</ViewBox>