windows 8 metro app designing for multiple Resolution

Question

I am designing a simple music app where the user gets to play instruments i.e. Drums, and the problem that I am facing is with resolutions.

The drums are images, which I have converted them into buttons. Everything looks great at the state that I have designed it.

However, when I switch to other resolution states, the button(image) are distorted, e.g. skewed, scaled, and looks nasty.

I have tried designing or arranging them via selecting 'Enable state Recording', but the specific designs for that state are not being saved.

Answer 1

Have you tried the approaches discussed here? http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx For the actual button sizes, make sure you are not fixing the width/height with pixel values. Use * weighted rows and columns to layout your grids and have the buttons autosize to fill a given cell in the grid. Then match with the appropriate image resource per the article.

Grids are great for dividing up available space but they can't account for changes in aspect ratios. If your items are still set to Stretch (or Fill) then they can end up out of aspect ratio. Another option is to design the entire layout at a fixed size (let's say 1024 x 768 or 1366 x 768) and wrap the entire thing in a ViewBox. ViewBox will scale all elements equally and maintain the aspect ratio, adding letterboxing (or empty space) on the sides / top & bottom if necessary. This might be a better approach for a drum kit.

Hope that helps.

Answer 2

Redid the whole project of designing again.

This time, I put the image inside a specific grid and that made things lot better. :)