locked
Windows Store App - Snapping and filled states RRS feed

  • Question

  • How do I know when an app is snapped/filled? How do i rearange elements in XMAL based on there actions?

    There are a few codes metioning these words on the bottom of a typical Basic Page. But i do not know excatly what those codes do. Can somebody tell me?

    Friday, December 7, 2012 4:13 PM

Answers

  • SizeChanged event on the page will be fired and you can check ApplicationView.Value about the current state.

    when you're using the LayoutAwarePage (Basic Page in Visual Studio templates) there  are defined states for each State and with the VisualStateManager you can do your rearrange actions. If you dont have experience with try to use blend, it has a better support for editing the states of you page


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#


    Friday, December 7, 2012 4:26 PM
  • Hi Kalel111,

    The page can be opened in both Visual Studio and Blend, there is no need to export the page.

    It is strongly recommended that you go through the "Hello World" sample first. It help you to get started with Windows Store app quickly. For the snap view question, you can also check out that sample.

    Best regards,


    Min Zhu
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min ZhuMember Tuesday, January 8, 2013 9:33 AM
    Monday, January 7, 2013 4:55 AM
    Moderator
  • kalel111, I hope this answer is a bit more useful than those above.

    Think of your app as having several different layouts all based on (or derived from) your main layout (which should usually be landscape full screen by default). If you start with the 'layout aware' template the code you need will be there already.

    Design your UI for fullscreen landscape, then create modifications for the other views under 'Visual States' in your XAML. You can create modifications for your UI in each of the different states (for a state that doesn't hold any modifications it will just keep the default layout, which is what I usually do for the 'filled' state).

    Under each state (e.g. 'Snapped') you enter the changes to each UI element that needs to appear differently. These changes are applied whenever the app goes into that state. It's best to download a sample that has different layouts to see the exact code. The gist of it is that you just enter new values for different items, e.g. a button's visibility can be set to 'collapsed' or a grid column's width could be changed to a different size.

    Think of it as "when my app is snapped, make the following changes to the default layout".

    Of course most can be done in VS or Blend by selecting the appropriate 'device' (screen state) and ticking 'record state'. Any changes you make to the UI will then be applied only to the currently selected state. However, be careful as some things don't seem to work as expected (especially grids), and you could end up inadvertently changing your default layout.

    • Marked as answer by kalel111 Thursday, January 10, 2013 3:08 AM
    Monday, January 7, 2013 5:27 AM

All replies

  • SizeChanged event on the page will be fired and you can check ApplicationView.Value about the current state.

    when you're using the LayoutAwarePage (Basic Page in Visual Studio templates) there  are defined states for each State and with the VisualStateManager you can do your rearrange actions. If you dont have experience with try to use blend, it has a better support for editing the states of you page


    Microsoft Certified Solutions Developer - Windows Store Apps Using C#


    Friday, December 7, 2012 4:26 PM
  • FIRST OPTION:

    inside which tags do i place the rearranging actions?

    SECOND OPTION:

    Can the page I am working on in blend somehow? How do i export the page out after finishing so that is shown in Visual Studios again?

    Friday, December 7, 2012 6:05 PM
  • Hi Kalel111,

    The page can be opened in both Visual Studio and Blend, there is no need to export the page.

    It is strongly recommended that you go through the "Hello World" sample first. It help you to get started with Windows Store app quickly. For the snap view question, you can also check out that sample.

    Best regards,


    Min Zhu
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Min ZhuMember Tuesday, January 8, 2013 9:33 AM
    Monday, January 7, 2013 4:55 AM
    Moderator
  • kalel111, I hope this answer is a bit more useful than those above.

    Think of your app as having several different layouts all based on (or derived from) your main layout (which should usually be landscape full screen by default). If you start with the 'layout aware' template the code you need will be there already.

    Design your UI for fullscreen landscape, then create modifications for the other views under 'Visual States' in your XAML. You can create modifications for your UI in each of the different states (for a state that doesn't hold any modifications it will just keep the default layout, which is what I usually do for the 'filled' state).

    Under each state (e.g. 'Snapped') you enter the changes to each UI element that needs to appear differently. These changes are applied whenever the app goes into that state. It's best to download a sample that has different layouts to see the exact code. The gist of it is that you just enter new values for different items, e.g. a button's visibility can be set to 'collapsed' or a grid column's width could be changed to a different size.

    Think of it as "when my app is snapped, make the following changes to the default layout".

    Of course most can be done in VS or Blend by selecting the appropriate 'device' (screen state) and ticking 'record state'. Any changes you make to the UI will then be applied only to the currently selected state. However, be careful as some things don't seem to work as expected (especially grids), and you could end up inadvertently changing your default layout.

    • Marked as answer by kalel111 Thursday, January 10, 2013 3:08 AM
    Monday, January 7, 2013 5:27 AM