Question

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

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

横向显示时，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>

所以我想拥有的是：

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

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

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

1 个答案: