Home/ Questions/Q 8565351
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T17:24:26+00:00

I am working on a Windows 8 Metro App with HTML and JavaScript but

  • 0

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 1366×768. Generally there is a ListView on pages, you can see simple sketch for this resolution.
1366x768

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

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 1366×768 resolution in the middle of screen.
But i couldn’t find a way to do this.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are a few things you can do to manage the layout. The first is to set the maximum number of rows that the ListView will display in its grid layout, like this:

    list.winControl.layout.maxRows = 2;

    If you have enough items, then this will have the effect of creating a wide, but shallow, layout.

    You other option, the one you mention in your question, would be to centre the ListView and fix its size. I find that the easiest way to do this is to use the CSS flex box layout. Here is a little self-contained example that shows you both the maxRows setting and the CSS, which is applied to the element which contains the ListView (and not the ListView itself). Create a new VS project, copy the markup into the default.html file and start the app and you will be able to see the effect:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <style type="text/css">
        #container {
            display: -ms-flexbox;
            -ms-flex-align: center;
            -ms-flex-pack: center;
            height: 100%;
        }
        #list {
            width: 1366px; height: 768px;
        }
        .templateItem {
            width: 200px; height: 200px; font-size: 30pt;
            margin: 10px; border: thick solid white; background-color: gray;
        }
    </style>
    <script>
        WinJS.Application.onactivated = function (args) {
            data = new WinJS.Binding.List();
            WinJS.UI.processAll().then(function () {
                for (var i = 0; i < 8; i++) {
                    data.push({ value: i });
                }
                list.winControl.layout.maxRows = 2;
            });
        }
        WinJS.Application.start();
    </script>
</head>
<body>
    <div id="template" data-win-control="WinJS.Binding.Template">
        <div class="templateItem" data-win-bind="innerText: value"></div>
    </div>
    <div id="container">
        <div id="list" data-win-control="WinJS.UI.ListView" data-win-options="{
            itemDataSource: data.dataSource,
            itemTemplate:template}">
        </div>
    </div>
</body>
</html>

    It is hard to tell from your question, but you might also consider dropping the ListView and using something else. If you have a fixed number of items to display, you might want to use standard HTML element and use CSS (possibly using the new grid layout) to get more control over how they are displayed.

    • 0