かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

ピクセル密度に応じて表示画像を変える

小ネタメモ。
Windows8では様々なピクセル密度のデバイスが出てくることが考えられます。iPadみたいな網膜ディスプレイ?みたいなやつとか、今までのふつうのPCの解像度のやつとかetc...。

そんなときに厄介なのは画像です。小さい画像は何も考えずにピクセル密度上げていくと粗が目立ってしまいます。できることなら、ピクセル密度が上がったら、それに応じたきれいな画像を出したいですよね?ということを簡単にやる機能のご紹介。

画像の表示方法

WinRTは、ここらへんちゃんと考えてくれてて、dpiに応じて表示する画像を選んでくれます。基準は以下の通り。

  • 135dpi(11.6インチで1366x768):100%
  • 190dpi(11.6インチで1920x1080):140%
  • 253dpi(11.6インチで2560x1440):180%

画像ファイルは以下のような命名規約に従って準備しておくだけです。

  • AAAAAAA.scale-100.png
    • 100%の場合
  • AAAAAAA.scale-140.png
    • 140%の場合
  • AAAAAAA.scale-180.png
    • 180%の場合

画像の指定方法は、imageタグを使って以下のように指定すればOKです。

<!-- Assetsフォルダの中に上記の3ファイルを置いている場合 -->
<Image Source="/Assets/AAAAAAA.png" Stretch="None"/>

まとめ

ということで、高い解像度のマシンで見られた時にじゃぎじゃぎにならないように、綺麗な画像も用意しておきましょうという話しでした。