Windows Phone application bar hides page content

Question

I'm experimenting with Windows Phone 8 development and have hacked together a little app from examples here and there. However, I have stumbled upon a problem which I'm kind of stuck with: When I add an application bar to a page (either in XAML or in C#), it hides the bottom part of the content with no ability to scroll down either.

My XAML is:

<phone:PhoneApplicationPage
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"
xmlns:maps="clr-namespace:Microsoft.Phone.Maps.Controls;assembly=Microsoft.Phone.Maps"
xmlns:maptk="clr-namespace:Microsoft.Phone.Maps.Toolkit;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
x:Class="MyApp.MainPage"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

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

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock x:Name="appNameText" 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">

        <maps:Map x:Name="locationMap" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Width="446" Height="347">
            <maptk:MapExtensions.Children>
                <maptk:Pushpin Name="MyLocation" Visibility="Collapsed" />
            </maptk:MapExtensions.Children>
        </maps:Map>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="165,362,0,0" VerticalAlignment="Top" Width="291" />
        <TextBlock x:Name="longitudeText" HorizontalAlignment="Left" Margin="338,462,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="longitude placeholder"/>
        <TextBlock x:Name="latitudeText" HorizontalAlignment="Left" Margin="338,507,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Text="latitude placeholder"/>

        <toolkit:ToggleSwitch x:Name="switch1" IsChecked="True" Content="First switch" Margin="165,424,24,76"/>
        <toolkit:ToggleSwitch x:Name="switch2" Margin="114,482,24,10" Content="Second switch" IsChecked="True"/>

    </Grid>

</Grid>

And the code that creates the app bar:

        //    // Set the page's ApplicationBar to a new instance of ApplicationBar.
        ApplicationBar = new ApplicationBar();

    //    // Create a new button and set the text value to the localized string from AppResources.
        ApplicationBarIconButton appBarButton = new ApplicationBarIconButton(new Uri("/Assets/AppBar/appbar.add.rest.png", UriKind.Relative));
        appBarButton.Text = AppResources.AppBarButtonText;
        appBarButton.Click += appBarButton_Click;
        ApplicationBar.Buttons.Add(appBarButton);

    //    // Create a new menu item with the localized string from AppResources.
        ApplicationBarMenuItem appBarMenuItem = new ApplicationBarMenuItem(AppResources.AppBarMenuItemText);
        ApplicationBar.MenuItems.Add(appBarMenuItem);

The result without the app bar:

and with the app bar added:

Notice the missing labels for the switches. (Actually, the bottom switch itself was hidden too, but it looks as if mindlessly fiddling around "fixed" it.

So, long question short: could somebody please point out what the heck I'm doing wrong for such anomalies to appear?

Answer 1

Pages do not automatically contain a ScrollViewer, so you need to add one around the elements that you want to be scrollable (in your case, I guess that means around the LayoutRoot grid).

ScrollViewer.VerticalScrollBarVisibility="Auto" is something that a ScrollViewer would use to determine whether to be visible or not, but since there is no ScrollViewer at all, that does nothing. (This is an attached property, much like Grid.Row for example, which is only useful if the element is in a Grid.)

There's only one case (that I know of) in which the app bar is actually in front of the page: when the AppBar's Opacity is not 100%. In this case, the Page actually goes behind it, so you have to manage what/where/how is visible yourself.