ApplicationBar Windows Phone

Question

I'm facing next problem. Is it a Microsoft bug?

I have listbox and application bar.

In portrait all loks fine, in landscape (-90) fin, but in landscape (+90) application bar runs over the list box - how to fix it?

Here is a picture sample of the problem:

Landscape (-90) all works OK : http://s13.postimg.org/4cvm07ck7/image.png Landscape (+90) ugly: http://s13.postimg.org/rptnipsnr/Not_OK.png

I have the next XAML code:

<phone:PhoneApplicationPage
x:Class="RTUmobile.Home"
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"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="RTUmobile" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
        <TextBlock Name="PageName" 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"/>
    <ListBox Name="NewsListBox" Margin="10,1,12,0" Grid.Row="1" Height="auto" RenderTransformOrigin="0.5,0.5" SelectionChanged="NewsListBox_SelectionChanged">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.RenderTransform>
            <CompositeTransform Rotation="-0.02"/>
        </ListBox.RenderTransform>
    </ListBox>
    <!--Uncomment to see an alignment grid to help ensure your controls are
        aligned on common boundaries.  The image has a top margin of -32px to
        account for the System Tray. Set this to 0 (or remove the margin altogether)
        if the System Tray is hidden.

        Before shipping remove this XAML and the image itself.-->
    <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
        <shell:ApplicationBarIconButton IconUri="/Icons/home.png" IsEnabled="True" Text="1"/>
        <shell:ApplicationBarIconButton IconUri="/Icons/about.png" IsEnabled="True" Text="2"/>
        <shell:ApplicationBarIconButton IconUri="/Icons/contacts.png" IsEnabled="True" Text="3"/>
        <shell:ApplicationBarIconButton IconUri="/Icons/settings.png" IsEnabled="True" Text="4"/>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

Answer 1

Keep the HorizontalAlignment and VerticalAlignment property of ListBox to Stretch That will allow not to override.

Edit

1. Keep the mode of application bar to minimized and that will make it minimized in portrait mode always and default in landscape mode. This behaviour cannot be changed.

2. To allow both orientations change the supportedOrientation to LandscapePortrait

3. Keep the alignment to Stretch.

Answer 2

I don't know the reason, but this happens when you have set the Mode property of ApplicationBar to Minimized.

Removing that property or setting it to Default solves the problem of overlapping:

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Default">
    ...
</shell:ApplicationBar>

However, the behavior in Portrait mode won't be the desired one, since the ApplicationBar won't be minimized.

One possible solution would be to use the OrientationChanged event of the page to set the Mode property to Minimized:

    private void OnOrientationChanged(object sender, OrientationChangedEventArgs e)
    {
        if (e.Orientation == PageOrientation.PortraitUp)
            this.ApplicationBar.Mode = ApplicationBarMode.Minimized;
        else
            this.ApplicationBar.Mode = ApplicationBarMode.Default;
    }