locked
Windows store app - Visual State Groups in windows 8.1 RRS feed

  • Question

  • I have all my controls in a Viewbox right now. How do I use Visual State manager in XAML to have the app adapt to different snap views?

    For example if i had a button on my grid. and the smaller the snap view gets the smaller the button size should be.

    <Button Name="myButton" Width = "500" Height="30"/>

    So i guess the real question is how do use visual state manager? Can anyone show me examples using the Button control?

    Thanks

    Tuesday, January 21, 2014 4:19 PM

Answers

  • Visual States are discrete, so they're good for specific sizes but not for a continuous range. You could set your button to a specific size or place when the window is less than 500 pixels wide and another size and place when it is between 500 and 720, but you wouldn't use states to change the position continuously as the window size changed. Your ViewBox is better for that.

    See Quickstart: Designing apps for different window sizes and Specifying the visual behavior of a control

    If you have specific questions after reading these please let us know!


    Tuesday, January 21, 2014 4:25 PM
    Moderator
  • Hi Kalel,

    What you are talking about are Application View States. Snapped view was an Application View State with Width 320 pixels in Windows 8, but is not a specific state in Windows 8.1.

    In Windows 8.1 the application defines and manages its own states based on the window's size. You can define them in whichever way makes sense for the app. Typical versions are Landscape (if the Width > Height), Portrait (if the Height > Width), and Minimal (similar to Windows 8's "Snapped") if the Width <= 500.

    This is discussed and demonstrated (with code) in   Quickstart: Designing apps for different window sizes .

    --Rob

    Tuesday, January 21, 2014 9:19 PM
    Moderator

All replies

  • Visual States are discrete, so they're good for specific sizes but not for a continuous range. You could set your button to a specific size or place when the window is less than 500 pixels wide and another size and place when it is between 500 and 720, but you wouldn't use states to change the position continuously as the window size changed. Your ViewBox is better for that.

    See Quickstart: Designing apps for different window sizes and Specifying the visual behavior of a control

    If you have specific questions after reading these please let us know!


    Tuesday, January 21, 2014 4:25 PM
    Moderator
  • But i need to know how to use VisualStateManager along with Viewbox.

    Since my app will run on many different screens.  

    Can't i trigger the different Visual States to run based on the different snap views instead of  based on the size of the app currently?

    Tuesday, January 21, 2014 4:42 PM
  • What do you mean by different snap views?

    Your app is in control of the Visual States for its page and can call VisualStateManager.GoToState based on whatever criteria make sense for the app. If you want to define several snap view states then you can transition there based on your app's logic.

    --Rob

    Tuesday, January 21, 2014 6:55 PM
    Moderator
  • Snaps Views - when the application only takes up part of the screen. Like so

    I believe windows 8.1 has 4 views. I want the different snap views to be the trigger for which Visual state to go to. So if there is a class that fires an even when the app is resized and lets me know which snap view(landscape, portrait...etc) it's in. Then that's what i am looking for.

    Tuesday, January 21, 2014 8:58 PM
  • Hi Kalel,

    What you are talking about are Application View States. Snapped view was an Application View State with Width 320 pixels in Windows 8, but is not a specific state in Windows 8.1.

    In Windows 8.1 the application defines and manages its own states based on the window's size. You can define them in whichever way makes sense for the app. Typical versions are Landscape (if the Width > Height), Portrait (if the Height > Width), and Minimal (similar to Windows 8's "Snapped") if the Width <= 500.

    This is discussed and demonstrated (with code) in   Quickstart: Designing apps for different window sizes .

    --Rob

    Tuesday, January 21, 2014 9:19 PM
    Moderator