Infragistics WPF controls

How to keep your WPF UI responsive and report progress during a long running task. C# and asynchronous multithreading.

WPF Succinctly Download

 

 

The problem

Have you ever had to execute a bit of code that took an extremely long time to complete?  If so, I'm sure you've noticed that your user interface becomes unresponsive.  You can't use any controls on the form until the process completes.  This is extremely problematic and makes for a poor user experience.

The cause

This problem is because you have executed a synchronous block of code on the same thread as the user interface.  The user interface will not be able to respond to any user action until the synchronous method has completed.

Let's look at an example that illustrates the execution of a synchronous method executing on the user interface thread.

The example

 

This example is very simple.  It's a WPF application with two buttons.  

One of the buttons will start a long running for loop and the other button opens a MessageBox and

displays a message to let you know that the UI is active.

When you click the button to start the long running process, try to click the other button.  

You will notice that you are unable to click the button to show the message box.

 

Here's the MainWindow.xaml markup

<Window x:Class="SynchronousExecution.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid Width="111" Height="118">
        <Button Content="Start Process" Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" Name="btnStartProcess" VerticalAlignment="Top" Width="89" Click="btnStartProcess_Click" />
        <Button Content="Try to click me" Height="23" HorizontalAlignment="Left" Margin="10,43,0,0" Name="btnTryMe" VerticalAlignment="Top" Width="89" Click="btnTryMe_Click" />
    </Grid>
</Window>

 

And here is the code behind MainWindow.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Threading;

namespace SynchronousExecution
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void btnStartProcess_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Starting the long process.  Try to click the button below.");
            for (var loopCounter = 0; loopCounter < 500; loopCounter++)
            {
                Thread.Sleep(100);
            }
            MessageBox.Show("The process has ended.");
        }

        private void btnTryMe_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("User interface is responding!");
        }
    }
}

Download  SynchronousExecution.zip (52.38 kb)

The solution

The solution to this problem is to spawn a new thread to execute the long running task.  By placing the execution on a seperate thread, this leaves the main UI thread free to interact with the user's input.

Reporting progress 

If you execute a long running task, you usually want to let your users know about the progress of the task.  A control to assist with this is the progressbar control.  

The WPF progress bar control inherits from the RangeBase class.  The control contains the following properties to control how the progress is displayed to the user.

Minimum The minimum value of the Value property.
Maximum The maximum value of the Value property.
SmallChange The value in which the Value property is incremented.
Value The current value position between the Minimum and Maximum property.

Multithreading concerns

Multithreading is a complex topic and is beyond the scope of this article.  However, there are a few concerns that you must be aware of if you plan to access values on the UI thread from the worker thread.

The System.Windows.Threading.Dispatcher object is used to execute code on the UI thread from the executing worker thread.  The Dispatcher object has the BeginInvoke method which will execute an asynchronous delegate on the thread in which the dispatcher object was created.  So by using the dispatcher object from the user interface code you are able to access the user interface controls from your worker thread.

We'll take a look at another example that will bring all of these concepts together to illustrate executing a long running task on a seperate thread with a progress bar that updates the user interface via the Dispatcher object.

The example

The example is a WPF application.  The main window contains the following controls;

lstRandomValues A ListBox control that will hold random values that are generated during the long running process. The pupose of this control is to illustrate the responsiveness of the user interface during the long running process.
prgProgress A ProgressBar control that will illustrate the progress of the long running task. The ProgressBar is hidden by default. It's shown when the long running process begins and is hidden again when the process has ended or is canceled.
txtProgress A TextBox control that displays the long running process percentage of completion.
btnCancel A Button control that will cancel the long running process and in turn hide the progress bar and progress textbox.
btnInteract A Button control that will launch a MessageBox to illustrate the responsiveness of the UI while the long running process is executing.
btnBegin A Button control that will begin the long running process.

And here is the code 

Window1.xaml

<Window x:Class="RandomNameSpace.ViewModels.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="400" Width="400">    
        <!-- Parent Grid -->
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <ListBox Grid.Row="0" Grid.Column="0" Name="lstRandomValues" Grid.ColumnSpan="2" />
        
            <Grid Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                </Grid.ColumnDefinitions>
                
                <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" x:Name="bdrProgress" Visibility="Hidden" Background="Azure" CornerRadius="10" BorderBrush="DarkGray" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <StackPanel>
                        <Grid Margin="5">
                            <ProgressBar x:Name="prgProgress" Width="200" Height="20" Minimum="0" Maximum="1" />
                            <TextBlock x:Name="txtProgress" HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Grid>
                        <Button x:Name="btnCancel" Content="Cancel" HorizontalAlignment="Right" Margin="3" Click="btnCancel_Click" />
                    </StackPanel>
                </Border>
                
                <Button Grid.Row="1" Grid.Column="1" x:Name="btnInteract" HorizontalAlignment="Center"  Content="Interact with UI" Click="btnInteract_Click" Height="23.96" />
                <Button Grid.Row="1" Grid.Column="0" x:Name="btnBegin" HorizontalAlignment="Left"  Content="Start Long Process" Click="btnBegin_Click"  Height="23.96" Margin="35,33.27,0,33.27" />
            </Grid>
        </Grid>
