Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When your application is first loaded onto the client's computer, they will see the Silverlight Loader screen. If you have crafted the Silverlight application that has a small payload, it will be a quick download and the loader screen will hardly be noticeable. If on the other hand you have a large XAP file, your users will have to wait. Silverlight automatically shows a progress screen if your application takes more than 500 milliseconds to download. If you don't want to show the default loader, you can build your own loader screen. For this demonstration I will use Visual Studio in a solution called Loading Screen.
This solution has two projects. My Silverlight side is called Loading Screen, and it has a companion ASP.NET website. When testing loaders it is helpful to have a real web site instead of using the autogenerated HTML page in the Silverlight application. Here is the main UI from my application. This is the first screen that the users will see. Now I'm going to run the application to show you what it looks like by default. Press F5. There's hardly any wait and then the UI shows up. To simulate seeing the loader screen, there are two mechanisms we can use.
For the first demo, I'll go to App.xaml.cs and I'll comment out this line, where I'm loading my main page into the root visual. Since there'll be no main UI, we'll stop at the loader screen. We'll comment this out and then run the application again, and there is the standard Silverlight blue spinning wheel. Another way of simulating this is to have a large file and actually download the large file to the user computer. So let me uncomment this line of code again, and let me talk about bigvideo.avi.
This is a file on my computer. It is not one that is included in the exercise files. You need to find a large file on your computer to substitute. I've added this large file. I'll select it and then choose a Build Action of Content. That will add it to the XAP file. Now I will compile my application and test the application again. Press F5. I see the loader screen and then my main UI. Next, I'd like to show you how to customize the loader. If you're going to create a custom loader, it's important that your loader goes in the web site, not in your Silverlight application. That's because the loader is shown why your main XAP file is downloading.
What I typically do is create a stand-alone XAML file in the web site. Here is the TestPage inside the web application. Inside my ASP.NET application I have this test page, LoadingScreenTestPage.aspx. Let's go look at the code that's inside here. This is the Silverlight plug-in. One of the properties that can set on the plug-in is the name of an alternate loader screen.
What I'm doing here is saying splashScreenSource is equal to LoadingBlue.xaml. LoadingBlue.xaml is a stand-alone XAML file in my application. Now when I run the application, I see the loader screen, my custom loader screen, and then the main UI. To make this look nicer, I can add progress reports to the UI. What I'm going to do next is not use this LoadingBlue.xaml, but use this one here, LoadingWithProgress.
Let's talk about the XAML in this file format. Here I'm using a custom PNG file for background. I'm also using an image of my bikeRider PNG file. And then this image has a TranslateTransform called riderTransform. I use this to move the rider left and right on the screen. I also have a TextBlock called progressTextBlock. These are inside my XAML file. Now let's go back and look at the ASPX page again.
I also find a grid on my XAML file and get its ActualWidth, and then I go find that transform I showed you and I change its X coordinate value to move the item across the screen. Let's see what this looks like. I need to make one more change. I need to change this so it no longer says LoadingBlue but instead says LoadingWithProgress. Let's see what this looks like. Did you see that? I'll press F5 to re-run it.
The text box at the top is showing the progress and then the translate transform of the rider is moving her across the screen. What you've seen is that you can take control of the download process and show your own UI instead of the default spinning blue wheel.
Get unlimited access to all courses for just $25/month.Become a member