应用程序栏 Windows Phone

Question

我面临下一个问题。这是微软的错误吗？

我有列表框和应用程序栏。

纵向一切正常，横向 (-90) 鳍，但横向 (+90) 应用程序栏在列表框上方运行 - 如何修复它？

这是问题的图片示例：

横向 (-90) 一切正常：http://s13.postimg.org/4cvm07ck7/image.png 风景（+90）丑陋：http://s13.postimg.org/rptnipsnr/Not_OK.png

我有下一个 XAML 代码：

<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

保持 ListBox 的 Horizo​​ntalAlignment 和 VerticalAlignment 属性为 Stretch，这样就不会被覆盖。

编辑

1. 将应用程序栏的模式保持为最小化，这将使其在纵向模式下始终最小化，并在横向模式下默认。此行为无法更改。

2. 若要允许两个方向，请将supportedOrientation 更改为 LandscapePortrait

3. 保持对齐到 Stretch。

Answer 2

我不知道原因，但是当您将ApplicationBar 的Mode 属性设置为Minimized 时会发生这种情况。

删除该属性或将其设置为默认可以解决重叠问题：

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

但是，纵向模式下的行为将不是我们想要的，因为 ApplicationBar 不会被最小化。

一种可能的解决方案是使用页面的OrientationChanged 事件将Mode 属性设置为Minimized：

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