眠るシーラカンスと水底のプログラマー

　WindowsストアアプリケーションとWindows Phoneの開発は共通点も多いのですが、画面解像度の固定なWindows Phoneに比べて、Windowsストアアプリケーションは画面解像度が不定です。

(最低解像度はXGA1024×768、スナップができる解像度が1366×768という指標はありますが)

 

　そのため画面の解像度(DPI)に合わせた画像を用意することで表示の最適化をはかる必要がでてきます。

 

　Windowsストアアプリケーションでは一つの画像に対して三種類の画像を用意することができます。

　その場合hoge.jpgに対して用意するファイル名は、

 

hoge.scale-100.jpg

hoge.scale-140.jpg

hoge.scale-180.jpg

 

　という修飾子を指定します。

　どの画像を利用するかはスケールという値によってOSに判断されます。

 

スケール

scale 修飾子は、リソースの倍率を指定します。これは一般に、画像が DPI の高いデバイスで表示された場合や、アプリが拡大された場合に使われます。リソースのスケールは、Windows.Graphics.Display.DisplayProperties.ResolutionScale の値、または次に大きい拡大リソースに一致します。リソースで scale 修飾子を使う場合は、targetsize 修飾子を使わないでください。

 

　それでは実際に確認してみましょう。

　DPIに合わせて以下の画像を用意しました。

 

　画像は同じもので上部にScaleを表す数字を書いて、ファイル名を変えただけです。

 

　XAMLコードより以下のように読み込みます。

 

<Image Source="Assets/logo.png" Width="100" Height="100"  />

 

 　Sourceプロパティが「logo.PNG」であることに注意してください。

 

 　実機やシュミレータでDPIを操作するのは難しいので、プロジェクトの「デバイス」から設定を変更してみます。XAMLファイルを開くと、左側にデバイスというタグが表示されます。

 

　 表示されていない場合は上部デザインメニューから「デバイスウィンドウ」で表示可能です。

 　デバイスウィンドウの「表示」項目を変えてみると、以下のように画像が切り替わって表示されました。

 

2560×1440 277dpiの場合

 

1366×768 148dpiの場合

 

　画像が切り替わりました。

 

プログラム側でScaleを取得するには、以下の値を利用します。

 

Windows.Graphics.Display.DisplayProperties.ResolutionScale

 

値は Windows.Graphics.Display.ResolutionScale列挙型で、Scaleが100の場合以下の文字列が得られます。

 

Scale100Percent

 

 

(参考)

修飾子を使ってリソースに名前を付ける方法 (C#/VB/C++ と XAML を使った Metro スタイル アプリ)