How to change the Windows phone Panorama Background image dynamically with Animation

In this blog post I will show you how to change the Background image of Panorama page in windows phone app dynamically using smooth fade in animation.


 

To add this animation in your app you need to follow the certain steps given below

 

1. Create a new Project having the name PanormaBackground.

 


 

2. Then add a new Panorama Page to the project having the name PanoramaPage.xaml.

 


 

3. Add a button on the MainPage.xaml having the content Panorama Page. On the click event handler of the button add the following code given below.

 

 

4. Now open the Page PanoramaPage.xaml

a) Change the name property of Panorama control to mypanorama.

 


 

b) Add the following code in Panorma control of the Page as shown in the image given below.

 

 


 

5. Now open the PanoramaPage.xaml.cs

a) Our first step would be to switch the background images. We will create a FadeIn/FadeOut animation effect with the help of following code given below.

 

 

b) Next we need to add the trigger function to change the background image.

The main calling function to trigger the animation

 

 

The function to start the Storyboard animation

 

 

The Storyboard Complete Event handler function

 

 

c) As every time we need to change the uri of background image of Panorama Page. So we will be using the following function given below to return a new uri every time.

 

 

d) Last thing we need to do is to call the trigger function in Constructor of the PanoramaPage.xaml.cs.

 


 

6. Now run the Application on emulator. And open the Panorama Page to see the effect of animation.

 

Before animation:


 

After animation:


 

7. I hope this post will be helpful to you. You can download the full source project file from the link given below.

 
Download Full Project PanoramaBackground
 

Falling Snow Animation in Windows Phone 8

In the Christmas and Holiday season most developers write Christmas apps. So in this article I will show you how to implement a simple falling snow animation effect which you can use in order to make your application look cooler. Here’s a demo,

Here’s how it can be done,

Step 1: Add a Canvas to your Page

Create a new Windows Phone 8 project and a canvas to it. Replace the existing ContentPanel Grid with this Canvas.

Step 2: Add function to Generate Snow

We will use ellipse elements in order to imitate snowflakes but you can use any another UIElement. In code behind we add a function GenerateEllipse to generate ellipses of small size. You way define a range for height and width to randomize the snowflakes’ size.

Step 3: Create a Story Board Animation for Canvas

The next step is to create the Storyboard animation which will animate Canvas.Left and Canvas.Top properties of the Canvas child elements to a particular double value. 

Step 4: Add Logic for Snowfall Animation

We use speed and radius variables in order to define the speed with which the snowflakes fall and how wide the radius of their oscillation will be. Also the opacity is set to something random, giving it a semitransparent look.  When the event occurs, it means that there is a frame of visuals available to render to the Silverlight content surface. Refer to this MSDN article to learn more about Rendering.

Step 5: Call Snowfall animation function on Initialization

And finally the last step is to call the StartFallingSnowAnimation method after InitializeComponent.

An amazing article by kirupa helped us write the tutorial to implement falling snow animation.

That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as reference. Merry Christmas!

Download Falling-Snow.zip

Facebook like Hamburger Menu on Windows Phone 8

The Hamburger menu bar is quite popular among developers. This tutorial shows how you can build if for your Windows Phone 8 app. There’s an awesome library that lets us do this easily. This library contains many controls inspired by the official Facebook app on Windows Phone.

https://slideview.codeplex.com/

We will be working with a Windows Phone 8.1 XAML app for this tutorial but it can be implemented in a WP 8 app also. Here’s how,

Step 1: Install SlideView library using Nuget

Install the SlideView library that provides a SlideView control inspired by the official Facebook app using Nuget package manager. If you need help installing the library refer to,

How to integrate a Toolkit or Third party SDK with windows phone app using NuGet Package Manager

Step 2: Set your app’s RootFrame to SlideApplicationFrame

If you want a SlideView already packaged with a main panel + 2 side panels, you can use the SlideApplicationFrame. The other benefit from it is the navigation occuring only on the main panel. In App.xaml add the following code for SlideApplicationFrame control.

Here’s the code you need to add to App.xaml.

Note: You can set the SlideView‘s header or choose to hide it.

Next at the top of your app’s App.xaml.cs declare a RootFrame variable.

Add a BuildFrame function that returns a RootFrame of SlideApplicationFrame type.

In the OnLaunched event handler add the code to set the new root frame.

The final OnLaunched event handler looks similar to this,

Tip: Download our project source code for see where exactly to put the code pieces in App.xaml.cs.

Step 3: Add User Controls for Left View and Right View

The hamburger menu has a left view and right view that appears when someone swipes left or right from the main panel. Create a new folder Pages and add two user controls to it. RightView.xaml and LeftView.xaml. Note that these two pages are set as the left content and the right content of the SlideApplicationFrame. Put some content in these user controls. Just design the left and right views as you wish and put the main content in MainPage.xaml.

We have put a Button which when clicked, navigates you to the Main Panel.

Note: You can choose to hide either the left view or the right view from SlideApplicationView‘s properties.

That’s it. Run the app in the emulator and it should work perfectly. Download the source code and use it as an reference.
Download Hamburger-menu.zip

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

How to create a Flipping card animation in Windows phone app

In this blog post I will show you how to create a flip card animation in Windows phone app.

Flipping card animation is one of the most widely used effect. This effect not only looks good, but also can be used as a nice transition animation between several elements in your page. And it is really easy to implement. You would have seen this effect in many poker games.

 

To add this animation in your app you need to follow the certain steps given below

 

1. Create a new project Flipcardanimation.

 


 

2. Now create two Rectangles on the MainPage having the name frontrectangle and backrectangle.

