Infragistics JQuery 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

biuquote
  • 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 | Complete coverage of your source code with NDepend part 1
Infragistics JQuery controls

Complete coverage of your source code with NDepend part 1

What is NDepend?

This article is part one of a two part series about one of the most practical and dynamic tools in existence for .NET development.  I’m talking about NDepend http://www.NDepend.com.  I was approached about writing a review for NDepend so I downloaded the application to give it a try.  As with all of my reviews, let it be known that if I think a product is mediocre, then that’s what I’m going to write.  All that to say that this is no exaggeration, I really feel this strongly about this tool.  I’m sure by the end of this article, I will have peeked your interest too.  If you are interested, please read on.

NDepend pro product suite

From NDepend.com, “NDepend is a Visual Studio tool to manage complex .NET code and achieve high Code Quality.”  This tool allows you to visualize your source code in many different ways in an effort to analyze the quality of your code and how to improve it.  The product comes complete with a Visual Studio add in, an independent GUI tool, and a set of power tools that are console based which makes the product suite extremely versatile.  Whether you are pressed for time and need to analyze your code while in visual studio, you prefer a standalone GUI, or you are addicted to the command line, this product is made to fit your needs.

Installation

The NDpend installation process is very straight forward.  The download is a zip file that contains the complete product suite.  You simply pick a folder to install to and unzip the archive.  If you’ve purchased the pro version, you will be provided with a license in the form of an XML file which needs to be placed in the directory that you chose to install the product.

Installing the Visual Studio 2012 add-in

Once you’ve unzipped the archive, you need to run the NDepend.Install.VisualStudioAddin.exe executable to install the Visual Studio add-in.

Running the install

The installation completed

Adding an NDepend project to your solution

When you use the Visual Studio integration, you need to create an NDepend project in the solution that you wish to analyze.

NDepend will tell you anything that wish you know about source code.  This is powerful, however, it’s a point that must be covered.  In order to be productive with NDepend, you must first define what information that you wish to discover about your source code and how you plan to use that information.  If you don’t have this information then you will not get much use from the product.  The information that it provides to you is very useful, however, you must take some time to plan out how you will use this information to benefit you and your coding efforts.

You may wish to make sure that your code maintains a consistent amount of test coverage.  Perhaps you wish to make sure that all methods in your codebase stay below a certain threshold regarding the number of lines of code that they contain.  NDepend is capable of telling you this and much more about your source code.

One of the coolest features that I’ve seen in the product is the Code Query Linq (CQLinqing).  This allows you to query your source code using LINQ syntax to bring back anything that you wish to know about your source code.   You can query an assembly, a class, even a method.  The product comes with predefined CQLinq rules but also allows you to create your own rules as well as edit existing rules.

I plan to write another blog post that explains my personal experience with the product.  I’ve recently joined an open source project that is a framework that handles some very advanced topics such Artificial intelligence, Machine learning, and language design.  The project is called neural network designer http://bragisoft.com/ .  I chose this project because the source code is vast and I believe that a large code base is a perfect target to use NDepend to get the most benefit.

I plan to use the product and test the following areas:

  •   What information do I want to know about my code base?
  •   When do I wish to be presented with this information?
  •   How do I plan on using this information to improve my code?
  •   How can I use NDepend to provide this information?

I think that if you wish to get any use out of the product, it will be very important that you answer these questions.  The product is vast and diverse but it can also be a bit intimidating.  With that said, I plan to use my next post to illustrate how I was able to use NDepend to define the metrics that I needed from my code, and how I used NDepend to provide those metrics to me.

Stay tuned for the next installment which will explain my experience with using NDepend to improve my development efforts and my source code.

Thanks for reading,

Buddy James

kick it on DotNetKicks.com



Comments (1) -

Jan Bogaerts
Jan Bogaerts
2/9/2013 10:29:56 AM #

Love the first part. Looking forward to the next.

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • 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