Windows Mobile themes Blog | How to create an animated Splash Screen in Windows Phone 7

Login form

Login:

Password:

remember

Lost password | Registration

Main » How to create an animated Splash Screen in Windows Phone 7

9:20 PM

How to create an animated Splash Screen in Windows Phone 7

In this article I want to consider how to create an animated Splash Screen for WP7, ie the splash screen when the application starts.

When creating a new project in Visual Studio application provides standard Splash Screen:

Of course, you can leave the default image, but if instead you want to use another image, simply replace the file SplashScreenImage.jpg on your image.

We now create an animated Splash Screen.

So, get started.

1. Create a new Windows Phone Application project and name it AnimatedSplashScreen.

2. Replace the file SplashScreenImage.jpg to the following:

3. Change the code page MainPage.xaml.cs so that it looks like this:

Code

using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.ComponentModel;
using System.Windows.Controls.Primitives;
using System.Threading;

namespace AnimatedSplashScreen
{
  public partial class MainPage : PhoneApplicationPage
  {
  BackgroundWorker backroungWorker;
  Popup ballPopup;
  // Constructor
  public MainPage()
  {
  InitializeComponent();
  CreatePopup();
  backroungWorker = new BackgroundWorker();
  RunBackgroundWorker();
  }

  private void CreatePopup()
  {
  ballPopup = new Popup();
  ballPopup.IsOpen = true;
  ballPopup.Child = new AnimatedSplashScreen();
  }

  private void RunBackgroundWorker()
  {
  backroungWorker.DoWork += ((s, args) =>
  {
  Thread.Sleep(7000);
  //your loading code here
  });

  backroungWorker.RunWorkerCompleted += ((s, args) =>
  {
  this.Dispatcher.BeginInvoke(() =>
  {
  this.ballPopup.IsOpen = false;
  }
  );
  });

  backroungWorker.RunWorkerAsync();
  }

  }
}

In this code we create a new object is Popup, which will be displayed on top of the page MainPage. BallPopup object will display the user control AnimatedSplashScreen, we will create later. We use the BackgroundWorker object to start the download method resources in another thread. In our case, we nothing does not load and causes the thread to sleep about 7 seconds. In a real application should perform load application resources. When using BackgroundWorker user interface remains active and we can display the animation. After seven seconds thread ends and the page MainPage becomes visible. We use property isOpen an object ballPopup to hide it.

4. Add a new User Control to your project and name it AnimatedSplashScreen.xaml. It will serve us to display the animation bouncing ball.

5. Change the code AnimatedSplashScreen.xaml as follows:

Code

In this code, we set the background user control to display an image that was added in the second step, and created an animation to create the effect of bouncing ball. This change of position the ball animation I created in Expression Blend. Note that in animation as well RepeatBehavior Forever. This has the effect of infinitely bouncing ball.

6. Add the ball image:

Name it ball.png for correct work previously added code.

7. Change the code AnimatedSplashScreen.xaml.cs so that when an object created earlier AnimatedSplashScreen run the animation:

Code

public partial class AnimatedSplashScreen : UserControl
  {
  public AnimatedSplashScreen()
  {
  InitializeComponent();
  AnimateBall.Begin();
  }
  }

Run the application and you will see an animated screen saver, which will last 7 seconds:

That's it. For a couple of minutes, we created an animated Splash Screen for WP7 application.

If you are a student you will need to visit this site Essay Topics

Views: 283 | Added by: freethemes | Tags: WP7, Splash Screen | Rating: 0.0/0

How to change the image at startup (Splash Screen) on WP7?

Total comments: 1

1 Bucky (2011-12-28 9:25 AM)

Hahahaha. I'm not too brhgit today. Great post!

Only registered users can add comments.
[ Registration | Login ]

News calendar

Site friends