Windows-8.1

Slide-in Animation similar to Rudy Huyn’s 6snap Login Page

You may want to replicate the effect Rudy Huyn used in his app 6snap.

He basically uses an image sliding effect on the login page of his app. As you can see, the background image slides to the right, and then again returns to the left and continues to do the same. 

 

It’s quite simple to implement but we will put it up as a tutorial to help beginners. You can start from scratch and achieve the same results using Storyboard animation. Here’s how it can be done,

Step 1: Create a new Windows Phone app and add a wide image to it

To get started, create a new Windows Phone project and add a wide image to your project. We are insisting on a wide image so that the slide-in animation shows properly.

Step 2: Add the XAML code for the required effect

This code XAML code was generated on using Blend along with double animation. Credits to Siddharth Ajmera, MSP who reproduced similar effects in his app course8 and was generous enough to share the code.

Note: Replace the image’s source with the image that you earlier added to this project.

Step 3: Invoke the animation page’s On Navigated to event

We have to begin the animation on the page’s OnNavigatedTo event handler.

That’s it. Run the app in the emulator and everything should work as expected.

Here’s a link to an awesome video by Bob Tabor from the series Windows Phone 8 for absolute beginners on Animations in XAML.

You can download the full source code of this project and use it as a reference.

Download Slide-In-Animation-BG.zip

Vivek Maskara

I am pursuing BTech in Software Engineering from Delhi Technological University. I develop apps, create websites and blog about my app experiences.

  • Ayer

    Could this tutorial be updated to windows phone 8.1? I know some XAML elements like opacitymask is not in windows phone 8.1

Read more:
How to create your first Windows Phone app
How to change the App name and Tile name of your Windows phone app
Data binding in Windows Phone app – One way binding
Close