Entries:
Comments:
Posts:

Loading User Information from Channel 9

Something went wrong getting user information from Channel 9

Latest Achievement:

Loading User Information from MSDN

Something went wrong getting user information from MSDN

Visual Studio Achievements

Latest Achievement:

Loading Visual Studio Achievements

Something went wrong getting the Visual Studio Achievements

IWP 58 | Put the Standard Animations in your App

Download

Right click “Save as…”

One of the most beautiful design aspects of the Windows Phone OS is the use of motion design. Windows Phone is alive with motion, which acts as a huge differentiator in quality applications. Unfortunately, motion design can be very painstaking work and difficult to implement.

Fortunately the Windows Phone Toolkit has everything we need to implement powerful animations that bring your Windows Phone apps to life. In this video Shawn Oster walks us through the steps of adding the Windows Phone Toolkit and utilizing the transitions and tilt animations to make your app feel like a native part of the ecosystem.

To summarize our conversation, you can very easily add the basic page transition animation to your app in literally about 2 minutes.

Step 1: Install the Windows Phone Toolkit, or simple add the toolkit to your project using Nuget.

Note: If Nuget fails, check to see if an update is available from Tools > Extensions and Updates, under Updates > Visual Studio Gallery. You need Nuget >= version 2.1 to work with Windows Phone projects.

Step 2: (and we forgot to mention this in the video): In App.xaml.cs, locate:

RootFrame = new PhoneApplicationFrame;

and replace it with

RootFrame = new TransitionFrame();

Step 3: At the top of each page on which you want the transition to be used:

a. If the toolkit namespace is not defined, add it, (it will automatically be added if you have added any toolkit controls to the page previously):

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;
     assembly=Microsoft.Phone.Controls.Toolkit"

Finally, add the following block fo XAML to each page, (above the LayoutRoot),

     <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>

Tag:

Follow the Discussion

Remove this comment

Remove this thread

close

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.