Auto Black dark space on top in windows phone?

Question

I was developing an app for windows phone OS 7. I was running my app in Emulator VGA (which has the resolution of 480*800), no problem runs perfectly. But, if i run my app in Emulator 720P or VXGA (which has the resolution of 768*1280), a dark black space automatically appeared on the top.

I dunno what it is and also i dunno how to get rid of that. Here is a Screenshot of my app in both emulators. I have done nothing in the code. Just created the new blank page. Just changed Grid Background color to differentiate. That's all. So, problem is not from my side. Anybody knows what's the problem actually ?

Screenshots in both resolution. Left: VXGA and Right: VGA

enter image description here

XAML Code:

<phone:PhoneApplicationPage
x:Class="AppName.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
    <Grid.Background>
        <SolidColorBrush Color="Orange"></SolidColorBrush>
    </Grid.Background>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
    </StackPanel>

    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    </Grid>
</Grid>

Kevin Gosse Kevin Gosse · Accepted Answer · 2013-09-13T13:55:21

That's by design. When executing a WP7 app on a WP8 device with a different resolution, your app is automatically scaled, which results in the dark space you're seeing. If you want to get rid of this space, you need to compile your application specifically for WP8.

Auto Black dark space on top in windows phone?

1 Answers