方法: Windows Phone で向きの変化を処理する

2012/02/09

このトピックでは、アプリケーションで、編成され、構造化された UI コンテンツを提供するために、Windows Phone の向きの変化を処理する方法に関する情報を提供します。Windows Phone では、縦向きと横向き (左または右) の 3 つの可能性のある向きがあります。縦向きは、ページ コンテンツを垂直に配置し、横向きはページ コンテンツを水平に表現します。ユーザーはデバイスを回転するだけで、向きを縦や横に変更できます。アプリケーションで向きのサポートを提供するには、XAML またはコードで、SupportedOrientations プロパティを PortraitOrLandscape に設定する必要があります。以下のセクションで、コンテンツを縦向きまたは横向きで表示するための 2 つのメカニズムの例を説明します。

  • 自動サイズ変更とスクロール: この例では、ScrollViewer コントロールと連携する StackPanel コントロールを使用して、両方の向きをサポートします。これは、コンテンツをリストに表示するか、さまざまなコントロールをページに次々と表示させる場合に適した簡単な方法です。

  • グリッド レイアウト: この例では、コントロールをグリッドに配置して、選択した向きに基づいて、グリッド セル内に配置された要素を移動します。

注注:

このトピックは、C# 開発を基にしていますが、Visual Basic のコードも提供しています。

このセクションでは、SupportedOrientations プロパティで縦向きモードおよび横向きモードの両方を有効にし、コントロールのグループを ScrollViewer コントロールと StackPanel コントロール内に配置します。

両方の向きでコンテンツを自動サイズ変更し、スクロールするには

  1. [ファイル]、[新しいプロジェクト] の順にメニュー コマンドを選択して、新しいプロジェクトを作成します。

  2. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  3. Windows Phone アプリケーション テンプレートを選択します。必要に応じてプロジェクト名を入力します。

  4. MainPage.xaml の XAML コードの phone:PhoneApplicationPage で、SupportedOrientations プロパティが Portrait および Landscape に設定されていることを確認します。そうでない場合は、次のように変更します。

    SupportedOrientations=”PortraitOrLandscape”
    
    注注:

    SupportedOrientations プロパティを縦向きと横向きの両方に設定することによって、アプリケーションで両方のモードがサポートされます。さらに、デザイナーで、PhoneApplicationPage コントロールを選択する場合に、このプロパティを設定することもできます。PhoneApplicationPage コントロールを選択するには、エミュレーター ウィンドウ外の空白の領域をクリックします。

  5. この手順では、StackPanel コントロールを ScrollViewer コントロール内に埋め込みます。StackPanel コントロールにより、アプリケーションでコントロールを順序付け、ScrollViewer コントロールにより、UI 要素が画面からはみ出る場合に、StackPanel コンテンツをスクロールできます。これは、エミュレーターまたはデバイスで横向きに切り替えた場合に発生します。MainPage.xaml で、XAML コードのページの下方にある Content Panel セクションの下に、次のコードを追加します。このセクションの前にあるコメントは、"<!--ContentPanel - place additional content here-->" です。そのセクションに既に入力されている開始と終了の Grid タグを削除します。

    
            <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 sample that will wrap in portrait mode but not landscape.” TextWrapping="Wrap"  />
                    <CheckBox Content="A CheckBox" />
                    <RadioButton Content="A RadioButton" />
                </StackPanel>
            </ScrollViewer>
    
    
  6. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。アプリケーションの実行中に、エミュレーター ツールバーの左向きまたは右向きボタンをクリックして、画面の向きを縦向きから横向きに切り替えることができます。各ボタンのボックスの上に曲線の矢印が表示されます。最終結果は、スクロールを必要としない順番に並べられた UI 要素の縦向きのレンダリングの後に、スクロールを必要とする横向き表現がレンダリングされます。

 

AP_Con_Orien_Scroll1

この例では、UI 要素をサポートするグリッドを作成して、アプリケーションで、向きの変化に基づいて、グリッド内にそれらの要素を再配置します。この演習では、イメージとボタンのコレクションをサポートするために 2 x 2 グリッドを作成します。次に、OrientationChanged イベント ハンドラーを作成して、縦向きモードと横向きモードを切り替えた場合に、グリッド内のこれらの UI 要素を再編成するコードを提供します。

向きの変更にグリッド レイアウトを使用するには

  1. [ファイル] メニューの [新しいプロジェクト] をクリックして、新しいプロジェクトを作成します。

  2. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  3. Windows Phone アプリケーション テンプレートを選択します。必要に応じてプロジェクト名を入力します。

  4. MainPage.xaml の XAML コードの phone:PhoneApplicationPage で、SupportedOrientations プロパティが Portrait および Landscape に設定されていることを確認します。そうでない場合は、次のように変更します。

    SupportedOrientations=”PortraitOrLandscape”
    
  5. 次に、2 x 2 グリッドを作成するコードを追加し、イメージをグリッドに追加して、ボタンを含む StackPanel コントロールをグリッドに追加します。MainPage.xaml で、XAML のページの下方にある ContentPanel セクションの下に、次のコードを追加します。セクションの前のコメントは "<!--ContentPanel - place additional content here-->" です。そのセクションに既に入力されている Grid タグの間にコードを追加します。

    
                <!--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 that 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="TestImage.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>
    
    
    
    注注:

    この演習では、任意のイメージを使用できます。例の TestImage.jpg を、有効なイメージ名とソース パスに置き換える必要があります。さらに、ボタン コントロールに任意の名前を使用できます。

  6. MainPage.xaml で、XAML コードのページの上部の phone:PhoneApplicationPage の下に、次のコードを追加します。

    OrientationChanged="PhoneApplicationPage_OrientationChanged"
    
    
    注注:

    OrientationChanged を入力した場合、IntelliSense によって "<New Event Handler>" を作成することができます。このオプションを選択すると、"PhoneApplicationPage_OrientationChanged" の既定の名前でハンドラーが自動的に作成されます。

  7. MainPage.xaml.cs に移動して、イベント ハンドラーを見つけます。次のコードによって、向きの変更に基づいて、グリッド内のボタン リストの位置を切り替えます。

    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 the portrait mode, move buttonList content to a visible row and column.
    
                else
                {
                    Grid.SetRow(buttonList, 0);
                    Grid.SetColumn(buttonList, 1);
    
                }
    
            }
    
    重要な注重要な注:

    このコードをアプリケーションに追加しないと、ボタンのコンテンツとイメージが横向きで並べられるのとは対照的に、積み重ねられたままになります。ボタンは一部のみが表示されるか、まったく表示されないことがあります。

  8. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。アプリケーションの実行中に、エミュレーター ツールバーの左向きまたは右向きボタンをクリックして、画面の向きを縦向きから横向きに切り替えることができます。各ボタンのボックスの上に曲線の矢印が表示されます。ボタンの向きが、画面の下部から画面の右側に変更されたことがわかるはずです。

 

AP_Con_Orientation(Port)

表示: