Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows Phone

Windows Phone 8 : Orientation and the PhoneApplicationPage Class (part 5) - Animating the Entire Page When Orientation Changes

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
4/28/2014 1:34:57 AM

Animating the Entire Page When Orientation Changes

While animating UIElements is performed within the page, to animate the page itself requires implementation of a custom PhoneApplicationFrame. This is achieved by subclassing the PhoneApplicationFrame class, and then subscribing to the frame’s OrientationChanged event to initiate the animation.

To replace your application’s standard PhoneApplicationFrame with a custom frame, modify the App class, either in XAML or in the code-beside, to use the custom frame as the application’s RootVisual.

The following excerpt shows how the App.xaml file can be modified to use a custom PhoneApplicationFrame:

<Application.RootVisual>
    <unleashed:AnimateOrientationChangesFrame x:Name="RootFrame">
        <!-- Content omitted. -->
    </unleashed:AnimateOrientationChangesFrame>
</Application.RootVisual>

If the RootVisual is assigned in the App.xaml.cs file, as is the case by default, modify the InitializedPhoneApplication method to assign a custom frame, as shown in the following excerpt:

void InitializePhoneApplication()
{
    if (phoneApplicationInitialized)
    {
        return;
    }

    RootFrame = new AnimateOrientationChangesFrame();

    // Content omitted.
}

Microsoft’s David Anson has written two custom PhoneApplicationFrames that perform rotation and fade animation when an orientation change occurs. With David’s permission I have included them in the downloadable sample code.

The first is a frame that fades in content, called FadeOrientationChangesFrame. This class uses a WritableBitmap to create an image overlay, which animates the Opacity property of the image. By using a WritableBitmap to capture the screen, the performance of the transition is optimized and is unaffected by the page composition, that is, more controls won’t risk slowing the animation.

The second frame, the AnimateOrientationChangesFrame, is less subtle and rotates the page when the orientation changes (see Figure 4).

Image

FIGURE 4 The AnimateOrientationChangesFrame class rotates content when the page orientation changes.

To modify the default behavior of either the FadeOrientationChangesFrame or AnimateOrientationChangesFrame, use the AnimationEnabled, Duration, and EasingFunction properties.

AnimationEnabled allows you to turn off the animation at runtime.

The Duration property dictates how long the animation will take to complete, which if made too long—more than half a second—risks frustrating the user.

The EasingFunction property is used to control the speed of the animation. With easing, you can create a more realistic rate of acceleration and deceleration, such as when creating a bounce effect or to control other types of motion.

The following is a list of the various IEasingFunctions available in the Windows Phone FCL (Framework Class Library), located in the System.Windows.Media.Animation namespace of the System.Windows assembly:

- BackEaseRetracts the motion of an animation slightly before it begins to animate along the path.

- BounceEaseCreates an animated bouncing effect.

- CircleEaseCreates an animation that accelerates and/or decelerates using a circular function.

- CubicEaseCreates an animation that accelerates and/or decelerates using the formula f(t) = t3.

- ElasticEaseCreates an animation that resembles a spring oscillating back and forth until it comes to rest.

- ExponentialEaseCreates an animation that accelerates and/or decelerates using an exponential formula.

- PowerEaseCreates an animation that accelerates and/or decelerates using the formula f(t) = tp, where p is equal to the Power property.

- QuadraticEaseCreates an animation that accelerates and/or decelerates using the formula f(t) = t2. This is the default IEasingFunction of the FadeOrientationChangesFrame class.

- QuarticEaseCreates an animation that accelerates and/or decelerates using the formula f(t) = t4. This is the default IEasingFunction for the AnimateOrientationChangesFrame class.

- QuinticEaseCreates an animation that accelerates and/or decelerates using the formula f(t) = t5.

- SineEaseCreates an animation that accelerates and/or decelerates using a sine formula.

Other -----------------
- Windows Phone 8 : Working with the Windows Phone Software (part 9) - Copying Phone Content to Your PC or Tablet
- Windows Phone 8 : Working with the Windows Phone Software (part 8) - Removing Multimedia Content - Removing Pictures from Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 7) - Removing Multimedia Content - Removing a Video from Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 6) - Removing Multimedia Content - Removing Music from Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 5) - Using the Photo Interface
- Windows Phone 8 : Working with the Windows Phone Software (part 4) - Adding Content from Nonstandard Locations
- Windows Phone 8 : Working with the Windows Phone Software (part 3) - Adding an Album to Your Phone,Adding a Musical Artist to Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 2) - Adding Videos to Your Phone,Adding a Song to Your Phone
- Windows Phone 8 : Working with the Windows Phone Software (part 1) - Adding Photos to Your Phone
- Windows Phone 8 : Configuring Basic Device Settings - Phone Storage
 
 
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer