CODEWITHSUNDEEP
xamllayoutwindows-phone-8windows-phonewindows-phone-8.1
Barrrdi
Barrrdi

Reputation: 1161

Undesired bottom margin in (standard) 1080p layout template for a Windows Phone 8.1 app

When I run my Windows Phone 8 app on the 8.1 1080 emulator, there's a black bottom margin on all its pages (interestingly, it actually doesn't appear when I'm viewing any of these pages in the Design view).

Initially, I thought it may be as a result of my custom laid-out PhoneApplicationPage. So, I decided to create a new PhoneApplicationPage and not make any changes i.e. Visual Studio's auto-generated Portrait PhoneApplicationPage. This is its xaml:

<phone:PhoneApplicationPage
x:Class="App.Views._1080p"
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" Background="Red">
    <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,0">
        <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>

The only change I've made is add a red Background property for the Grid just to better highlight the problem.

I've not made any changes to the code-behind.

Unfortunately, the problem persisted:

enter image description here

If I add an App Bar to the xaml, the problem becomes exacerbated.

This is the App Bar's xaml:

<!-- APP BAR -->
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar 
        x:Name="appBar"
        IsVisible="True" 
        IsMenuEnabled="True" 
        Mode="Default" 
        Opacity="1" >
        <!-- APP BAR ICONS -->
        <shell:ApplicationBarIconButton 
            IconUri="a" 
            Text="Search"/>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

And this is what it looks like:

enter image description here

Any idea what's going on? And what I need to change to fix this problem? Any guidance would be much appreciated. I should add the problem does happen when running the app on a 1080p device too (i.e. not only a problem on the emulator).

Upvotes: 1

Views: 772

Answers (1)

Olivier Payen
Olivier Payen

Reputation: 15268

Here is the explanation: on Windows Phone 8.1, the ApplicationBar's height is not fixed anymore, it depends on the device screen size. In order to not break existing 8.0 apps layouts, they added that black bar.

The height of this black bar is 12px (height of the 8.0 AppBar - 8.1 AppBar).

To remove it, you'll have to migrate the app to Windows Phone 8.1.

Upvotes: 1

Related Questions