Question

Is there any way or general size template created for windows 8 app using xaml so that we can create application of different screen size and DPI. As we are having in Android we put images and screen UI in different folders and application picks it up depending on different screen size and DPI? I am trying to design a general template for this but just asking if MS has already created something like this?

Answer 1

Besides the default templates that come with VS2012 I am not aware of any other templates. Working with the diff. requirements aren’t that much of a hassle if you know how to get started. Here is some information that you might have already seen, but I’ll add it here for those reading you questions looking for some information 🙂

There are different recommendations for scaling to screen size and resolution.

In regards to pixel density and images :

Guidelines for scaling to pixel density (Windows Store apps)

Basically you create folders like so:

Option #1 – File naming convention:
…\test.scale-100.jpg
\test.scale-140.jpg
\test.scale-180.jpg

Option #2 – Folder naming convention:
…\scale-100\test.jpg
\scale-140\test.jpg
\scale-180\test.jpg

in XAML

<Image Grid.Row="0" Grid.Column="1" x:Name="testImage" Source="test.jpg" Margin="2,2,2,2"/>

The resource loading is smart and will fetch the right image from the right folder

As for scaling to screens

Guidelines for scaling to screens (Windows Store apps)

You could:

a) Have a fixed layout that scales to fit the screen
Create a Viewbox control and add your controls to it, set the size to the minimum size you want to support.
Don’t add appbars or other stuff that is by default adaptive!
Define letterboxing style and color, and don’t forget to add different res. images as I showed above.OR use vector graphics or XAML.

b) Adaptive layout ,- check out the default templates that come with VS2012, they use adaptive layout.

c) I’m sure there are other options/variations