エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 の複数解像度アプリ

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 のみ

Windows Phone 8 Update 3 は、解像度が WVGA、WXGA、720p、および 1080p の電話をサポートします。この点は、WVGA 解像度のみをサポートしていた Windows Phone OS 7.1 とは異なります。このトピックでは、Windows Phone 8 Update 3 でサポートされる解像度と、さまざまな解像度の電話を対象にするアプリを開発する方法について説明します。

詳細については、「大画面 Windows Phone の活用」を参照してください。

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

次の表では、Windows Phone 8 Update 3 でサポートされる解像度と縦横比を説明します。

Resolution (解決)

Resolution (解決)

縦横比

Windows Phone OS 7.1 との差

スケーリングされた解像度

WVGA

480 × 800

15:9

ありません。これは Windows Phone OS 7.1 でサポートされている唯一の解像度です。

480 × 800

WXGA

768 × 1280

15:9

1.6× の倍率

480 × 800

720p

720 × 1280

16:9

1.5 x の倍率、高さは 80 ピクセル大きくなっています (拡大後は 53 ピクセル)

480 × 853

1080p

1080 x 1920

16:9

1.5 x の倍率、高さは 80 ピクセル大きくなっています (拡大後は 53 ピクセル)

480 × 853

解像度が 1080p の画面では、OS で内部的に 2.25x の倍率が使用されている場合でも、ScaleFactor プロパティは 1.5 を返します。

解像度が異なる複数の電話における、画面の外観を次の図に示します。

Examples of app running on multiple resolutions

Windows Phone OS 7.1 電話はすべて同じ解像度なので、Windows Phone OS 7.1 電話用にコンテンツをレイアウトする場合、1 台の電話で "適切に表示される" のであれば、すべての Windows Phone OS 7.1 電話で適切に表示されると考えることができます。各コントロールの伸縮やフローについて、内部ロジックを考慮する必要はありません。

Windows Phone 8 Update 3 では、サポートされる各縦横比で適切に表示されるように、コントロールや他の UI 要素をレイアウトする必要があります。Windows Phone 8 Update 3 電話の縦横比は 15:9 または 16:9 のいずれかなので、一方の縦横比を前提にコントロールをレイアウトすると、もう一方の縦横比では想定外のレイアウトになる可能性があります。

解像度が WVGA、WXGA、720p、および 1080p の電話でページが正しく表示されるようにするため、コントロールの高さと幅、および余白をハードコーディングしないでください。ツールボックスからコントロールをドラッグ アンド ドロップした後、自動的に追加された余白を削除するか、または慎重にテストします。

適応性のあるレイアウトを作成するには、グリッド コントロールなどのコンテナーを使用します。コントロールの高さと幅をハード コーディングする代わりに、コントロールをグリッド内に配置し、* および Auto 値を使用してグリッドの行および列の幅と高さを設定します。この方法で、ユーザーの電話の高さと幅に合うように、アプリが拡大または縮小されます。コントロールの高さと幅をハード コーディングすると、そのレイアウトは別の解像度には適応しません。

重要:重要:

必ず各縦横比の解像度 (15:9 と 16:9) でアプリをテストしてください。解像度ごとに異なる画像アセットを用意している場合を除き、各ピクセル解像度でのテストを厳密に実行する必要はありません。

次の XAML は、グリッド コントロールを使用してこのガイドラインを実践したレイアウトのコードを示しています。


<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
 
    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
        BorderThickness="3" BorderBrush="White" Padding="4" 
        Margin="12">
    <TextBlock Text="423 + 61 = 484" FontSize="35" Padding="6" Height="69" />
    </Border>
    <Button Grid.Row="1" Grid.Column="0" Content="Clear" />
    <Button Grid.Row="1" Grid.Column="1" Content="/" />
    <Button Grid.Row="1" Grid.Column="2" Content="*" />
    <Button Grid.Row="1" Grid.Column="3" Content="-" />
    <Button Grid.Row="2" Grid.Column="0" Content="7" />
    <Button Grid.Row="2" Grid.Column="1" Content="8" />
    <Button Grid.Row="2" Grid.Column="2" Content="9" />
    <Button Grid.Row="2" Grid.Column="3" Content="+" Grid.RowSpan="2" />
    <Button Grid.Row="3" Grid.Column="0" Content="4" />
    <Button Grid.Row="3" Grid.Column="1" Content="5" />
    <Button Grid.Row="3" Grid.Column="2" Content="6" />
    <Button Grid.Row="4" Grid.Column="0" Content="1" />
    <Button Grid.Row="4" Grid.Column="1" Content="2" />
    <Button Grid.Row="4" Grid.Column="2" Content="3" />
    <Button Grid.Row="4" Grid.Column="3" Content="=" Grid.RowSpan="2" />
    <Button Grid.Row="5" Grid.Column="0" Content="0" Grid.ColumnSpan="2" />
    <Button Grid.Row="5" Grid.Column="2" Content="." />
</Grid>

このアプリには、WVGA、WXGA、720p、および 1080p の動的なレイアウトがあります。WVGA 電話と WXGA 電話で、出力ボックスは同じサイズです。Height プロパティが Auto に設定されていて、使用可能な領域の残りの部分に収まるように、ボタンが均等に縮小されるからです。720p と 1080p の解像度では、WVGA と WXGA 解像度よりもボタンの位置がやや高くなります。

