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