New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Showing an application loading screen

From: Silverlight 5 Essential Training

Video: Showing an application loading screen

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.

Showing an application loading screen

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.

Line 65 has a parameter for the Silverlight plug-in called onSourceDownloadProgressChanged. This allows me to register a JavaScript function that gets called during the download progress. Here's my function. You'll notice that inside the function I'm finding three items on my XAML file. I'm calling sender.findName to find my progressTextBlock. Once I find that, then I add a string to it, then I go to the eventArg and I get the progress value and do some multiplication.

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.

Show transcript

This video is part of

Image for Silverlight 5 Essential Training
Silverlight 5 Essential Training

106 video lessons · 5315 viewers

Walt Ritscher
Author

 
Expand all | Collapse all
  1. 1m 41s
    1. Welcome
      53s
    2. Using the exercise files
      48s
  2. 35m 0s
    1. Overview of Silverlight
      3m 29s
    2. Setting up a developer computer
      2m 46s
    3. Installing the Silverlight Toolkit
      2m 21s
    4. Exploring the toolkit samples
      2m 35s
    5. Using Visual Studio 2010 to create a Silverlight project
      5m 10s
    6. Using Expression Blend to create a Silverlight project
      3m 13s
    7. Getting to know the Visual Studio interface
      8m 15s
    8. Working in the Expression Blend interface
      7m 11s
  3. 29m 46s
    1. Understanding the Visual Studio project structure
      3m 38s
    2. Creating a Silverlight page
      3m 17s
    3. Compiling your first application
      5m 0s
    4. Using other assemblies in an application
      5m 45s
    5. Deploying a Silverlight application
      3m 43s
    6. Understanding the startup process for an application
      3m 13s
    7. Understanding how users get Silverlight on their computers
      5m 10s
  4. 16m 59s
    1. Exploring the relationship between XAML and .NET
      3m 57s
    2. Using C#
      7m 16s
    3. Exploring the code-behind file
      5m 46s
  5. 43m 22s
    1. Working with XAML elements and Property attributes
      4m 56s
    2. Investigating XAML namespaces
      7m 31s
    3. Converting XAML properties with TypeConverters
      5m 1s
    4. Working with Property elements
      4m 24s
    5. Assigning runtime data with XAML markup extensions
      4m 21s
    6. Digging into the dependency property system
      6m 12s
    7. Creating a custom dependency property
      4m 42s
    8. Understanding attached properties
      6m 15s
  6. 9m 35s
    1. Debugging your code
      5m 17s
    2. Special Silverlight debugging techniques
      4m 18s
  7. 36m 0s
    1. Understanding layout
      4m 55s
    2. Using DockPanel and WrapPanel
      4m 2s
    3. Exploring sophisticated layouts with the Grid
      6m 40s
    4. Absolute positioning with the Canvas panel
      5m 20s
    5. Scrolling content with the ScrollViewer
      3m 28s
    6. Adjusting content alignment, margins, and sizing
      5m 6s
    7. Using the TabControl
      2m 17s
    8. Manipulating elements with transforms
      4m 12s
  8. 20m 32s
    1. Painting the user interface (UI) with SolidColorBrush
      6m 7s
    2. Getting colorful with gradient brushes
      3m 15s
    3. Decorating elements with ImageBrush
      4m 56s
    4. Creating effects with VideoBrush
      6m 14s
  9. 25m 42s
    1. Understanding routed events
      3m 12s
    2. Wiring up event handlers in Silverlight
      6m 4s
    3. Understanding event bubbling
      4m 39s
    4. Exploring mouse events
      7m 43s
    5. Exploring keyboard events
      4m 4s
  10. 32m 31s
    1. Displaying text on the screen
      3m 24s
    2. Gathering text input from the user
      5m 30s
    3. Showing complex text with RichTextBox
      6m 7s
    4. Understanding text overflow and text linking
      3m 14s
    5. Searching content with the AutoComplete type-ahead control
      6m 45s
    6. Using and embedding Silverlight fonts
      7m 31s
  11. 26m 47s
    1. Understanding content controls
      5m 7s
    2. Understanding button controls
      6m 16s
    3. Using the BusyIndicator
      4m 40s
    4. Showing tooltips
      4m 34s
    5. Changing content size with ViewBox
      1m 39s
    6. Exploring more controls
      4m 31s
  12. 55m 36s
    1. Connecting elements with binding
      9m 54s
    2. Using business data in a binding
      9m 21s
    3. Listing data with ItemsControls
      6m 39s
    4. Digging into the DataGrid
      8m 28s
    5. Using the DataForm
      3m 49s
    6. Storing data on the client
      7m 10s
    7. Debugging XAML bindings
      5m 41s
    8. Charting data
      4m 34s
  13. 24m 36s
    1. Creating an Out-of-Browser (OOB) application
      6m 16s
    2. Controlling aspects of an OOB application
      2m 49s
    3. Alerting the user with notification windows
      7m 13s
    4. Hosting HTML content in Silverlight applications
      8m 18s
  14. 30m 2s
    1. Exploring Silverlight trust levels
      3m 51s
    2. Creating an elevated trust application
      5m 57s
    3. Reaping the benefits of XAP signing
      6m 5s
    4. Making cross-domain calls
      5m 1s
    5. Getting started with COM Interop using the Speech API
      4m 21s
    6. Using COM Interop to interact with Microsoft Office
      4m 47s
  15. 16m 33s
    1. Showing child windows
      3m 48s
    2. Using a child window as a dialog window
      5m 7s
    3. Creating native windows
      2m 53s
    4. Maximizing a window with full screen mode
      4m 45s
  16. 13m 20s
    1. Dynamically loading UI content with user controls
      4m 46s
    2. Using the Navigation Framework
      8m 34s
  17. 9m 28s
    1. Using resource files
      3m 53s
    2. Using images in an application
      5m 35s
  18. 16m 32s
    1. Playing audio
      4m 27s
    2. Playing sound effects
      5m 4s
    3. Viewing video content with MediaElement
      4m 58s
    4. Changing video playback speed with TrickPlay
      2m 3s
  19. 14m 40s
    1. Capturing video with a web camera
      4m 16s
    2. Working with a microphone
      3m 47s
    3. Creating print output
      6m 37s
  20. 22m 35s
    1. Understanding Silverlight animations
      4m 35s
    2. Creating animations
      7m 52s
    3. Controlling animations
      4m 18s
    4. Simulating physics with animation easings
      5m 50s
  21. 27m 47s
    1. Placing XAML resources within a FrameworkElement
      6m 47s
    2. Centralizing settings in styles
      4m 8s
    3. Creating an alternate control UI with ControlTemplates
      6m 29s
    4. Dressing up your data with DataTemplates
      4m 33s
    5. Explaining the VisualStateManager: a simple way to manage control states
      5m 50s
  22. 10m 55s
    1. Handling global errors in a Silverlight application
      5m 46s
    2. Showing an application loading screen
      5m 9s
  23. 10m 48s
    1. Integrating with XNA
      7m 40s
    2. Exploring data analysis with PivotViewer
      3m 8s
  24. 1m 6s
    1. Goodbye
      1m 6s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.