最小または最大の高さを設定するために、MinHeight プロパティおよび MaxHeight プロパティを設定できます。画面上にあるどの要素も、いずれかの方向のサイズが 8 mm 以下になると、指で確実に操作するのが困難になることを覚えておく必要があります。対話型要素が過度に縮小されないように、MinHeight プロパティと MinWidth プロパティを使用することもできます。これらのプロパティを組み合わせて、WVGA 解像度用にレイアウトを縮小することもできますが、高い解像度用に拡大することはできません。

グラフィックス、動画、オーディオ、およびアイコンのようなアセットは、アプリのサイズのうちかなりの比率を占めます。すべての解像度向けのアセットをアプリに含めると、アプリで非常に多くのスペースが費やされることになります。ほとんどのアプリでは、WXGA 用のアセットのみを含めることをお勧めします。WXGA アセットは最も品質が高く、他の解像度でも適切に機能するように自動的に縮小されます。

解像度 WXGA/WVGA と 720p/1080p の縦横比には違いがあるため、必要に応じて、解像度ごとに異なる背景画像をアプリに含めます。サポート対象のすべての解像度に対応するイメージをアプリに含める場合は、以下の手順でデバイスの解像度を検出し、その後、適切なイメージを実行時に読み込んでください。

解像度依存のイメージを実行時に読み込むには

  1. プロジェクト ファイルで、WVGA、WXGA、および 720p の解像度に対応するイメージを追加します。この例では、ファイルに MyImage.screen-wvga.png、MyImage.screen-wxga.png、および MyImage.screen-720p.png という名前を付けます。

  2. イメージの [出力ディレクトリにコピー] プロパティを [常にコピーする] に設定します。

  3. ResolutionHelper.cs という名前のクラスをプロジェクトに追加し、その後、次のコードを新しいクラスにコピー &amp; ペーストします。

    public enum Resolutions { WVGA, WXGA, HD };
    
    public static class ResolutionHelper
    {
       private static bool IsWvga
       {
          get
          {
             return App.Current.Host.Content.ScaleFactor == 100;
          }
       }
    
       private static bool IsWxga
       {
          get 
          { 
             return App.Current.Host.Content.ScaleFactor == 160; 
          }
       }
         
       private static bool IsHD
       {
          get 
          { 
             return App.Current.Host.Content.ScaleFactor == 150; 
          }
       }
    
       public static Resolutions CurrentResolution
       {
          get
          {
             if (IsWvga) return Resolutions.WVGA;
             else if (IsWxga) return Resolutions.WXGA;
             else if (IsHD) return Resolutions.HD;
             else throw new InvalidOperationException("Unknown resolution");
          }
       }
    }
    

    このクラスでは、ScaleFactor プロパティを使用して、デバイスの解像度を判断します。

  4. 次のコードを含む MultiResImageChooser.cs という名前のクラスを追加します。このクラスは、前のステップで作成した ResolutionHelper.cs クラスを使用して、デバイスの解像度を検出します。その後、検出した解像度に対応するイメージの URI から作成された新しい BitmapImage を返します。

    using System.Windows.Media.Imaging;
    
        public class MultiResImageChooserUri
        {
            public Uri BestResolutionImage
            {
                get
                {
                    switch (ResolutionHelper.CurrentResolution)
                    {
                        case Resolutions.HD:
                            return new Uri("Assets/MyImage.screen-720p.jpg", UriKind.Relative);
                        case Resolutions.WXGA:
                            return new Uri("Assets/MyImage.screen-wxga.jpg", UriKind.Relative);
                        case Resolutions.WVGA:
                            return new Uri("Assets/MyImage.screen-wvga.jpg", UriKind.Relative);
                        default:
                            throw new InvalidOperationException("Unknown resolution type");
                    }
                }
            }
    
        }
    
    
  5. MainPage.xaml で、Image 要素を追加し、その Source プロパティを、MultiResImageChooser.cs クラスから返された URI にバインドします。

    
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
       <Image Source="{Binding BestResolutionImage, Source={StaticResource MultiResImageChooser}}"/>
    </Grid>
    
  6. App.xaml で、<Application> 要素に、次の xmlns 名前空間マッピングを追加します。

    xmlns:h="clr-namespace:MultiResSnippet"
    
  7. App.xaml で、次のアプリケーション リソースを追加します。

    
    <!--Application Resources-->
    <Application.Resources>
       <h:MultiResImageChooser x:Key="MultiResImageChooser"/>
    </Application.Resources>
    

すべての解像度でスプラッシュ スクリーンを表示するには、768 x 1280 の SplashScreenImage.jpg という 1 つの画像ファイルを使用します。このイメージは、電話によって自動的に正しいサイズに拡大縮小されます。

すべての解像度で、ピクセル単位で正確に一致するスプラッシュ スクリーンを提供するには、次のファイル名を持つイメージを追加できます。

  • SplashScreenImage.Screen-WVGA.jpg

  • SplashScreenImage.Screen-WXGA.jpg

  • SplashScreenImage.Screen-720p.jpg

Windows Phone 8 Update 3 の既定では、1080p の電話で 720p のスプラッシュ スクリーンが使用されます。

重要:重要:

すべてのスプラッシュ画面イメージが、アプリ プロジェクトのルート フォルダーに存在する必要があります。

詳細については、「Windows Phone のスプラッシュ スクリーンを作成する方法」を参照してください。

タイルとアプリ アイコンについては、WXGA 解像度用のイメージのみを含める必要があります。WVGA、720p、1080p の画面に適したサイズに画像が自動的に拡大縮小されます。タイルとそのサイズの詳細については、「Windows Phone 8 のタイル」を参照してください。

表示:
© 2014 Microsoft