かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

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

小ネタメモ。
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"/>

まとめ

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