Can one set visual state for PhoneApplicationPage?

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?

Try a similar example from the post below http://stackoverflow.com/questions/7139099/visualstatemanager-fails-to-start-animation-on-usercontrol — Somnath, Sep 24 '12 at 11:16

score 0 · Accepted Answer · answered Sep 24 '12 at 11:40

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>

Yep, I've also found that putting VisualStateManager to some child entity of the page make things work, i.e. you can say **VisualStateManager.GoToState(phone_app_page, "state", true)**. However, I find this very misleading. It doesn't work when you set property on a Control instance (what PhoneApplicationPage is), but works when you set it to a non-Control (Grid inherits Panel, not Control). Has anyone any idea about logic behind this design? — Haspemulator, Sep 24 '12 at 12:58
Okay, this answer at least gives the workaround, so I accept it. However, it would be nice to have some explanation of some reason behind this logic. — Haspemulator, Sep 25 '12 at 18:32

Can one set visual state for PhoneApplicationPage?

1 Answers1