</Window>

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Threading;
using System.Windows.Threading;


namespace RandomNameSpace.ViewModels
{
	/// <summary>
	/// Interaction logic for Window1.xaml
	/// </summary>
	public partial class Window1 : Window 
	{
        private bool IsCanceled = false;

        private RandomViewModel _viewModel;

        public RandomViewModel ViewModel
        {
            get { return _viewModel; }
            set { _viewModel = value; }
        }

		public Window1()
		{
			InitializeComponent();
            PrepareViewModel();
		}

        private void PrepareViewModel()
        {
            ViewModel = new RandomViewModel();

            this.lstRandomValues.DisplayMemberPath = "Value";
            this.lstRandomValues.DataContext = ViewModel;
            this.lstRandomValues.ItemsSource = ViewModel;
        }

		private void btnBegin_Click(object sender, RoutedEventArgs e)
		{
            BeginProcess();
		}

		private void btnInteract_Click(object sender, RoutedEventArgs e)
		{
            MessageBox.Show("Interaction!");
		}

		private void btnCancel_Click(object sender, RoutedEventArgs e)
		{
            CancelProcess();
		}

        public void BeginProcess()
        {
            bdrProgress.Visibility = System.Windows.Visibility.Visible;
            DisableBeginButton();
            Action StartLoop;
            StartLoop = () => DoLongRunningProcess();

            Thread t;

            t = new Thread(StartLoop.Invoke);
            t.Start();
        }

        public void CancelProcess()
        {
            this.IsCanceled = true;
            Thread.Sleep(1500);
            ClearListBox();
            EnableBeginButton();
        }

        private void ClearListBox()
        {
            Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.ViewModel.Clear(); }, null);
        }

        private void DoLongRunningProcess()
        {
            for (var loopCounter = 0.0; loopCounter < 1.0; loopCounter = loopCounter + .1)
            {
                if (!IsCanceled)
                {
                    //add a random number to the viewmodel collection to be bound to the listview
                    Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.ViewModel.AddValue(1564); }, null);

                    UpdateProgressBar(loopCounter);
                    Thread.Sleep(2000);
                }
                else
                {
                    break;
                }
            }

            IsCanceled = false;

            ClearListBox();

            MessageBox.Show("Completed");

            EnableBeginButton();
            HideProgressBar();

        }

        private void EnableBeginButton()
        {
            Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.btnBegin.SetValue(Button.IsEnabledProperty, true); }, null);
        }

        private void DisableBeginButton()
        {
            Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.btnBegin.SetValue(Button.IsEnabledProperty, false); }, null);
        }

        private void UpdateProgressBar(double value)
        {
            Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.prgProgress.SetValue(ProgressBar.ValueProperty, value); }, null);
            Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.txtProgress.SetValue(TextBlock.TextProperty, (value * 100).ToString()); }, null);
        }

        private void HideProgressBar()
        {
            Dispatcher.BeginInvoke(DispatcherPriority.Background, (SendOrPostCallback)delegate { this.bdrProgress.SetValue(Border.VisibilityProperty, Visibility.Collapsed); }, null);
        }
	}
}

 

RandomValue.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;

namespace RandomNameSpace.ViewModels
{
    public class RandomValue : INotifyPropertyChanged
    {
        private int _value;

        public int Value
        {
            get
            {
                return _value;
            }
            set
            {
                if (_value != value)
                    _value = value;

                OnPropertyChanged("Value");
            }
        }


        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

RandomViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Threading;

namespace RandomNameSpace.ViewModels
{
    public class RandomViewModel : ObservableCollection<RandomValue>
    {
        public RandomViewModel() : base() {}

        public void AddValue(int value)
        {
            Random rnd = new Random();
            var calculatedValue = (value * rnd.Next(3000));

            this.Add(new RandomValue { Value = (calculatedValue) });
        }
    }
}

Here is the entire solution for download. 

WPFAsyncProgressBarMVVM.zip (77.39 kb)  

This concludes the article.  Thank you for taking the time to read it!

Until next time...

~/Buddy James

kick it on DotNetKicks.com

 

 



Pingbacks and trackbacks (1)+

Add comment

  Country flag


