How to optimize window layout for full screen view? WPF

Question

I have a WPF window that hosts a simple layout of a home button, top row of buttons and a video feed but when I maximise the window. the layout is out of sync with the standard view.

I have tried to remedy some of the layout by setting the image element to stretch "fill" but the top row of buttons don't look uniform also the home button relocates to the center of the screen which doesn't look good

My question I how would I adjust the xaml layout properties to support standard and maximised view?

This is the layout for the window:

<Window x:Class="KinectKickboxingBVversion1.TrainingFrm"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TrainingFrm" Height="377.612" Width="637.313" Loaded="Window_Loaded">

    <Grid>

        <StackPanel Orientation="Horizontal" >
            <Button x:Name="jabBtn" Background="BlueViolet"  Content="Jab" Width="100" Height="50" Click="jabBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <Button x:Name="crossBtn" Background="BlueViolet" Content="Cross" Width="100" Height="50" Click="crossBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <Button x:Name="jabCrossHookBtn" Background="BlueViolet" Content="Jab-Cross-Hook" Width="100" Height="50" Click="jabCrossHookBtn_Click" HorizontalAlignment="Center" VerticalAlignment="Top"/>
            <Button x:Name="pKickBtn" Content="Push Kick" Background="BlueViolet" Width="100" Height="50" Click="pKickBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
            <Button x:Name="blockBtn"  Content="Kick Block" Background="BlueViolet" Width="100" Height="50" Click="blockBtn_Click" HorizontalAlignment=" Center" VerticalAlignment="Top"/>
            <Label Content="SCORE: " x:Name="lblScore" Visibility="Collapsed"/>
            <TextBlock x:Name="tblkScore" />
        </StackPanel>
        <Viewbox Grid.Row="1" Stretch="Uniform" HorizontalAlignment="Center">

            <Image x:Name="KinectVideo" Width="640" Height="250" Visibility="Visible" Stretch="Fill" /> 

        </Viewbox>


        <Button x:Name="homeBtn" Content="" Width="50" Click="homeBtn_Click" Height="35" Margin="272,294,277,10" >

            <Button.Background>
                <ImageBrush ImageSource="Images/ContentIcon.png" />
            </Button.Background>

        </Button>
    </Grid>
</Window> 

Answer 1

Your buttons are all a fixed size. StackPanel just plonks them next to each other, so when your screen size is bigger, you end up with space left over on the right.

Same with your home button. It's being positioned via the absolute margins.

You could make your layout fluid by using 6 grid columns for the top buttons, and removing the margins on the home button and just setting it to HorizontalAlignment="Center" VerticalAlignment="Bottom".

However, this will still result in effectively smaller text on the buttons. If you want the display to always have the same proportions it may be easier for you to simply plonk the whole thing in a ViewBox.

Answer 2

use grid instead of stackpanel and set the column width to "*" and put your buttons in that grid