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:07 AM

Answers

  • Hello.

    Well, you have several options here. For starters, you can use media queries so that you have a different set of styles applied when the application is occupying different areas. If you take a peek at the css file you get after creating a new blank projet, you'll find these entries:

     

    @media screen and (-ms-view-state: full-screen)
    {
    }
    @media screen and (-ms-view-state: fill)
    {
    }
    @media screen and (-ms-view-state: snapped)
    {
    }
    @media screen and (-ms-view-state: device-portrait)
    {

    }

    the queries you put inside these media queries will only be executed when its conditions are true. for instance, -ms-view-state: snapped lets you define styles which are only valid with your app is snapped.

    if you want,you can also get notifications through code. In this case,  you'll need to take a look at the Application Layout object. It fires several events which will alert you when the view is cahgend...btw, if you need to take rotation into account, then  you should also check the simpleorientationsensor object


    Luis Abreu


    Thursday, February 16, 2012 12:26 PM

All replies

  • Hello.

    Well, you have several options here. For starters, you can use media queries so that you have a different set of styles applied when the application is occupying different areas. If you take a peek at the css file you get after creating a new blank projet, you'll find these entries:

     

    @media screen and (-ms-view-state: full-screen)
    {
    }
    @media screen and (-ms-view-state: fill)
    {
    }
    @media screen and (-ms-view-state: snapped)
    {
    }
    @media screen and (-ms-view-state: device-portrait)
    {

    }

    the queries you put inside these media queries will only be executed when its conditions are true. for instance, -ms-view-state: snapped lets you define styles which are only valid with your app is snapped.

    if you want,you can also get notifications through code. In this case,  you'll need to take a look at the Application Layout object. It fires several events which will alert you when the view is cahgend...btw, if you need to take rotation into account, then  you should also check the simpleorientationsensor object


    Luis Abreu


    Thursday, February 16, 2012 12:26 PM
  • Thank you.
    Thursday, February 16, 2012 12:43 PM