  • Comment
  • Preview
Loading

About the author

My name is Buddy James.  I'm a Microsoft Certified Solutions Developer from the Nashville, TN area.  I'm a Software Engineer, an author, a blogger (http://www.refactorthis.net), a mentor, a thought leader, a technologist, a data scientist, and a husband.  I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data.  When I'm not coding,  I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).  

Related links

Month List

refactorthis.net | All posts tagged 'WPF'
Infragistics WPF controls

WPF Succinctly source code for download

I've scrambled to recover the example source for WPF Succinctly from Syncfusion from a dying hard drive, but I've located most of the source code for your reference.  Simply click on the banner below to download.  Please let me know if there are any problems found.  Thanks for reading.        


WPF Succinctly: my first ebook published by Syncfusion

      It's with great pleasure that I let you know about my ebook, WPF Succinctly, published by the great team over at Syncfusion.  This book is a part of their succinctly series which offers a wide variety of free ebooks on the hottest software development topics.  I'm proud of the book and especially of the final product.  I tried to start with the basics (controls, xaml basics) and then work my way up to more advanced topics like MVVM and Commands.  The book is full of examples for you to follow along. I'm currently working on a following up to WPF succinctly called "Orubase Succinctly" which is a book on Syncfusion's mobile hybrid platform.  You can learn more about the product on the official Orubase page. Don't forget to check out the other FREE books in the succinctly series here.  Also, I'd like to recommend that you check out the trial versions of the Syncfusion's essential studio suite of controls.  The suite includes top notch controls for ASP.NET, ASP.NET MVC, WPF, Silverlight, Windows phone, WinRT, WinForms and more.   I would love any feedback regarding the book.  And please be on the lookout for Orubase succinctly which I should be wrapping up soon. Until next time, Buddy James  


Prism 4.1 release for .NET 4.5 and Windows 8

This is a short post but I'm happy to let you know that the Microsoft patterns and practices team are currently testing a new release of Prism, the composite user interface framework.  There are plans for the new release to support Windows 8 WinRT applications as well as .NET applications. I'm happy regarding this release because I was worried that this project may have been abandoned like Silverlight.   Read about it here.   Thanks   kick it on DotNetKicks.com


Dependency Injection with the Microsoft Unity Container: Injecting multiple ICommand implementations

Injecting multiple ICommand implementations with the Microsoft Unity container Hello, and welcome to my second article on Dependency Injection and IoC with the Microsoft Unity Framework.  In my last post Dependency Injection and Inversion of Control with the Microsoft Unity Container I discussed the importance of coding to an interface and not a concrete implementation.  I also introduced the idea of dependencies, and dependency injection using Unity. As I've been working a lot lately in XAML using the MVVM (Model-View-ViewModel) Pattern, I find myself implementing a lot of ICommand classes.  The ICommand interface is very simple, with a method for execution, a method to check if the command can execute, and an event handler to specify the state of the command execution.  The interface is very useful because of the way that XAML can bind to these commands to perform actions on button click's and other user interface actions.   Dependency Injection with multiple ICommand implementations So I had a lot of implementations of the ICommand interface that were used to call on the service layer of my application to complete application tasks. My past experience up until this point never required for me to register one type with multiple interfaces.  Luckily, I found it that Unity has a nice way to handle this issue. So when I setup my container, I register the commands like this _container.RegisterType<ICommand, LoadQuizesCommand>("LoadQuizes"); _container.RegisterType<ICommand, CreateQuizCommand>("CreateQuiz"); _container.RegisterType<IQuizService, QuizService>(); _container.RegisterType<IMainQuizMenuViewModel, MainQuizMenuViewModel>(); Then here is the ViewModel where the dependencies are injected in the constructor. using Domain.QuizIt; using Microsoft.Practices.Unity; using QuizIt.ViewModels.Interfaces; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows.Input; using Service.QuizIt.Interfaces; namespace QuizIt.ViewModels { /// <summary> /// This represents the ViewModel that is bound to the Main Quiz user interface. /// </summary> public class MainQuizMenuViewModel : IMainQuizMenuViewModel { #region "public properties" public ICommand LoadQuizesCommand { get; set; } public ICommand CreateQuizCommand { get; set; } public IQuizService QuizServiceManager { get; set; } public List<Quiz> Quizes { get; set; } public string QuizName { get; set; } public string QuizDescription { get; set; } #endregion #region "constructors" public MainQuizMenuViewModel([Dependency("LoadQuizes")]ICommand loadQuizesCommand, [Dependency("CreateQuiz")]ICommand createQuizCommand, [Dependency]IQuizService quizServiceManager) { this.LoadQuizesCommand = loadQuizesCommand; this.CreateQuizCommand = createQuizCommand; this.QuizServiceManager = quizServiceManager; } #endregion } } Notice how I specify the same names in the Dependency attributes in the constructors as I did when registering the types.  This way I can specify the command by name and resolve different implementations for multiple ICommand interfaces. I hope you enjoyed reading this post.  Please feel free to comment if you have any tricks of your own with injecting multiple interfaces.   kick it on DotNetKicks.com


About the author

My name is Buddy James.  I'm a Microsoft Certified Solutions Developer from the Nashville, TN area.  I'm a Software Engineer, an author, a blogger (http://www.refactorthis.net), a mentor, a thought leader, a technologist, a data scientist, and a husband.  I enjoy working with design patterns, data mining, c#, WPF, Silverlight, WinRT, XAML, ASP.NET, python, CouchDB, RavenDB, Hadoop, Android(MonoDroid), iOS (MonoTouch), and Machine Learning. I love technology and I love to develop software, collect data, analyze the data, and learn from the data.  When I'm not coding,  I'm determined to make a difference in the world by using data and machine learning techniques. (follow me at @budbjames).  

Related links

Month List