The frontrectangle will be visible to us and backwardrectangle will be behind the frontrectangle and its visibility should be set to collapse.

Now set the certain properties of both of them like the planeprojection property and rendertransform property which we will use during storyboard animation.

Add the Tap event handler to both of rectangle controls as shown in the code below.

    To distinguish between both of them during animation set the fill property of both the rectangles with different colors. In this project we have set the fill property of frontrectangle to orangered and backrectangle to yellow.   3. Now add the following code given below in the LayoutRoot Grid of the MainPage.xaml.  


 

These lines of code consists of Storyboard animation which we will apply on both rectangles.

FlipCardFront animation will be invoked when we tap on front rectangle and FlipCardBack will be invoked when we will tap on backward rectangle.

 

4. So we add the following code in Tap event handles of both the rectangles to invoke the animation as shown below.


 

 

5. Now debug the project and run it on the emulator and observe the output. You will see a flipping animation as you tap on both the rectangles.

You can observe the four states of the animation in the pictures shown below.

 

State 1: Initial State

Before we tap on the front rectangle

 


 

State 2: Transition State

After we tap on the front rectangle.

 


 

State 3: Transition State

As the front rectangle flips backward rectangle will be shown.

 


 

State 4: Front animation completes

Back rectangle will be shown to you.

 


 

Similarly if we tap on backward rectangle that is the yellow color one the animation will go through the following four states as shown above.

 

Important points

The common mistakes that you could make during the implementation of following animation are

 

1. If you are using controls other than rectangle then don’t forget to set the Rendertransoform and Planeprojection property of them. For example if you are using grid instead of rectangle then set the Grid.Projection and Grid.RenderTransform property of it accordingly as shown in the above code.

 


 

2. If you are using controls other than rectangle having different names then you need to change the Targetname property of Storyboard animation accordingly.

In the below picture if you are using grid instead of rectangle having the name frontgrid you need to change the Targetname property in both storyboard animations to frontgrid.



 

3. Always remember to set the visibility mode of backward control to collapse initially.

 


 

I hope this post will be helpful to you. You can download the full project source file from the link given below.

Download full project file Flipcardanimation.zip

How to detect Shake motion of Windows phone in your application

In this post I will explain you how to detect Shake movement of the phone in your Windows phone application.

You can imagine applications like magic 8 ball, where you need to shake the phone to get the perfect answer to a very hard question, implementation of a casino-like slot machine, where you need shake the phone to start rolling the dice, or many other similar implementations. The UX aspect is clear, simply shake or move your phone to trigger some functionality.

We will be basically using a Shake gesture library to achieve this task. To add this functionality in your application follow the certain steps given below.

 

1. Create a new project having the name Shakemotion.

 


 

2. Download the following zip file given below. Unzip the file and add the following reference ShakeGestures.dll to the given project.

 
ShakeGestures,zip
 


 


 

If you face any problems while adding the reference file you can refer to the following blog post link given below.

http://www.windowsapptutorials.com/windows-phone/how-to-integrate-a-toolkit-or-third-party-sdk-with-windows-phone-app-using-nuget-package-manager-2/

 

3. Now add the following namespace given below to MainPage.xaml.cs.

 

 

4. Add the following code given below to the constructor of the MainPage.xaml.cs to register a new shake event in the application and activating it.

 

 

The code for ShakeEventGesture event handler is given below which will be fired whenever user shakes the phone 3 or more times.

 

 

As the following event handler is called the text of displayblock given on the MainPage will change to current system time. This will be repeated every time the user shakes his phone 3 or more times.

 


 

Note: For better understanding this event should be tested on a real device not on emulator.

 


 

5. I hope this post will be helpful to you. You can download the full project source file from the link given below.

 
Download full project file Shakemotion.zip
 

Add Tilt Effect to any control in windows phone app

In this post I will explain you how to apply tilt effect on any Windows Phone control like Grid, StackPannel, Rectangle, Image etc. or any other third party control like Telerik control.

Before starting further you all should know What Tilt effect is.

 

What is Tilt Effect?

The tilt effect for Windows Phone controls provides you with the ability to add additional visual feedback for control interaction. Instead of having standard pressed or un-pressed states, controls with the tilt effect provide motion during manipulation. The result is a “tilt”-like response when the control is touched.

 

By default in windows phone app you can apply tilt effect only to a button control using Windows Phone toolkit.

But I have found an easier way of adding tilt effect to any control including the button control.

 

How to apply Tilt Effect?

 

You need to follow the certain steps given below.

1. Create a new Blank Project Tilteffect.

 


 

2. Add the following two classes given below to your project TiltEffect.

 
MetroInMotion.cs

LinqToVisualTree.cs
 


 


 

3. After adding the given classes to your project. Add the following namespace to the MainPage.xaml.

xmlns:local=”clr-namespace:MetroInMotionUtils”

 


 

4. Now just add the control on which you want to apply tile effect. Suppose I want to add the tile effect on an Image control and Rectangle. Add the controls to the MainPage.xaml.

 

5. After adding the controls to the MainPage.xaml. Add the following Property to both the controls.

local:MetroInMotion.Tilt=”6″

The value of Tilt is in range from 1 to 10(low to high) more the value of this property high will be the suppressing effect.

You should usually set it in the range from 4-6.

 


 

6. Now run the application and click on the following controls to observe the effect. You will get an additional visual feedback from the control.

 


 

7. You can follow the same procedure to apply Tilt effect on any control in Windows phone app.

 

8. I hope this post will be helpful to you. You can download the full Project source file from the link given below.

 
Download Full Project file Tilteffect.zip