情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

クイックスタート: Windows Phone 8 の画面の向き

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone では、縦と横の画面の向きがサポートされています。このクイックスタートでは、Windows Phone での向きの変化を操作する方法について説明します。

このトピックは、次のセクションで構成されています。

Windows Phone では、次の画面の向きがサポートされています。

  • 縦方向

  • 横向き (左)

  • 横向き (右)

ユーザーはデバイスを回転するだけで、向きを別の向きに変更できます。エミュレーターでアプリをテストしている場合は、エミュレーターのツール バーのボタンをクリックすると画面の向きを切り替えることができます。向きのボタンには、向きの変更を示す矢印が付いた四角形があります。

Screen Orientation - Emulator

縦向きでは、ページの向きは垂直で、ページの高さは幅よりも大きくなっています。

2 種類の横向きのどちらでも、ステータス バーアプリケーション バーは画面の端にあり、それぞれ [電源] ボタンと [スタート] ボタンがあります。ステータス バーは、横向き (左) では左に、横向き (右) では右に表示されます。

縦向きがアプリの既定の向きで、横向きをサポートするにはコードを追加する必要があります。横向き (左) のみ、または横向き (右) のみを指定することはできません。横向きをサポートする場合は、横向き (左) と横向き (右) の両方をサポートする必要があります。アプリで縦向きと横向きをサポートすることを指定するには、XAML とコードのいずれかで、SupportedOrientations プロパティを PortraitOrLandscape に設定する必要があります。

縦向きと横向きのいずれかでコンテンツを表示するには、さまざまな方法があります。ここでは、スクロールとグリッド レイアウトの 2 つの手法を説明します。

スクロール手法では、ScrollViewer コントロール内に配置される StackPanel コントロールを使用します。リストでコンテンツを表示している場合、またはページ上でさまざまなコントロールが次々に表示される場合は、この手法を使用します。StackPanel を使用すると、アプリ内で次々に子要素の位置を指定できます。縦向きから横向きに切り替えたときに、UI 要素が画面上に収まらない場合は、ScrollViewer コントロールを使用すると StackPanel を介してスクロールすることができます。

スクール手法を使用するには、通常は以下の手順を実行します。

以下の例に、ScrollViewer 内の StackPanel と複数のコントロールを示します。

<ScrollViewer x:Name="ContentGrid" Grid.Row="1" VerticalScrollBarVisibility="Auto">
    <!--You must apply a background to the StackPanel control or you
    will be unable to pan the contents.-->
    <StackPanel Background="Transparent" >
        <!--Adding various controls and UI elements.-->
        <Button Content="This is a Button" />
        <Rectangle Width="100" Height="100" Margin="12,0"
            HorizontalAlignment="Left" Fill="{StaticResource PhoneAccentBrush}"/>
        <Rectangle Width="100" Height="100" HorizontalAlignment="Center"
            Fill="{StaticResource PhoneAccentBrush}"/>
        <Rectangle Width="100" Height="100" Margin="12,0"
            HorizontalAlignment="Right" Fill="{StaticResource PhoneAccentBrush}"/>
        <TextBlock Text="This is a line of text that will wrap in portrait
            orientation but not landscape orientation." TextWrapping="Wrap" />
        <CheckBox Content="A CheckBox"/>
        <RadioButton Content="A RadioButton" />
    </StackPanel>
</ScrollViewer> 

以下の図に、縦向きと横向きのスクロール動作を示します。縦向きではスクロールが必要ありませんが、横向きではスクールが必要です。

AP_Con_Orien_Scroll1

グリッド レイアウト手法では、Grid 内に UI 要素を配置します。向きの変更が発生する場合は、プログラムにより、要素を Grid のさまざまなセルに再配置します。

グリッド レイアウト手法を使用するには、通常は以下の手順を実行します。

  1. ページの SupportedOrientations プロパティを PortraitOrLandscape に変更します。

  2. コンテンツ パネルの Grid を使用します。

  3. OrientationChanged イベント ハンドラーを作成し、Grid に要素を再配置するためのコードを追加します。

以下の例では、イメージと、ボタンのコレクションを配置する 2 x 2 Grid を作成します。向きが変化すると、OrientationChanged イベント ハンドラーは Grid 内に要素を再配置します。

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <!--Create a 2 x 2 grid to store an image and button layout.-->
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <!--Add an image to the grid. Ensure the image height and width
        are set to 300 and 500 respectively for this example.-->
    <Image x:Name="Image1" Grid.Row="0" Grid.Column="0"
        Stretch="Fill" HorizontalAlignment="Center" Source="licorice.jpg"
        Height="300" Width="500"/>
    <!--Add a StackPanel with buttons to the row beneath the image.-->
    <StackPanel x:Name="buttonList" Grid.Row="1" Grid.Column="0"
        HorizontalAlignment="Center" >
        <Button Content="Action 1" />
        <Button Content="Action 2" />
        <Button Content="Action 3" />
        <Button Content="Action 4" />
    </StackPanel>
</Grid> 

private void PhoneApplicationPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
    // Switch the placement of the buttons based on an orientation change.
    if ((e.Orientation & PageOrientation.Portrait) == (PageOrientation.Portrait))
    {
        Grid.SetRow(buttonList, 1);
        Grid.SetColumn(buttonList, 0);
    }
    // If not in portrait, move buttonList content to visible row and column.
    else
    {
        Grid.SetRow(buttonList, 0);
        Grid.SetColumn(buttonList, 1);
    }
} 

以下の図に、縦向きと横向きのグリッド レイアウトの動作を示します。縦向きでは、ボタンは最下部に配置されます。横向きでは、ボタンは右側に配置されます。

AP_Con_Orientation(Port)

表示: