Grid control can't cover the whole page and leaves a space at the top

Question

I have a default grid control defined in xaml:

<Page
    x:Class="App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>

    </Grid>
</Page>

And this grid does not start from the top of the page as you can see from the picture below:

One way to achieve this is to set a negative margin like this:

<Page
    x:Class="App.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid Margin="0,-26.667,0,0">

    </Grid>
</Page>

So it will look like in this picture:

However, I've watched some of Bob Tabor's videos like this one and all of his default controls starts right from the top of the page.

What is the problem here and how can I solve it without setting a negative margin?

Answer 1

Well status bar is there by default. You have 2 options:

1. Hide it -> Hide Status bar in Windows Phone 8.1 Universal Apps

2. put your content under it:

var applicationView = Windows.UI.ViewManagement.ApplicationView.GetForCurrentView(); applicationView.SetDesiredBoundsMode(Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

You may wish to read this for additional info: http://blogs.msdn.com/b/amar/archive/2014/05/12/status-bar-in-windows-phone-8-1.aspx