Why is there empty space at the top & bottom of my page when the UWP app runs? XAML nor Design view shows empty space

Question

Why does my UWP (Universal Windows Platform) App force extra space at the top and bottom of my app even though there is nothing there?

Here's what it looks like:

Even though in Visual Studio 2013 (design mode) you can see that the blue bounding box displays the bottom of the page as follows:

The outer grey is the device it would be running on.

The XAML looks like the following:

<Page
    x:Class="CYaPass.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CYaPass"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Height="515" Width="570" Background="LightGray" Loaded="Page_Loaded">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="320"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0"  Grid.Row="0">
            <TextBlock  FontSize="16" HorizontalAlignment="Center">1. Select a Site/Key</TextBlock>
            <ListView BorderThickness="2" BorderBrush="Aquamarine"  
                      x:Name="SiteListBox" HorizontalAlignment="Stretch" VerticalAlignment="Center" Height="251" 
                      Margin="10,10,0,0"  Width="Auto" SelectionChanged="SiteListBox_SelectionChanged">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="Padding" Value="5,0,0,0" />
                    </Style>
                </ListView.ItemContainerStyle>
                <ListViewItem Content="Item 2"/>
            </ListView>

            <StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
                <Button x:Name="DeleteSiteButton" Content="Delete Site" 
                        HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
                <Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
                    Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
            </StackPanel>
        </StackPanel>
        <TextBox x:Name="passwordTextBox" HorizontalAlignment="Left" Margin="7,150,0,0" Grid.Row="1" Grid.ColumnSpan="2"
                 TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="560"/>
        <StackPanel HorizontalAlignment="Left" Height="128" Margin="10,0,0,0" Grid.Column="0" Grid.Row="1"
                    VerticalAlignment="Top" Width="285">
            <Grid Margin="0,0,-11,0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="40" ></RowDefinition>
                    <RowDefinition Height="40" ></RowDefinition>
                    <RowDefinition Height="40" ></RowDefinition>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="180"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <CheckBox x:Name="addUppercaseCheckbox"  Grid.Row="0" Grid.Column="0" Content="Add Uppercase" HorizontalAlignment="Stretch" VerticalAlignment="Center" Width="254" Click="addUppercaseCheckbox_Click" Margin="7,0,3,0"/>
                <CheckBox x:Name="addSpecialCharscheckBox" Grid.Row="1" Grid.Column="0" Content="Add Special Chars" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
                <TextBox x:Name="specialCharsTextBox" Grid.Column="1" Grid.Row="1" Margin="7,0,3,0" VerticalAlignment="Center" HorizontalAlignment="Stretch" Grid.RowSpan="1" TextWrapping="NoWrap" Text="#"/>
                <CheckBox x:Name="setMaxLengthCheckBox" Grid.Row="2" Grid.Column="0" Content="Set Max Length" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="7,0,3,0"/>
                <local:NumericUpDown Grid.Column="1" HorizontalAlignment="Left" Margin="7,0,3,0" Grid.Row="2" VerticalAlignment="Center" Width="64"/>
            </Grid>
        </StackPanel>
        <StackPanel Grid.Column="1" Grid.Row="0">
            <TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
            <Canvas HorizontalAlignment="Center" x:Name="MainCanvas" 
                    Height="252" Width="252" Margin="7,10,0,0" VerticalAlignment="Top" Background="AliceBlue" Tapped="MainCanvas_Tapped" PointerMoved="MainCanvas_PointerMoved"/>
            <Button x:Name="ClearGridButton" Content="Clear"
                    Margin="50,0,10,0" VerticalAlignment="Center" Click="ClearGridButton_Click" HorizontalAlignment="Right"/>
        </StackPanel>

    </Grid>
</Page>

You can see the page's width is wider than the height, but when the app runs on a desktop or a simulator device (like 7" pad) the extra space is pushed into the top and the bottom.

UWP Forced Minimum?

Is this due to some minimum size or something that UWP forces on apps?

Cannot Resize Smaller When Running

Even if I grab the form's bottom or top bounding frame when the app is running, I cannot make it any smaller.

Answer 1

The Default Content-Alignment is set to Center because you set the Height and Width of your Page, so your page is placed in the Center and isn't filling the whole Screen.

One Possible Solution is to add to the Page xaml Attributes this Piece of Code: VerticalAlignment="Top".

To set the HorizontalAlignment to the left add this: HorizontalAlignment="Left".

One more advise: When you don't Need to Display more than one xaml Page at the Screen leave the Page Height and Width to Default.