Windows Store Apps 8.1 and VisualStateManager - visual-studio

Question

I am having a difficult time solving a Visual State problem after moving to VS2013 and Windows Store Apps for 8.1. I have an app with a AppBar "About" button that takes the user to the About page. Works just fine. I want a stackpanel on the About page to change orientation when the view changes to Portrait. Been working on this for hours and reading countless websites with exact replicas of this code, but mine will not work. Any ideas?
Here's the C# code on AboutPage.cs:
private void AboutPage_SizeChanged(object sender, SizeChangedEventArgs e)
{
if (e.NewSize.Height / e.NewSize.Width >= 1)
{
VisualStateManager.GoToState(this, "Portrait", true);
}
else
{
VisualStateManager.GoToState(this, "DefaultLayout", true);
}
}
Here's the XAML on AboutPage.xaml:
<Page
x:Name="pageRoot"
x:Class="xxxxxxxxxxxxxxxxx.AboutPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:xxxxxxxxxxxxxxxxxx"
xmlns:common="using:xxxxxxxxxxxxxxx.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" SizeChanged="AboutPage_SizeChanged">
<Page.Resources>
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<!--<x:String x:Key="AppName">xxxxxxxxxxxxxxxxxxx</x:String>-->
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid x:Name="pageMainGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid x:Name="pageHeaderGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel
x:Name="headerStackPanel"
Grid.ColumnSpan="3"
Background="#FF4617B4"
Orientation="Horizontal" >
<Button
x:Name="backButton"
Margin="39,59,39,0"
Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock
x:Name="pageTitle"
Style="{StaticResource HeaderTextBlockStyle}"
Grid.Column="1"
IsHitTestVisible="false"
TextWrapping="NoWrap"
VerticalAlignment="Bottom"
Margin="0,0,30,40"
Text="{StaticResource AppName}"/>
</StackPanel>
</Grid>
<Grid
x:Name="pageContentGrid"
Grid.Row="1"
Visibility="Visible">
<Grid.RowDefinitions>
<RowDefinition Height="20*"/>
<RowDefinition Height="142*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150*"/>
<ColumnDefinition Width="372*"/>
<ColumnDefinition Width="150*"/>
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Margin="0,0,0,0"
TextAlignment="Center"
Text="About"
FontSize="48"
FontFamily="Segoe UI"/>
<ScrollViewer
BorderThickness="0,2,0,0"
BorderBrush="DarkGray"
Grid.Row="1"
Grid.Column="1"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
Margin="0">
<StackPanel
Margin="40">
<TextBlock
Text="xxxxxxxxxxxxxxxxxx"
FontSize="34" />
<TextBlock
Text="by xxxxxxxxxx"
FontSize="24"/>
<StackPanel
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,6,0,0"
Padding="0,0,0,0"
Text="Website:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="http://www.xxxxxxxxxxxxxx.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="www.xxxxxxxxxxxxxxxxxx.com" />
</StackPanel>
<StackPanel
x:Name="emailStack"
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,4,0,0"
Padding="0,0,0,0"
Text="Support Email:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="mailto:xxxxxxxxxxxxxx#gmail.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="xxxxxxxxxxxxxxxxx#gmail.com" />
</StackPanel>
<TextBlock
Margin="0,30,0,0"
Text="Feedback:"
FontSize="24"/>
<TextBlock
TextWrapping="Wrap"
Margin="0,10,0,10"
FontSize="20" >
Please take a few moments to rate and review my application.
Every little bit of encouragement and/or constructive feedback
is appreciated.
<LineBreak /><LineBreak />
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</TextBlock>
</StackPanel>
</ScrollViewer>
<Rectangle
Grid.Row="0"
Grid.Column="0"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
Fill="DarkGray" />
<Rectangle
Grid.Row="0"
Grid.Column="2"
Grid.RowSpan="2"
HorizontalAlignment="Stretch"
Fill="DarkGray" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(StackPanel.Orientation)"
Storyboard.TargetName="emailStack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>

Answer 1

This needs to be highlighted because it's the answer:
Ok, finally... problem solved! The trick was to locate the VisualStateManager XAML block right after the Grid that contains the control you want to modify when changing screen size. I modified the AboutPage XALM block in my original post to show the correct configuration
This is a breaking change from .NET 4.5.1 where you can place the VisualStateManager before the controls that are effected.

Answer 2

Putting the VisualStateManager within the main control in the content of your Page (usually a Grid or a StackPanel) should change the layout of your AppBar. Give it a try.
<Page
...
SizeChanged="Page_SizeChanged">
<Page.BottomAppBar>
<AppBar>
<StackPanel
x:Name="emailStack"
Orientation="Vertical"
Margin="0,25,0,0">
<TextBlock
Margin="0,4,0,0"
Padding="0,0,0,0"
Text="Support Email:"
FontSize="24"
VerticalAlignment="Center"/>
<HyperlinkButton
Margin="0,0,0,0"
Padding="-5,0,0,0"
FontSize="20"
NavigateUri="mailto:xxxxxxxxxx#gmail.com"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Content="xxxxxxxxxxx#gmail.com" />
</StackPanel>
</AppBar>
</Page.BottomAppBar>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="DefaultLayout">
<Storyboard>
</Storyboard>
</VisualState>
<VisualState x:Name="Portrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetProperty="(StackPanel.Orientation)"
Storyboard.TargetName="emailStack">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Orientation>Horizontal</Orientation>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</Page>