Loading data into your Silverlight Line of Business application can take a second or two. Sometimes it is necessary to pacify the user with a ‘Waiting’ or ‘Loading’ screen reminiscent of the AJAX Loading panels from days past in ASP.NET.
I Googled for some solutions and found some really bad code and over engineered solutions. I like simplicity so here it is in a nutshell:
- Add a child window to your project.
- Remove the ‘Chrome’ from the child window template so there is no ‘Titlebar’ on the child window.
- Add a Textblock and a ProgressBar Control to the child window (resize the window also, 180 x 80 is what I use).
- Set the ProgressBar Control’s IsIndeterminate property to True.
That is basically your ‘Waiting window’. The ProgressBar self animates so you don’t need to deal with that. You can go so far as to add a property to the code behind that will allow you to set the loading message dynamically.
Open the child window when you want to display the message and close it when you are done. I have an event that fires in my ViewModel class that tells me when my data is loaded. So before I have the View ask for the data from the ViewModel I show the waiting window. Then the ViewModel fires a ‘DataLoaded’ event which the View subscribes to. The View then closes the waiting window. *NOTE* XAML Binding purists will hate this. So if you are one go ahead and create some data bindings in your View’s XAML and accomplish the Open and Close of the waiting window on your own.
My code behind becomes this:
1: public partial class QuoteView : Page
2: {
3: ViewModel.QuoteEditViewModel viewModel = new ViewModel.QuoteEditViewModel();
4: View.Popup.WaitingView waiting = new Popup.WaitingView();
5:
6: public QuoteView()
7: {
8: waiting.Message = "Loading quote...";
9: waiting.Show();
10:
11: viewModel.QuoteLoaded += new EventHandler(viewModel_QuoteLoaded);
12: viewModel.LoadQuote(ViewModel.State.CurrentQuote.QuoteID);
13: this.DataContext = viewModel;
14:
15: InitializeComponent();
16: }
17:
18: void viewModel_QuoteLoaded(object sender, EventArgs e)
19: {
20: waiting.Close();
21: }
22:
23: // Executes when the user navigates to this page.
24: protected override void OnNavigatedTo(NavigationEventArgs e)
25: {
26: }
27:
28: }
There is ZERO code in the Waiting Child Window.
Line 3 creates an instance of my ViewModel. That class is responsible for retrieving the data for the form and setting the data properties on itself with the data it retrieves. After it retrieves the data it fires an event called QuoteLoaded.
Line 4 creates an instance of the Waiting child window.
Line 8 sets my message above the progressbar control.
Line 9 shows the waiting window.
Line 20 closes the waiting window when the data is all loaded.
Easy-peasy!
7e07d6b6-edcb-4d98-82dd-3d78550d8dec|3|4.0