There used to be really great designer support for Windows 8.0 apps in Visual Studio 2012. In the Device Panel, you could move to different VisualStates within the VisualStateManager.VisualStateGroups on your page and it would update the appropriate properties at design time.

In 8.1, the VisualStates are no longer based on specific snapped layouts, but you can still use the VisualStateManager and update based on the screen width.

Q: How can I get these changes to update at design time?


Here's a simple example of a change that works at runtime, but not design time.

MainView.xaml.vb:

<!-- language: lang-vb -->
Private Sub MainView_Loaded(sender As Object, e As RoutedEventArgs) Handles Me.Loaded
    AddHandler Me.SizeChanged, AddressOf WindowSizeChanged
    ApplyViewState(Me.Width, Me.Height)
End Sub

Private Sub WindowSizeChanged(sender As Object, e As SizeChangedEventArgs)
    ApplyViewState(e.NewSize.Width, e.NewSize.Height)
End Sub

Private Sub ApplyViewState(ByVal viewWidth As Double, ByVal viewHeight As Double)
    If viewWidth < 350 Then
        VisualStateManager.GoToState(Me, "SmallLayout", True)
    Else
        VisualStateManager.GoToState(Me, "RegularLayout", True)
    End If
End Sub

MainView.xaml:

<!-- language: lang-xaml -->
<Page x:Name="PageRoot"
    x:Class="WinStoreMvvmTemplate.View.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
    <Grid Background="Red" x:Name="ContentGrid">
        
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="RegularLayout"/>
                <VisualState x:Name="SmallLayout">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames 
                            Storyboard.TargetName="ContentGrid"
                            Storyboard.TargetProperty="Background">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    </Grid>
</Page>

Here's a view at Design Time: (incorrect)

design

Here's a view at Run Time: (correct)

runtime