win8 VisualStateGroup

This post is part of my Windows 8 / WInRT exploration and notes.  This time, I’m digesting the WinRT Controls sample.

This sample has quite a few more features to digest. There are six different control scenarios. This application supports landscape, portrait, and snapped orientations. As a result, this post will get longer than my average post.

Screen Orientation Support

Most of the orientation support is provided by the underlying framework. Your application must  respond to the ViewStateChanged event:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().ViewStateChanged += 

 

    new TypedEventHandler

 

    <Windows.UI.ViewManagement.ApplicationView, Windows.UI.ViewManagement.ApplicationViewStateChangedEventArgs>

 

    (MainPage_ViewStateChanged);

 

When you receive this event, you instruct the Visual State Manager to transition to a particular state:

 

VisualStateManager.GoToState(this, 

 

    ApplicationView.Value.ToString() + DisplayProperties.ResolutionScale.ToString(), false);

 

 

 

The States must be defined in your main window’s XAML description.  Your XAML must include a <VisualStateManager.VisualStateGroups> node.  This element contains a sub-element called VisualStateGroup.  The VisualStateGroup element contains a number of VisualState elements. These elements are named and those names are the states used in the GoToState call above.  Here’s en edited version from the Controls sample:

<VisualStateManager.VisualStateGroups>

 

     <VisualStateGroup x:Name="OrientationStates">

 

          <VisualState x:Name="FullScreenLandscapeScale100Percent"/>

 

          <VisualState x:Name="FilledScale100Percent">

 

         <!-- elided -->

 

          </VisualState>

 

          <VisualState x:Name="FullScreenPortraitScale100Percent">

 

         <!-- elided -->

 

          </VisualState>

 

          <VisualState x:Name="SnappedScale100Percent">

 

         <!-- elided -->

 

          </VisualState>

 

          <VisualState x:Name="FullScreenLandscapeScale140Percent">

 

         <!-- elided -->

 

          </VisualState>

 

          <VisualState x:Name="FilledScale140Percent"/>

 

          <VisualState x:Name="FullScreenPortraitScale140Percent">

 

         <!-- elided -->

 

          </VisualState>

 

          <VisualState x:Name="SnappedScale140Percent"/>

 

     </VisualStateGroup>

 

</VisualStateManager.VisualStateGroups>

 

This application supports eight different visual states.  See the documentation for the ViewStateChanged event for more details.

Once the app is loaded, it runs mostly like a familiar WPF or Silverlight application. There is a control for the list of scenarios.  When you select a different scenario, the main window loads the input and output panes for that scenario.

With only one exception, the scenarios are entirely coded in XAML. Rather than put a lot of declarative XAML in the enntry, I’ll point out the big picture concept:

If you have been writing WPF or Silverlight applications at all, the XAML used for the WinRT controls will be completetly familiar to you. Run the application, and you can likely guess exactly what the XAML looks like.

So far, Windows 8 apps look a lot like WPF or Silverlight apps (if you are a C# or VB.NET developer).