Layout change

Question

Many documents said Metro App can support multi-views. sometimes fullscreen, sometimes snapped. i am not familar with it. i am confused how to re-design my pages to adapt different views. please help me. how to implement it? maybe a stupid question.

Answer 1

Hi,

You can implement ApplicationLayout.LayoutChanged event to switch among different view states.

Sample code as follows.

var appLayout = Windows.UI.ViewManagement.ApplicationLayout;
var layoutStates = Windows.UI.ViewManagement.ApplicationLayoutState;

function onLoad()
{
    // Register for the application layout change event
    appLayout.getForCurrentView().addEventListener("layoutchanged", onLayoutChanged);
}

function onLayoutChanged(eventArgs)
{
    if (eventArgs.layout == layoutStates.Snapped)
    {
        // Handle snapped state
    }
   
    else if (eventArgs.layout == layoutStates.Filled)
    {
        // Handle filled state
    }
   
    else if (eventArgs.layout == layoutStates.FullScreen)
    {
        // Handle full-screen state
    }
}

---

Best wishes,

---

Robin [MSFT]
MSDN Community Support | Feedback to us
Get or Request Code Sample from Microsoft
Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 2

Thank you. Got it.

Answer 3

Hi, I used Windows 8 Consumer Preview and this class is no longer available Windows.UI.ViewManagement.ApplicationLayout. Do you know why? Do I miss any component ?

Thanks

Answer 4

Hi N,

This document documents the changes between Developer Preview and Consumer Preview (it is a sticky post at the top of the forum):

Migrating Windows 8 Developer Preview code to Consumer Preview

If you come across posts answered before the Consumer Preview, you can look in here for changes to the APIs

-Jeff

---

Jeff Sanders (MSFT)