0

縦向きモードではアプリのレイアウトに問題はありませんが、向きを横向きに変更すると、いくつかの問題があります。

  1. デフォルトで最小化されているアプリ バーは、ランドスケープ モードでは大きくなり、最初のボタンとブラウザー ウィンドウに重なります。

  2. 横向きにすると、URL テキスト ボックスと [移動] ボタンが表示されなくなります。

    <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 バーと [移動] ボタンを非表示にし、ブラウザ ウィンドウをすべての利用可能なスペースに表示したいと考えています。
4

1 に答える 1

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

于 2013-11-07T14:52:13.303 に答える