Show Progress Dialog While Loading Data

When you're designing your application you need to consider how you handle data loading in order to ensure the application always remains responsive to the user. Generally this is done by carrying out any data loading on a background thread, allowing the user to continue to interact with the application while the data is being loaded. However, this often leads the user to query whether anything is happening; which leads to the use of a progress bar to indicate that some activity is being executed in the background. Once the data has been loaded the progress bar should be hidden and the relevant controls to display the data should be shown. Let's walk through with a simple example, starting with a basic user interface that contains a ComponentOne DataGrid for Silverlight and ComponentOne Window for Silverlight control containing a ProgressBar.

With this blog we will implement:-

• Until the initial screen with C1DataGrid gets displayed, C1Window is displayed
• C1Window display a progress bar representing the progress status
• Progress bar in C1Window shows progress as percentage display
• C1Window containing progress bar gets automatically closed as soon as data is loaded completely

        private void UserControl_Loaded(object sender, RoutedEventArgs e)  
        {  
            var w = new C1Window();  
            w.Header = "ComponentOne DataGrid Loading in Background...";  
            StackPanel MyStackPanel = new StackPanel();  
            TextBlock MyPercentProgress = new TextBlock();  
            ProgressBar pb = new ProgressBar();  
            pb.Width = 200;  
            pb.Height = 40;  
            pb.Maximum = 100;  
            pb.Minimum = 0;  
            MyStackPanel.Children.Add(MyPercentProgress);  
            MyStackPanel.Children.Add(pb);  
            w.Content = MyStackPanel;  
            w.Width = 400;  
            w.Height = 120;  
            w.CenterOnScreen();  
            w.ShowModal();  

            Thread t1 = new Thread(new ThreadStart(() =>  
            {  
                ObservableCollection<Item> items = new ObservableCollection<Item>();  
                for (int i = 1; i <= 100; i++)  
                {  
                    items.Add(new Item(i.ToString()));  
                    int counter = i;  
                    this.Dispatcher.BeginInvoke(new Action(() =>  
                    {  
                        string myString = counter.ToString();  
                        MyPercentProgress.Text = myString + "% Data Loaded";  
                        pb.Value = counter;  
                        if (counter == 100)  
                        {  
                            w.Close();  
                            c1DataGrid1.ItemsSource = items;  
                        }  
                    }));  
                    Thread.Sleep(50);  
                }  
            }));  
            t1.Start();  
        }  

See it in Action!

A complete sample which showcase this implementation can be downloaded from the link below:- DownloadSample_CS DownloadSample_VB