locked
Designing snapped view of a windows store app RRS feed

  • Question

  • how to define the ui of an app for snapped view?? How to change the positions of the controls in the UI when app changes to snapped view??

    Thanks in advance!!

    Saturday, August 17, 2013 8:26 PM

Answers

  • I would suggest you create two grids in the page: One for full view, and another for snap view. Look at the LayoutAwarePage as suggested and create a simple storyboard that turns the visibility of one panel off, and turns the other half on. It's a lot easier to do it this way (and how most do it), rather than moving existing controls around, and it's also a lot more flexible since you're completely free to use other controls (a typical example is to use the gridview in fullview, and a listview in snapview).

    /Morten
    twitter: http://www.twitter.com/dotMorten
    blog: http://www.sharpgis.net

    Sunday, August 18, 2013 4:46 AM
  • Take a look at the LayoutAwarePage class in the standard templates (other than the Blank one) for an example of detecting view changes and then changing the view state. You can use Blend to edit your page to select different layouts in different ViewStates.

    Note that Windows 8.1 Preview no longer has the Snapped state as such. Instead users can size their apps to any size from 500 pixels wide on up. Apps can also choose to support 320 pixels and up. Apps can alter their layout based on the width of the window to handle landscape, portrait and skinny views as appropriate. See Guidelines for resizing windows to tall and narrow layouts .

    --Rob

    Saturday, August 17, 2013 10:58 PM
    Moderator

All replies

  • Take a look at the LayoutAwarePage class in the standard templates (other than the Blank one) for an example of detecting view changes and then changing the view state. You can use Blend to edit your page to select different layouts in different ViewStates.

    Note that Windows 8.1 Preview no longer has the Snapped state as such. Instead users can size their apps to any size from 500 pixels wide on up. Apps can also choose to support 320 pixels and up. Apps can alter their layout based on the width of the window to handle landscape, portrait and skinny views as appropriate. See Guidelines for resizing windows to tall and narrow layouts .

    --Rob

    Saturday, August 17, 2013 10:58 PM
    Moderator
  • I would suggest you create two grids in the page: One for full view, and another for snap view. Look at the LayoutAwarePage as suggested and create a simple storyboard that turns the visibility of one panel off, and turns the other half on. It's a lot easier to do it this way (and how most do it), rather than moving existing controls around, and it's also a lot more flexible since you're completely free to use other controls (a typical example is to use the gridview in fullview, and a listview in snapview).

    /Morten
    twitter: http://www.twitter.com/dotMorten
    blog: http://www.sharpgis.net

    Sunday, August 18, 2013 4:46 AM