Stijn
Stijn

Reputation: 2060

Unexpected top margin/padding/gap on WP7 app page when running on WP8 device

I'm having an issue when running an app (my first), designed for Windows Phone 7, on my Windows Phone 8 device (a HTC Windows Phone 8X, for some product placement).

When debugging in the emulator (WP7) all is fine, but once I test drive the app on my device (WP8), a mysterious gap appears at the top of each page.

An example... (I can't post images yet, apparently)

I haven't set/changed any margin/padding properties for any of the pages or controls.

<phone:PhoneApplicationPage
    x:Class="MyProject.SettingsPage"
    xmlns:Controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls" 
    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">

    <Grid x:Name="LayoutRoot">
        <Controls:Pivot Title="SETTINGS">
            <Controls:PivotItem Header="general">
                ...
            </Controls:PivotItem>
        </Controls:Pivot>
    </Grid>
</phone:PhoneApplicationPage>

Any idea why this is happening and how it can be solved?
Is this a XAML issue? Should I be targeting WP7 and WP8 separately?

Upvotes: 0

Views: 94

Answers (1)

Johan Falk
Johan Falk

Reputation: 4359

This is all intended behavior, this is because Windows Phone 7 only supports the resolution 480x800. Some Windows Phone 8 phones will have the same aspect ratio as this, giving no bar at the top, but some, like the HTC 8X does not, so it will get a black bar there. This is all described in the documentation.

The solution is to convert the app to a WP8 app and that black bar at the top will be gone. But the app will no longer be compatible with WP7.

Upvotes: 2

Related Questions