Windows Store aplikace - řešte DPI, neřešte rozlišení

  • Article

Je jedno, zda vytváříte uživatelské rozhraní pomocí technologie XAML nebo HTML. Obě tyto technologie, pokud jsou správně použity, si umí poradit s obrazovkou o různém rozlišení a o různé velikosti.

Potíže nastanou, pokud začnete používat bitmapovou grafiku pro prvky uživatelského rozhraní. Problém je v DPI obrazovky. Čím máte menší úhlopříčku a větší rozlišení, tak je jeden pixel co do fyzických rozměrů menší a tím pádem i bitmapový obrázek bude mít jiný rozměr. Ovládací prvky, které jsou vytvořeny bitmapovou, se pak budou jevit na různých obrazovkách různě veliké. Proto je každá obrazovka podle své úhlopříčky a rozlišení, zařazena do jedné ze tří kategorií "zvětšení". Základem je obrazovka o úhlopříčce 10,6'' a rozlišení 1366 x 768 (148dpi). Tato obrazovka, a jí podobné, spadají do kategorie zvětšení 100%. Toto je výchozí obrazovka pro design aplikace. Zvětšení 140% se odvozuje od 207dpi (např. 10,6'' 1920 x 1080) a zvětšení 180% vychází z 277dpi (např. 10,6'' 2560 x 1440). Pokud chcete mít opravdu perfektní design, v kterém používáte bitmapovou grafiku, tak je třeba, abyste pro každé "zvětšení" obrazovky měli připraven odpovídající obrázek, který bude vytvořen pro dané zvětšení. Pro takto vytvořené obrázky se používá jmenná konvence picture.scale-100.png, picture.scale-140.png a picture.scale-180.png. Místo změny názvu obrázku můžete vytvořit tři adresáře scale-100, scale-140 a scale-180.

Na takto vytvořený obrázek se odkazujete bez použití "scale-1x0".

<Image Source="/Picture.png" Stretch="None" />

Chování si můžete vyzkoušet pomocí panelu Device ve Visual Studio 2012 nebo v Blend for Visual Studio 2012.

To se týká i grafiky pro dlaždici aplikace. Pro každé "zvětšení" aplikace můžete mít jinou grafiku.

Další informace najdete v dokumentu Guidelines for scaling to pixel density.

Štěpán, @stepanb