Can one set visual state for PhoneApplicationPage? - windows-phone-7

Question

I have a question about visual state management of PhoneApplicationPage. Basically, can one use VisualStateManager approach to set states of the page itself? In the end, it inherits the Control class, so this stuff should be applicable.
I'm asking because I've tried and failed. Here's my code:
<phone:PhoneApplicationPage
x:Class="Encountered.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Common">
<VisualState x:Name="State1">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Opacity)" To="1" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="State2">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Opacity)" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical">
<HyperlinkButton x:Name="button" NavigateUri="/Views/EditPage.xaml" Content="Go"/>
<Button Click="Button_Click">state</Button>
</StackPanel>
</phone:PhoneApplicationPage>
In the code-behind:
public partial class MainPage : PhoneApplicationPage
{
// Constructor
public MainPage()
{
InitializeComponent();
VisualStateManager.GoToState(this, "State1", true);
}
private void Button_Click(object sender, RoutedEventArgs e)
{
VisualStateManager.GoToState(this, "State2", true);
}
}
Any ideas what could be wrong?

Answer 1

The VisualStateManager enables you to specify when a control enters a specific state.
So, simply wrap all in a grid :
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="Common">
<VisualState x:Name="State1">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Opacity)" To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="State2">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="button" Storyboard.TargetProperty="(UIElement.Opacity)" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel Orientation="Vertical">
<HyperlinkButton x:Name="button" NavigateUri="/Views/EditPage.xaml" Content="Go" />
<Button Click="Button_Click" >state</Button>
</StackPanel>
</Grid>