在 Windows Phone 中更改方向时自动调整元素大小

Question

我的应用布局在纵向模式下没有任何问题，但是当我将方向更改为横向时，出现了一些问题：

1. 默认最小化的应用栏在横向模式下更大，并与第一个按钮和浏览器窗口重叠

2. URL 文本框和 Go 按钮在横向时消失。

   <Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
       <RowDefinition Height="Auto"/>
       <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   
   <Grid x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
       <Button x:Name="ButtonOne" Content="ButtonOne" IsEnabled="False" Click="ButtonOne_Click" Grid.Column="0"/>
       <Button x:Name="ButtonTwo" Content="ButtonTwo" Click="ButtonTwo_Click" IsEnabled="False" Grid.Column="1"/>
   </Grid>
   
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <TextBox x:Name="URL" Margin="0,545,69,-41" TextWrapping="NoWrap" Text="http://www.xbox.com" VerticalAlignment="Top" Height="75"/>
       <Button x:Name="Go" Content="Go" HorizontalAlignment="Right" Margin="0,545,0,-41" VerticalAlignment="Top" Click="Go_Click" Height="75"/>
       <phone:WebBrowser x:Name="MiniBrowser" Margin="10,-25,10,79"/>
   </Grid>
   

   <phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" Mode="Minimized">
       <shell:ApplicationBar.MenuItems>
           <shell:ApplicationBarMenuItem Click="Item1_Click" Text="Item 1"/>
       </shell:ApplicationBar.MenuItems>
   </shell:ApplicationBar>
   </phone:PhoneApplicationPage.ApplicationBar>
   

所以我想要的是：

1. 不与页面内容重叠的应用栏
2. 如果可能，我想在横向模式下隐藏 URL 栏和“开始”按钮，并让浏览器窗口填满所有可用空间

Answer 1

重叠可能是因为您尝试通过设置边距来定位硬编码的控件。你最好把你的控件放在这样的网格中，然后从应用程序栏中删除Mode=Minimized：

  <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True" >
      <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem  Text="Item 1"/>
      </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
  </phone:PhoneApplicationPage.ApplicationBar>

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
  <Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <phone:WebBrowser Grid.ColumnSpan="2" x:Name="MiniBrowser"/>
    <TextBox Grid.Row="1" Grid.Column="0" x:Name="URL" TextWrapping="NoWrap" Text="http://www.xbox.com" VerticalAlignment="Top" Height="75"/>
    <Button Grid.Row="1" Grid.Column="1" x:Name="Go" Content="Go" HorizontalAlignment="Right" VerticalAlignment="Top" Click="Go_Click" Height="75"/>
  </Grid>
</Grid>

隐藏文本框和按钮可以在页面的OrientationChanged事件中完成：

private void MainPage_OnOrientationChanged(object sender, OrientationChangedEventArgs e)
{

    // Switch the visibility of the controls based on an orientation change.
    if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
    {
        ApplicationBar.Mode = ApplicationBarMode.Minimized;
        URL.Visibility = Visibility.Visible;
        Go.Visibility = Visibility.Visible;
    }
    // If not in portrait, hide controls.
    else
    {
        ApplicationBar.Mode = ApplicationBarMode.Default;
        URL.Visibility = System.Windows.Visibility.Collapsed;
        Go.Visibility = System.Windows.Visibility.Collapsed;
    }
}

为了让这个事件处理程序工作，您需要将 OrientationChanged="MainPage_OnOrientationChanged" 添加到 MainPage.xaml（作为 phone:PhoneApplicationPage 元素的属性。

来源：http://msdn.microsoft.com/en-us/library/windowsphone/develop/jj207002(v=vs.105).aspx