I'm trying to add some screen size breakpoints to a Xaml/VB app in Windows 8.1. I'm handling the SizeChanged event in the codebehind for my main view, and calling VisualStateManager.GoToState which should propagate to the predefined Visual States that are sitting in my .xaml file. Here's the entire bit of code for a tiny example that should change the background color on a small screen, but doesn't.

MainView.xaml:

<!-- language: lang-xaml -->
<Page x:Name="PageRoot"
    x:Class="WinStoreMvvmTemplate.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"></Grid>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState x:Name="SmallLayout">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames 
                        Storyboard.TargetName="ContentGrid"
                        Storyboard.TargetProperty="Background">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="Blue"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Page>

MainView.xaml.vb:

<!-- language: lang-vb -->
Public NotInheritable Class MainView : Inherits Page

    Private Sub WindowSizeChanged(sender As Object, e As SizeChangedEventArgs) _
            Handles Me.SizeChanged
        If e.NewSize.Width < 340 Then
            VisualStateManager.GoToState(Me, "SmallLayout", True)
        End If
    End Sub

End Class

The event is definitely firing on the code end and the GoToState method is definitely being called.

Any idea why the xaml isn't picking up these changes?

Well this is silly, but it looks like the VisualStateManager.VisualStateGroups needs to be inside of the Page's child element, which in this case is Grid. I'll accept any other answer that can explain why that is.

MainView.xaml.vb:

<!-- 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>