Simplify Page Transitions in Windows Phone 7 Silverlight Applications

Sign in to queue

The Discussion

  • User profile image
    Matthijs

    Thanks, I like the video. Would love to see a bit more high quality video. I downloaded the HWMV (High) but can't read the blend screens.

  • User profile image
    ararog

    Sources please?

  • User profile image
    JeffBrand

    I will be getting source up to my site, slickthought.net, in the coming days.  I had a bit of a hoster issue that took my site offline so we had to pull the download links from the article.  Check the site at the end of the week and I should have a post up pointing to the download.

  • User profile image
    Hikari

    Great example! That's what I needed.

     

     

    OOOPS, SOME PROBLEM

    For the reasons I don't know, adding a reference to Layout.Toolkit prevents aplication from starting, i.e. I see only black screen instead of first page. This happens even when running your source file.

     

    I have Windows Phone 7 CTP from April refresh and Silverlight Toolkit v3 from November 2009.

     

    What is going on?

  • User profile image
    JeffBrand

    Hmmmm... not sure.  I just got the April CTP up and running and have not had a chance to try out the FindAZip on it yet.  Maybe grab the TransitioningContentControl source code from the Toolkit and add that directly to your project.  Might be able to identify the problem that way.  I will try and get a look at it when I get some free time.

  • User profile image
    Jeff Klawiter

    There is a major bug with the Windows Phone 7 April Refresh that prevents it from loading any code signed assemblies that are not part of the Windows Phone 7 SDK. There is a work around

    http://www.manyniches.com/windows-phone/signed-assemblies-bug-in-the-windows-phone-tools-ctp-refresh/

     

    you have to do this for nearly every control you add outside of the base sdk. Even standard silverlight dlls like System.Windows.Browser.dll

     

    Jeff:

    There is another bug with your app in the new refresh. They got rid of the TopLevelNavigationService property alltogether. I haven't been able to find an alternative so your global error handler breaks.

  • User profile image
    JeffBrand

    Thanks for the info Jeff! 

     

    For the TopLevelNavigationService... (I don't have the code in front of me - on a different laptop), if it is what I am thinking of, you will have to use the Application.Current.RootVisual and cast it to a PageNavigationFrame and grab the Nav service from there.  That's my guess...

  • User profile image
    Hypi

    Hey Jeff

     

    Nice one! 

     

    But I can't get it to run in my solution. got rid of the signed assemblies bug but I get a senseless XAML parseexception from this line:

    <layout:TransitioningContentControl Content="{TemplateBinding Content}" Style="{StaticResource TransitioningStyle}" />

     

    When I run it, I get this:

    XamlParseException occured

    2024 An error has occurred. [Line: 19 Position: 12]

     

    Parser says this:

    Error    1    [Parser_SetValue_Exception]
    Arguments: System.Windows.FrameworkElement.Style
    Debugging resource strings are unavailable. Often the key and arguments provide sufficient information to diagnose the problem. See http://go.microsoft.com/fwlink/?linkid=106663&Version=4.0.50401.0&File=System.Windows.dll&Key=Parser_SetValue_Exception [Line: 144 Position: 39]    C:\Users\Hypi\Documents\Visual Studio 2010\Projects\WinPhoneRSS\WinPhoneRSS\App.xaml    774    9    WinPhoneRSS

     

    when I remove this line, it works but without transitions for sure Wink

     

    u have any clue?

  • User profile image
    JeffBrand

    I just got the project working under the April CTP.  At this point, I brute forced it by putting the TransitioningContentControl source directly into my project.  I am working on a blog post / screencast to show how to get things working.  I have a couple of other things I want to explore before I finish it up.  Keep an eye here or on my blog - http://slickthought.net for details.  Hopefully in the next day or so...

  • User profile image
    Hypi

    thx jeff, I will keep an eye on it.

  • User profile image
    JeffBrand

    You can see a quick fix to getting the TransitioningContentControl working with the April CTP here - https://channel9.msdn.com/posts/SlickThought/Windows-Phone-7-April-CTP-and-TransitioningContentControl/

  • User profile image
    MikeKnoop

    Hi Jeff, would either the "brute force" or TransitioningContentControl method for Page transitions be suitable for animating the transition between different orientations of the same Page? For example, fading out the portait view and fading in the landscape view when the phone is oriented into landscape mode?

     

    Thanks!

  • User profile image
    JeffBrand

    I dont think TCC would do the trick.  I took just a quick look, but an orientation change does not actually change the page content, so the TCC would not be invovled in at all.  It would just behave "as normal".  You would need to wire up the OnOrientationChanged event at the page level and control an animation from there I think.  I want to say Peter Torr has a MIX10 video that shows him doing this.

  • User profile image
    MikeKnoop

    Jeff, you were correct, Peter Torr does have a video covering this. For future reference, it is located here (http://live.visitmix.com/MIX10/Sessions/CL17) at the 10:45 mark. Thanks again!

  • User profile image
    MikeKnoop

    Jeff, one more question concerning TCC, now that I have gotten the AprilCTP workaround implemented and functioning properly within my test application (to do normal page to page transitions). I noticed it works perfectly in portrait orientation. However, when I switch the emulator to landscape and navigate to a different page, the current page is very briefly flashed onto the screen in portrait mode and then the correct animation takes place. This behavior is also noticeable in the demo you posted (to reproduce, note that I had to add landscape support to the Favorites.xaml page).

     

    My guess is this is an artifact of how the TCC actually creates the Page transitions. As it was designed for desktop Silverlight implementations, it did not have to worry about portrait vs. landscape. Of course it could just be an emulator screen buffer issue. Do you have any further thoughts on this? I would feel very hesitant shipping an app if the emulator is a true reflection of how an application with TCC would appear on a device. Thanks!

  • User profile image
    JeffBrand

    Interesting. I hadnt really noticed it because I was always using the back button to navigate between pages when I was in landscape mode.  Problem when you have a demo app that has TWO WHOLE pages. Wink  I'm not sure what is going on.  It appears to have something to do with sliding content into the various content controls that make up the TCC and the phone having to figure out that the new content should be in landscape rather than portait.  I would lean toward this being a bug in the phone but I have spent about 5 minutes looking at it.  I will try and dig deeper into it tomorrow.

     

     

    UPDATE: Ok, this happens on pages with our without the TCC.  I have sent an email to the dev team to see if this is by design, emulator issue, or bug.

  • User profile image
    JeffBrand

    Confirmed that the flicker is a known issue and entered as a bug.

  • User profile image
    Shalan

    Hi,

     

    have you had the time to port this all over to the current Beta SDK? There were so many changes that this would help alot Smiley

  • User profile image
    kettch

    Does it work in the Beta? I followed the video through with the beta, and I can't get it to work at all.

  • User profile image
    dotNet​Professional

    For those interested I spent 10 minutes converting it over - not much to change really. Anyway I've updated the project and you can find it on my bog:

     

    http://www.dotnetprofessional.com/blog/post/2010/08/17/Custom-per-page-page-transitions-for-Windows-Phone-7-updated-to-Beta.aspx

     

    Hope this helps out...

  • User profile image
    Tigerpower

    Hi dotNetProfessional, the link you have posted does not work, could you please give the good link for your zip file.

    Thanks a lot!

  • User profile image
    dotNet​Professional

    Sorry about that! Seems I forgot to add the http bit so the Url became relative. I've just fixed it so hopefully it will work now Smiley

  • User profile image
    gahayden

    Hey Jeff,

    Using the simple model you first describe (for a simple 2-page application) I was able to create a nice trasition from MainPage to Page 2. However, intercepting the back button in order to implement the transition in reverse has an unacceptable side-effect. The PhoneApplicationPage_BackKeyPress is used to intercept the navigation and allow the transition; however, the stack comes into play and we're caught in an endless loop between the MainPage and Page 2.

    Is there any way to deactivate the application from code? Intercepting the back button on the MainPage and deactivating thte app, is in effect returning to the normal action that would result from the back button being pressed on the MainPage?

    Alternatively, your second method looks appealing but the Silverlight 3 Toolkit is proving difficult to locate now that Silverlight 4 and the new Silverlight for WP7 are released. Can you provide a link to the older Silverlight 5 Toolkit you used in this video?

    Thanks,

    Greg

  • User profile image
    karstenj

    Here's how to do this with the latest Silverlight toolkit (November 2010) http://rhizohm.net/irhetoric/post/2010/11/09/Page-Transition-Animations-and-Windows-Phone-7.aspx 

Add Your 2 Cents