Enable State Recording in Blend for Visual Studio in a Windows 8 Application

Question

I am looking for a way to add the Snapped Visual State to my Windows 8 application. According to MSDN, I can do this by selecting this under Device and enabling "Enable state recording". However, this option is disabled. The only visual state shown is "". How do I enable this option so I may edit this state?

Do I need to manually create the Visual State in the XAML?

Answer 1

If you are using a Blank page (or the Blank project), your class will inherit from Windows.UI.Xaml.Controls.Page which doesn't automatically bring in the visual state management, and you won't see any VisualStates in the XAML.

If you create one of the other page types, the page class extends LayoutAwarePage which contains the plumbing to work with the various visual states, and the visual states are seeded in the XAML. You can manually add the following XAML to your existing page to get the design functionality, but you'll still need to manage the switches to the state when the orientation changes (something that LayoutAwarePage does for you)

       <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="ApplicationViewStates">
             <VisualState x:Name="FullScreenLandscapeOrWide"/>
             <VisualState x:Name="FilledOrNarrow" />
             <VisualState x:Name="FullScreenPortrait" />
             <VisualState x:Name="FullScreenPortrait_Detail" />
             <VisualState x:Name="Snapped" />
             <VisualState x:Name="Snapped_Detail" />
          </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>