Windows Phone 7 Navigation Animation

Question

I'm trying to do an animation when navigating away from a page, but I get this error:

Cannot resolve TargetProperty (UIElement.RenderTransform).(CompositeTransform.TranslateX) on specified object.

I copied the code from a book, and I tested the book's sample code and it works but I can't get it to work on my app. Any ideas? This is my code:

XAML:

<phone:PhoneApplicationPage.Resources>
        <Storyboard x:Name="HidePage" Completed="HidePage_Completed">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="phoneApplicationPage">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-480"/>
            </DoubleAnimationUsingKeyFrames>
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="phoneApplicationPage">
                <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-800"/>
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
<phone:PhoneApplicationPage.Resources>

C#

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
    base.OnNavigatingFrom(e);

    if (this.UriToNavigateTo == null)
    {
        e.Cancel = true;
        UriToNavigateTo = e.Uri;
        this.HidePage.Begin();
    }
    else
    {
        UriToNavigateTo = null;
    }
}

Thanks!

Answer 1

You forgot to set the CompositeTransform object, which define what kind of transform you are using.

<phone:PhoneApplicationPage.RenderTransform>
    <CompositeTransform/>
</phone:PhoneApplicationPage.RenderTransform>

Answer 2

The Silverlight toolkit at http://silverlight.codeplex.com/ now includes animations for Windows Phone 7 pages using the TransitionFrame control. You can read more about it here: http://blogs.msdn.com/b/delay/archive/2010/11/02/mo-controls-mo-controls-mo-controls-announcing-the-second-release-of-the-silverlight-for-windows-phone-toolkit.aspx

Basically, it works by setting your RootFrame to a TransitionFrame in App.xaml.cs:

RootFrame = new TransitionFrame();

And then setting navigation transitions for each page:

<toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
        <toolkit:NavigationInTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardIn"/>
        </toolkit:NavigationInTransition.Backward>
        <toolkit:NavigationInTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardIn"/>
        </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
        <toolkit:NavigationOutTransition.Backward>
            <toolkit:TurnstileTransition Mode="BackwardOut"/>
        </toolkit:NavigationOutTransition.Backward>
        <toolkit:NavigationOutTransition.Forward>
            <toolkit:TurnstileTransition Mode="ForwardOut"/>
        </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>