High Resolution And ListView At Windows 8 Metro App

Question

I am working on a Windows 8 Metro App with HTML and JavaScript but i faced a problem with screen scaling.

Currently i am designing application for 1366x768. Generally there is a ListView on pages, you can see simple sketch for this resolution. 

But when resolution increase, for example for 2560x1440 resolution ListView seems like image below. 

As you can see this seems very ugly. Actually i am not sure what i should do for high resolutions.

First thing i thought preserve same ListView at 1366x768 resolution in the middle of screen. But i couldn't find a way to do this.

---

Bahadir ARSLAN http://www.bahadirarslan.com

Answer 1

You can do like the Windows Store does for higher resolutions and just limit the number of rows.  This can be set using the maxRows property on the GridLayout:

http://msdn.microsoft.com/en-us/library/windows/apps/br211750.aspx

You could also change the size of each tile using css media queries.  This would allow you to increase the size of each screen resolution increases:

http://msdn.microsoft.com/en-us/library/windows/apps/hh466202.aspx

---

Dave Paquette @Dave_Paquette www.davepaquette.com

Answer 2

Hi,

you can do this with media queries (here's an article from Stephen Walther about it). In the appropriate media query you only have to detect the resolutions where you're screen goes ugly and then rearrange your items through CSS.

---

Best Regards. When you see answers and helpful posts, please click Vote As Helpful, Propose As Answer, and/or Mark As Answer. This helps us build a healthy and positive community.

@Horizon_Net | Blog

Answer 3

After i asked here i set height property of outer div of ListView to 768 and it helped me.

But maxRows property was the first thing that i looked for but i couldn't. Thanks for this information, too..

---

Bahadir ARSLAN http://www.bahadirarslan.com