Question

How do I get the dimensions of the window in a windows 8 metro app?

I want to fill the screen with a canvas element, and currently my default.js file looks something like this

// ... some autogenerated code ...
app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
    // ... some autogenerated code ...

    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    canvas.width  = 600;  // I want to set width and height here so that
    canvas.height = 800;  // canvas fills the entire screen/window.
};
// ... more autogenerated code ...

Answer 1

To get the size, you need:

window.outerWidth
window.outerHeight

This will return the logical size with scale factors already applied.

Note that you also want to listen for View State Changes, and when you enter/leave snapped, fill, full modes to make sure that your UI adjusts to the new window sizes.

Specifically, you need to either use CSS media query matching:

var snappedNotification = matchMedia("all and (-ms-view-state: snapped)");
snappedNotification.addEventListener(mySnappedFunction);

Or listen for window.resize, and use the current view state to look at the current view:

var currentViewState = Windows.UI.ViewManagement.ApplicationView.value;

http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.viewmanagement.applicationviewstate.aspx