locked
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.
    Thursday, February 16, 2012 10:00 AM

Answers

  • 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.

    • Marked as answer by Rails King Thursday, February 16, 2012 12:44 PM
    Thursday, February 16, 2012 12:28 PM
    Moderator
  • 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)

    Wednesday, March 28, 2012 2:45 PM
    Moderator

All replies

  • 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.

    • Marked as answer by Rails King Thursday, February 16, 2012 12:44 PM
    Thursday, February 16, 2012 12:28 PM
    Moderator
  • Thank you. Got it.
    Thursday, February 16, 2012 12:44 PM
  • 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

    Wednesday, March 28, 2012 2:25 AM
  • 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)

    Wednesday, March 28, 2012 2:45 PM
    Moderator