What is the best way to modify WPF's user interface asynchronously without freezing it?

Question

What is the best way to modify WPF's user interface asynchronously without freezing it?

Reza Jaferi 331

Hi,
I used the Dispatcher property to modify the UI, and I added System.Threading.Thread.Sleep(3000) in line 38 to ensure that it would not freeze, but the UI stays frozen for 3 seconds at line 38.

According to the above, what is the best way to modify WPF's user interface without freezing it?

These are my C# codes:

        private async void Add_Button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
        {  
            await Task.Run(() =>  
            {  
                OleDbCommand OleDbCommandInsert = null;  
                MessageWindow MW = null;  
                Dispatcher.Invoke(() =>  
                {  
                    OleDbParameter Parameter = new OleDbParameter();  
                    Parameter.OleDbType = OleDbType.Binary;  
                    Parameter.ParameterName = "BookImage";  
                    Parameter.Value = ImageToBytes((BitmapImage)BookImage.Source);  
                    OleDbCommandInsert = new OleDbCommand("Insert Into BookInfo(BookName,Authors,Publisher,[ISBN-13],[ISBN-10],Category,PublicationDate,BookLanguage,Length,[Type],Translators,Narrators,DeweyDecimalClassification,UniversalDecimalClassification,LibraryOfCongressClassification,BookImage,Price) Values(@BookName,@Authors,@Publisher,@ISBN13,@ISBN10,@Category,@PublicationDate,@BookLanguage,@Length,@Type,@Translators,@Narrators,@DeweyDecimalClassification,@UniversalDecimalClassification,@LibraryOfCongressClassification,@BookImage,@Price)", OleDbConnect);  
                    OleDbCommandInsert.Parameters.AddWithValue("@BookName", BookName_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Authors", Authors_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Publisher", PublicationDate_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@ISBN13", ISBN13_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@ISBN10", ISBN10_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Category", Category_ComboBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@PublicationDate", PublicationDate_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@BookLanguage", Language_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Length", ushort.Parse(Length_TextBox.Text));  
                    OleDbCommandInsert.Parameters.AddWithValue("@Type", Type_ComboBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Translators", Translators_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Narrators", Narrators_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@DeweyDecimalClassification", DeweyDecimalClassification_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@UniversalDecimalClassification", UniversalDecimalClassification_TextBox.Text);  
                    OleDbCommandInsert.Parameters.AddWithValue("@LibraryOfCongressClassification", LibraryOfCongressClassification_TextBox.Text);  
                    OleDbCommandInsert.Parameters.Add(Parameter);  
                    OleDbCommandInsert.Parameters.AddWithValue("@Price", Price_TextBox.Text);  
                });  
                OleDbConnect.Open();  
                OleDbCommandInsert.ExecuteScalar();  
                OleDbConnect.Close();  
                Dispatcher.Invoke(() =>  
                {  
                    MW = new MessageWindow();  
                    System.Threading.Thread.Sleep(3000);  
                    MW.YesButton.Visibility = Visibility.Hidden;  
                    MW.NoButton.Visibility = Visibility.Hidden;  
                    MW.Image.Source = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));  
                    switch (App.EnumLanguage)  
                    {  
                        case AllLanguage.English:  
                            MW.MessageTextBlock.Text = "Information added successfully";  
                            MW.OKButton.Content = "OK";  
                            break;  
                        default:  
                            MW.MessageTextBlock.Text = "اطلاعات با موفقیت اضافه شد";  
                            MW.OKButton.Content = "تایید";  
                            break;  
                    }  
                    MW.ShowDialog();  
                });  
            });  
        }

I use the following tools:
• .NET Framework 4.5
• WPF
• OLE DB
• Windows 7

Thank you for your time.
Merry Christmas

Reza Jaferi 331 Reputation points

2023-01-01T02:17:45.483+00:00

Is there a better solution without creating a new thread?
P a u l 10,761 Reputation points

2023-01-01T02:31:43.107+00:00
In your snippet you're doing some synchronous IO-bound operations, i.e:

OleDbConnect.Open(); OleDbCommandInsert.ExecuteScalar();

Because of this you're sort of forced to execute these lines on a separate thread (which you're doing by running inside a Task.Run callback).

You're executing on the new thread which means that Thread.Sleep isn't a bad thing, but you have that statement inside your Dispatcher.Invoke callback, which forces the sleep to occur back on the UI thread. I think all you need to do is move this line:

System.Threading.Thread.Sleep(3000);

Directly below this line:

OleDbConnect.Close();

Have you tried that?
Reza Jaferi 331 Reputation points

2023-01-01T03:49:53.48+00:00

Let's say the Dispatcher.Invoke block takes 2 seconds for some reason and we don't want the UI to freeze, then your answer is not a good solution because the UI freezes for 2 seconds.
Lex Li 6,037 Reputation points

2023-01-01T05:13:55.46+00:00

Your code indicates misunderstanding of various multithreading concepts (async/await/Task/Dispatcher), so you'd better add application logging to print out the actual thread IDs for each code blocks, so as to tell yourself clearly what runs on main/UI thread and what's not. Time consuming methods, such as OleDbConnection.Open, must be run out of UI thread. And you should never call Thread.Sleep on UI thread.
@P a u l shared quite a few insights so enable logging and digest what those meant.
P a u l 10,761 Reputation points

2023-01-01T18:31:13.007+00:00
My general point is that Dispatcher.Invoke shouldn't contain any code that's not directly related to updating the UI (this definitely includes Thread.Sleep and that File.ReadAllBytes call). If you run this line outside of your Dispatcher.Invoke call:

var image = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));

Then just assign it inside the callback:

MW.Image.Source = image;

After that I would try and remove that Thread.Sleep call, as I'm not sure what it's purpose is, or at least move it outside of the Dispatcher.Invoke call.
Reza Jaferi 331 Reputation points

2023-01-02T00:55:25.867+00:00

My general point is that Dispatcher.Invoke shouldn't contain any code that's not directly related to updating the UI (this definitely includes Thread.Sleep and that File.ReadAllBytes call). If you run this line outside of your Dispatcher.Invoke call:

You made a very valid point. I try to do what you said, but sometimes I have to write the code in Dispatcher.Invoke.
Reza Jaferi 331 Reputation points

2023-01-02T23:02:29.877+00:00

The 50ms Rule: Operations should be made asynchronous if they “could take longer than 50 milliseconds to execute”
Is there a solution, according to the previous point?
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-01-03T08:13:40.31+00:00

That's because you're doing everything on the UI thread. A database query is a file operation that can be done asynchronously, so should be spun out in its own thread. Once the response is received, you can dispatch back to the UI thread to post the result.
Reza Jaferi 331 Reputation points

2023-01-07T22:02:31.753+00:00

As I am unable to verify my own response, please post this answer with the images I have attached so that I can accept and rate it.
The .txt text is properly formatted; all that is left to do is upload the images to the correct locations (when you see the text, you will understand where to upload the images).
277178-codes.txt

This comment was deleted later.
Thankful.

Accepted answer

5 additional answers

Your answer

Reza Jaferi 331 Reputation points

2023-01-01T02:17:45.483+00:00

Is there a better solution without creating a new thread?
P a u l 10,761 Reputation points

2023-01-01T02:31:43.107+00:00

In your snippet you're doing some synchronous IO-bound operations, i.e:

OleDbConnect.Open(); OleDbCommandInsert.ExecuteScalar();

Because of this you're sort of forced to execute these lines on a separate thread (which you're doing by running inside a Task.Run callback).

You're executing on the new thread which means that Thread.Sleep isn't a bad thing, but you have that statement inside your Dispatcher.Invoke callback, which forces the sleep to occur back on the UI thread. I think all you need to do is move this line:

System.Threading.Thread.Sleep(3000);

Directly below this line:

OleDbConnect.Close();

Have you tried that?
Reza Jaferi 331 Reputation points

2023-01-01T03:49:53.48+00:00

Let's say the Dispatcher.Invoke block takes 2 seconds for some reason and we don't want the UI to freeze, then your answer is not a good solution because the UI freezes for 2 seconds.
Lex Li 6,037 Reputation points

2023-01-01T05:13:55.46+00:00

Your code indicates misunderstanding of various multithreading concepts (async/await/Task/Dispatcher), so you'd better add application logging to print out the actual thread IDs for each code blocks, so as to tell yourself clearly what runs on main/UI thread and what's not. Time consuming methods, such as OleDbConnection.Open, must be run out of UI thread. And you should never call Thread.Sleep on UI thread.
@P a u l shared quite a few insights so enable logging and digest what those meant.
P a u l 10,761 Reputation points

2023-01-01T18:31:13.007+00:00

My general point is that Dispatcher.Invoke shouldn't contain any code that's not directly related to updating the UI (this definitely includes Thread.Sleep and that File.ReadAllBytes call). If you run this line outside of your Dispatcher.Invoke call:

var image = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));

Then just assign it inside the callback:

MW.Image.Source = image;

After that I would try and remove that Thread.Sleep call, as I'm not sure what it's purpose is, or at least move it outside of the Dispatcher.Invoke call.
Reza Jaferi 331 Reputation points

2023-01-02T00:55:25.867+00:00

My general point is that Dispatcher.Invoke shouldn't contain any code that's not directly related to updating the UI (this definitely includes Thread.Sleep and that File.ReadAllBytes call). If you run this line outside of your Dispatcher.Invoke call:

You made a very valid point. I try to do what you said, but sometimes I have to write the code in Dispatcher.Invoke.
Reza Jaferi 331 Reputation points

2023-01-02T23:02:29.877+00:00

The 50ms Rule: Operations should be made asynchronous if they “could take longer than 50 milliseconds to execute”
Is there a solution, according to the previous point?
Hui Liu-MSFT 48,681 Reputation points Microsoft External Staff

2023-01-03T08:13:40.31+00:00

That's because you're doing everything on the UI thread. A database query is a file operation that can be done asynchronously, so should be spun out in its own thread. Once the response is received, you can dispatch back to the UI thread to post the result.
Reza Jaferi 331 Reputation points

2023-01-07T22:02:31.753+00:00

As I am unable to verify my own response, please post this answer with the images I have attached so that I can accept and rate it.
The .txt text is properly formatted; all that is left to do is upload the images to the correct locations (when you see the text, you will understand where to upload the images).
277178-codes.txt

This comment was deleted later.
Thankful.

Answer 1

I created an algorithm for this specific case with your assistance. For clearer understanding, I illustrated it as follows:

enter image description here "XAML" (I only inserted the necessary codes):

    <Window x:Class="Ganj_Aseman.MessageWindow" x:Name="Message_Window"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            xmlns:local="clr-namespace:Ganj_Aseman"
            mc:Ignorable="d"
            Loaded="MessageWindow_Loaded" AllowsTransparency="True" Background="Transparent" FontSize="13" Height="228" RenderTransformOrigin="0.5,0.5" ResizeMode="NoResize" ShowInTaskbar="False" Width="430" WindowStartupLocation="CenterOwner" WindowStyle="None">
        <Window.RenderTransform>
            <TransformGroup>
                <RotateTransform/>
                <ScaleTransform/>
            </TransformGroup>
        </Window.RenderTransform>
        <Window.Resources>
            <Storyboard x:Key="CloseMessageWindow" Storyboard.TargetName="Message_Window" Completed="CloseMessageWindow_Completed">
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Duration="0:0:7" To="360"/>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:7" To="0"/>
                <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:7" To="0"/>
                <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:7.5" To="0"/>
            </Storyboard>
        </Window.Resources>
        <Grid>
            <Button Name="OKButton" GotFocus="OKButton_GotFocus" PreviewMouseLeftButtonDown="OKButton_PreviewMouseLeftButtonDown" Content="OK" HorizontalAlignment="Left" VerticalAlignment="Top" Height="34" Margin="177.5,180,0,0">
                <Button.Effect>
                    <DropShadowEffect BlurRadius="3" ShadowDepth="0.1" Direction="-90" Color="#e9f1cc"/>
                </Button.Effect>
                <Button.Triggers>
                    <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                        <BeginStoryboard Storyboard="{StaticResource CloseMessageWindow}"/>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
        </Grid>
    </Window>

"C#" (owner window):

            private async void Add_Button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                await Task.Run(() =>
                {
                    OleDbParameter Parameter = new OleDbParameter();
                    Parameter.OleDbType = OleDbType.Binary;
                    Parameter.ParameterName = "BookImage";
                    Dispatcher.Invoke(() =>
                    {
                        Parameter.Value = ImageToBytes((BitmapImage)BookImage.Source);
                    });
                    OleDbCommand OleDbCommandInsert = new OleDbCommand("Insert Into BookInfo(BookName,Authors,Publisher,[ISBN-13],[ISBN-10],Category,PublicationDate,BookLanguage,Length,[Type],Translators,Narrators,DeweyDecimalClassification,UniversalDecimalClassification,LibraryOfCongressClassification,BookImage,Price) Values(@BookName,@Authors,@Publisher,@ISBN13,@ISBN10,@Category,@PublicationDate,@BookLanguage,@Length,@Type,@Translators,@Narrators,@DeweyDecimalClassification,@UniversalDecimalClassification,@LibraryOfCongressClassification,@BookImage,@Price)", OleDbConnect);
                    Dispatcher.Invoke(() =>
                    {
                        OleDbCommandInsert.Parameters.AddWithValue("@BookName", BookName_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@Authors", Authors_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@Publisher", PublicationDate_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@ISBN13", ISBN13_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@ISBN10", ISBN10_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@Category", Category_ComboBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@PublicationDate", PublicationDate_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@BookLanguage", Language_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@Length", ushort.Parse(Length_TextBox.Text));
                        OleDbCommandInsert.Parameters.AddWithValue("@Type", Type_ComboBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@Translators", Translators_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@Narrators", Narrators_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@DeweyDecimalClassification", DeweyDecimalClassification_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@UniversalDecimalClassification", UniversalDecimalClassification_TextBox.Text);
                        OleDbCommandInsert.Parameters.AddWithValue("@LibraryOfCongressClassification", LibraryOfCongressClassification_TextBox.Text);
                        OleDbCommandInsert.Parameters.Add(Parameter);
                        OleDbCommandInsert.Parameters.AddWithValue("@Price", Price_TextBox.Text);
                    });
                    OleDbConnect.Open();
                    OleDbCommandInsert.ExecuteScalar();
                    OleDbConnect.Close();
                    Dispatcher.Invoke(() =>
                    {
                        MessageWindow MW = new MessageWindow();
                        MW.Owner = this;
                        MW.Owner.IsEnabled = false;
                        MW.YesButton.Visibility = Visibility.Hidden;
                        MW.NoButton.Visibility = Visibility.Hidden;
                        MW.Image.Source = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));
                        switch (App.EnumLanguage)
                        {
                            case AllLanguage.English:
                                MW.MessageTextBlock.Text = "Information added successfully";
                                MW.OKButton.Content = "OK";
                                break;
                            default:
                                MW.MessageTextBlock.Text = "اطلاعات با موفقیت اضافه شد";
                                MW.OKButton.Content = "تایید";
                                break;
                        }
                        MW.Show();
                    });
                });
            }

"C#" (message window):

        private void OKButton_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            this.Owner.IsEnabled = true;
        }
        private void CloseMessageWindow_Completed(object sender, EventArgs e)
        {
            Close();
        }

Result (I set the "Duration" property of the "Animation" to 7 seconds to better understand the result):

رضا جافری 1,296 Reputation points

2023-01-12T02:16:22.4666667+00:00

Result:

Answer 2

P a u l 10,761

Dispatcher.Invoke executes the callback on the Thread that's associated with the Dispatcher (i.e. the one that's associated with the current control, which will be the UI thread). In this case you're running Thread.Sleep on the UI thread and that will freeze the UI.

The idea is that you should only execute the code inside the callback that's relevant to updating controls (which are owned by the UI thread).

Is there a reason that Thread.Sleep needs to be inside the callback? If you move it above the Dispatcher.Invoke call wouldn't it have the same behaviour?

Reza Jaferi 331 Reputation points

2023-01-01T01:57:44.053+00:00

Is there a reason that Thread.Sleep needs to be inside the callback? If you move it above the Dispatcher.Invoke call wouldn't it have the same behaviour?

I'm using some Animations in the app that take around 2 seconds, but when I put them in async and await, the following exception occurs, thus I have to use Dispatcher, which unfortunately causes the UI to freeze.
Actually, I used Thread.Sleep to notify you that the code may take some time to execute for whatever reason, and I don't want the UI to be frozen.

Error: The calling thread must be STA, because many UI components require this.
Reza Jaferi 331 Reputation points

2023-01-02T00:21:16.087+00:00
Keep an eye on the following image as it closes in a special mode, which takes two seconds:

Part of the related codes:

<Storyboard x:Key="CloseMessageWindow" Storyboard.TargetName="Message_Window" Completed="CloseMessageWindow_Completed"> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Duration="0:0:2" To="360"/> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:2" To="0"/> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:2" To="0"/> <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2.5" To="0"/> </Storyboard>

Now, let's imagine that the message window required 2 seconds to load in a specific state. In which case, we have one of these two problems: if we put the message window in Dispatcher.Invoke, our user interface would be frozen for that time period, and if we put it in await Task.Run, we would run into the following error:

Error: The calling thread must be STA, because many UI components require this.

In light of the aforementioned assumption, what solution do you propose?

Answer 3

Peter Fleischer (former MVP) 19,341

Hi,
try this code:

		private async void Add_Button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)  
		{  
			OleDbCommand OleDbCommandInsert = new OleDbCommand("Insert Into BookInfo(BookName,Authors,Publisher,[ISBN-13],[ISBN-10],Category,PublicationDate,BookLanguage,Length,[Type],Translators,Narrators,DeweyDecimalClassification,UniversalDecimalClassification,LibraryOfCongressClassification,BookImage,Price) Values(@BookName,@Authors,@Publisher,@ISBN13,@ISBN10,@Category,@PublicationDate,@BookLanguage,@Length,@Type,@Translators,@Narrators,@DeweyDecimalClassification,@UniversalDecimalClassification,@LibraryOfCongressClassification,@BookImage,@Price)", OleDbConnect);  
			OleDbParameter Parameter = new OleDbParameter();  
			Parameter.OleDbType = OleDbType.Binary;  
			Parameter.ParameterName = "BookImage";  
			Parameter.Value = ImageToBytes((BitmapImage)BookImage.Source);  
			OleDbCommandInsert.Parameters.AddWithValue("@BookName", BookName_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@Authors", Authors_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@Publisher", PublicationDate_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@ISBN13", ISBN13_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@ISBN10", ISBN10_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@Category", Category_ComboBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@PublicationDate", PublicationDate_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@BookLanguage", Language_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@Length", ushort.Parse(Length_TextBox.Text));  
			OleDbCommandInsert.Parameters.AddWithValue("@Type", Type_ComboBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@Translators", Translators_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@Narrators", Narrators_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@DeweyDecimalClassification", DeweyDecimalClassification_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@UniversalDecimalClassification", UniversalDecimalClassification_TextBox.Text);  
			OleDbCommandInsert.Parameters.AddWithValue("@LibraryOfCongressClassification", LibraryOfCongressClassification_TextBox.Text);  
			OleDbCommandInsert.Parameters.Add(Parameter);  
			OleDbCommandInsert.Parameters.AddWithValue("@Price", Price_TextBox.Text);  
			await Task.Run(() =>  
			{  
				OleDbConnect.Open();  
				OleDbCommandInsert.ExecuteScalar();  
				OleDbConnect.Close();  
				var img = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));  
				System.Threading.Thread.Sleep(3000);  
				Dispatcher.Invoke(() =>  
				{  
					MessageWindow MW = new MessageWindow();  
					MW.YesButton.Visibility = Visibility.Hidden;  
					MW.NoButton.Visibility = Visibility.Hidden;  
					MW.Image.Source = img;  
					switch (App.EnumLanguage)  
					{  
						case AllLanguage.English:  
							MW.MessageTextBlock.Text = "Information added successfully";  
							MW.OKButton.Content = "OK";  
							break;  
						default:  
							MW.MessageTextBlock.Text = "اطلاعات با موفقیت اضافه شد";  
							MW.OKButton.Content = "تایید";  
							break;  
					}  
					MW.ShowDialog();  
				});  
			});  
		}

Reza Jaferi 331 Reputation points

2023-01-01T02:12:04.29+00:00

Let's say the Dispatcher.Invoke block takes 2 seconds for some reason and we don't want the UI to freeze, then your answer is not a good solution because the UI freezes for 2 seconds.
Peter Fleischer (former MVP) 19,341 Reputation points

2023-01-01T07:28:01.37+00:00

Hi,
in Dispatcher.Invoke you must only put code that runs quickly. Code that takes 2 seconds should be placed in a separate thread. In this case, the UI will not be blocked for 2 seconds.
Reza Jaferi 331 Reputation points

2023-01-02T00:35:25.383+00:00
Hi,
Keep an eye on the following image as it closes in a special mode, which takes two seconds:

Part of the related codes:

<Storyboard x:Key="CloseMessageWindow" Storyboard.TargetName="Message_Window" Completed="CloseMessageWindow_Completed"> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Duration="0:0:2" To="360"/> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:2" To="0"/> <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:2" To="0"/> <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:2.5" To="0"/> </Storyboard>

Now, let's imagine that the message window required 2 seconds to load in a specific state. In which case, we have one of these two problems: if we put the message window in Dispatcher.Invoke, our user interface would be frozen for that time period, and if we put it in await Task.Run, we would run into the following error:

Error: The calling thread must be STA, because many UI components require this.

In light of the aforementioned assumption, what solution do you propose?
Lex Li 6,037 Reputation points

2023-01-02T00:50:19.28+00:00

Finally you revealed the actual user experience you designed. Combine all previous discussions on your C# code, and those tips are what you should learn to improve and avoid locking up UI thread. But your user interface design also has areas that can be improved.

For example, if indeed the background task between the button click and dialog popup takes a long while to finish (2 seconds or more), no matter how you improve your C# code in button click event handler, users don't know what happens for 2 seconds until the next dialog pops up.

You should indicate the something is running behind the scene (progress bar or loading circle), instead of showing nothing. That's actually why components like BusyIndicator are popular, https://github.com/xceedsoftware/wpftoolkit/wiki/BusyIndicator.
Peter Fleischer (former MVP) 19,341 Reputation points

2023-01-02T08:13:00.073+00:00

Hi,
now everything is clear. In Dispatcher.Invoke you start ShowDialog. All other windows were blocked until the dialog was completed. Only when the animation ends when the dialog is closed are the other windows released again. There is no delay in closing a dialog and there is no blocking of other windows.
Reza Jaferi 331 Reputation points

2023-01-02T22:41:54.583+00:00

Now suppose that Show is used instead of ShowDialog, then what is the solution?
Reza Jaferi 331 Reputation points

2023-01-02T22:46:32.423+00:00

Avoiding the topic is what we call this (I mean your advice).
The 50ms Rule: Operations should be made asynchronous if they “could take longer than 50 milliseconds to execute”
Is there a solution, according to the previous point?
Peter Fleischer (former MVP) 19,341 Reputation points

2023-01-03T06:36:26.857+00:00

Hi,
use ShowDialog without animation on closing and start a separate window with Show on topmost for showing animation.

Answer 4

I created an algorithm for this specific case with your assistance.
For clearer understanding, I illustrated it as follows:


XAML

        <Window x:Class="Ganj_Aseman.MessageWindow" x:Name="Message_Window"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:Ganj_Aseman"
                mc:Ignorable="d"
                Loaded="MessageWindow_Loaded" AllowsTransparency="True" Background="Transparent" FontSize="13" Height="228" RenderTransformOrigin="0.5,0.5" ResizeMode="NoResize" ShowInTaskbar="False" Width="430" WindowStartupLocation="CenterOwner" WindowStyle="None">
            <Window.RenderTransform>
                <TransformGroup>
                    <RotateTransform/>
                    <ScaleTransform/>
                </TransformGroup>
            </Window.RenderTransform>
            <Window.Resources>
                <Storyboard x:Key="CloseMessageWindow" Storyboard.TargetName="Message_Window" Completed="CloseMessageWindow_Completed">
                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Duration="0:0:7" To="360"/>
                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:7" To="0"/>
                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:7" To="0"/>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:7.5" To="0"/>
                </Storyboard>
            </Window.Resources>
            <Grid>
                <Button Name="OKButton" GotFocus="OKButton_GotFocus" PreviewMouseLeftButtonDown="OKButton_PreviewMouseLeftButtonDown" Content="OK" HorizontalAlignment="Left" VerticalAlignment="Top" Height="34" Margin="177.5,180,0,0">
                    <Button.Effect>
                        <DropShadowEffect BlurRadius="3" ShadowDepth="0.1" Direction="-90" Color="#e9f1cc"/>
                    </Button.Effect>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                            <BeginStoryboard Storyboard="{StaticResource CloseMessageWindow}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
            </Grid>
        </Window>

C#

                private async void Add_Button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
                {
                    await Task.Run(() =>
                    {
                        OleDbParameter Parameter = new OleDbParameter();
                        Parameter.OleDbType = OleDbType.Binary;
                        Parameter.ParameterName = "BookImage";
                        Dispatcher.Invoke(() =>
                        {
                            Parameter.Value = ImageToBytes((BitmapImage)BookImage.Source);
                        });
                        OleDbCommand OleDbCommandInsert = new OleDbCommand("Insert Into BookInfo(BookName,Authors,Publisher,[ISBN-13],[ISBN-10],Category,PublicationDate,BookLanguage,Length,[Type],Translators,Narrators,DeweyDecimalClassification,UniversalDecimalClassification,LibraryOfCongressClassification,BookImage,Price) Values(@BookName,@Authors,@Publisher,@ISBN13,@ISBN10,@Category,@PublicationDate,@BookLanguage,@Length,@Type,@Translators,@Narrators,@DeweyDecimalClassification,@UniversalDecimalClassification,@LibraryOfCongressClassification,@BookImage,@Price)", OleDbConnect);
                        Dispatcher.Invoke(() =>
                        {
                            OleDbCommandInsert.Parameters.AddWithValue("@BookName", BookName_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Authors", Authors_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Publisher", PublicationDate_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@ISBN13", ISBN13_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@ISBN10", ISBN10_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Category", Category_ComboBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@PublicationDate", PublicationDate_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@BookLanguage", Language_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Length", ushort.Parse(Length_TextBox.Text));
                            OleDbCommandInsert.Parameters.AddWithValue("@Type", Type_ComboBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Translators", Translators_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Narrators", Narrators_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@DeweyDecimalClassification", DeweyDecimalClassification_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@UniversalDecimalClassification", UniversalDecimalClassification_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@LibraryOfCongressClassification", LibraryOfCongressClassification_TextBox.Text);
                            OleDbCommandInsert.Parameters.Add(Parameter);
                            OleDbCommandInsert.Parameters.AddWithValue("@Price", Price_TextBox.Text);
                        });
                        OleDbConnect.Open();
                        OleDbCommandInsert.ExecuteScalar();
                        OleDbConnect.Close();
                        Dispatcher.Invoke(() =>
                        {
                            MessageWindow MW = new MessageWindow();
                            MW.Owner = this;
                            MW.Owner.IsEnabled = false;
                            MW.YesButton.Visibility = Visibility.Hidden;
                            MW.NoButton.Visibility = Visibility.Hidden;
                            MW.Image.Source = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));
                            switch (App.EnumLanguage)
                            {
                                case AllLanguage.English:
                                    MW.MessageTextBlock.Text = "Information added successfully";
                                    MW.OKButton.Content = "OK";
                                    break;
                                default:
                                    MW.MessageTextBlock.Text = "اطلاعات با موفقیت اضافه شد";
                                    MW.OKButton.Content = "تایید";
                                    break;
                            }
                            MW.Show();
                        });
                    });
                }

C#

            private void OKButton_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                this.Owner.IsEnabled = true;
            }
            private void CloseMessageWindow_Completed(object sender, EventArgs e)
            {
                Close();
            }
Result (I set the

Answer 5

I created an algorithm for this specific case with your assistance.
For clearer understanding, I illustrated it as follows:


XAML (I only inserted the necessary codes):

        <Window x:Class="Ganj_Aseman.MessageWindow" x:Name="Message_Window"
                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                xmlns:local="clr-namespace:Ganj_Aseman"
                mc:Ignorable="d"
                Loaded="MessageWindow_Loaded" AllowsTransparency="True" Background="Transparent" FontSize="13" Height="228" RenderTransformOrigin="0.5,0.5" ResizeMode="NoResize" ShowInTaskbar="False" Width="430" WindowStartupLocation="CenterOwner" WindowStyle="None">
            <Window.RenderTransform>
                <TransformGroup>
                    <RotateTransform/>
                    <ScaleTransform/>
                </TransformGroup>
            </Window.RenderTransform>
            <Window.Resources>
                <Storyboard x:Key="CloseMessageWindow" Storyboard.TargetName="Message_Window" Completed="CloseMessageWindow_Completed">
                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[0].Angle" Duration="0:0:7" To="360"/>
                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleX" Duration="0:0:7" To="0"/>
                    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Children[1].ScaleY" Duration="0:0:7" To="0"/>
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="0:0:7.5" To="0"/>
                </Storyboard>
            </Window.Resources>
            <Grid>
                <Button Name="OKButton" GotFocus="OKButton_GotFocus" PreviewMouseLeftButtonDown="OKButton_PreviewMouseLeftButtonDown" Content="OK" HorizontalAlignment="Left" VerticalAlignment="Top" Height="34" Margin="177.5,180,0,0">
                    <Button.Effect>
                        <DropShadowEffect BlurRadius="3" ShadowDepth="0.1" Direction="-90" Color="#e9f1cc"/>
                    </Button.Effect>
                    <Button.Triggers>
                        <EventTrigger RoutedEvent="PreviewMouseLeftButtonDown">
                            <BeginStoryboard Storyboard="{StaticResource CloseMessageWindow}"/>
                        </EventTrigger>
                    </Button.Triggers>
                </Button>
            </Grid>
        </Window>

`C#` (owner window):

                private async void Add_Button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
                {
                    await Task.Run(() =>
                    {
                        OleDbParameter Parameter = new OleDbParameter();
                        Parameter.OleDbType = OleDbType.Binary;
                        Parameter.ParameterName = "BookImage";
                        Dispatcher.Invoke(() =>
                        {
                            Parameter.Value = ImageToBytes((BitmapImage)BookImage.Source);
                        });
                        OleDbCommand OleDbCommandInsert = new OleDbCommand("Insert Into BookInfo(BookName,Authors,Publisher,[ISBN-13],[ISBN-10],Category,PublicationDate,BookLanguage,Length,[Type],Translators,Narrators,DeweyDecimalClassification,UniversalDecimalClassification,LibraryOfCongressClassification,BookImage,Price) Values(@BookName,@Authors,@Publisher,@ISBN13,@ISBN10,@Category,@PublicationDate,@BookLanguage,@Length,@Type,@Translators,@Narrators,@DeweyDecimalClassification,@UniversalDecimalClassification,@LibraryOfCongressClassification,@BookImage,@Price)", OleDbConnect);
                        Dispatcher.Invoke(() =>
                        {
                            OleDbCommandInsert.Parameters.AddWithValue("@BookName", BookName_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Authors", Authors_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Publisher", PublicationDate_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@ISBN13", ISBN13_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@ISBN10", ISBN10_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Category", Category_ComboBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@PublicationDate", PublicationDate_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@BookLanguage", Language_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Length", ushort.Parse(Length_TextBox.Text));
                            OleDbCommandInsert.Parameters.AddWithValue("@Type", Type_ComboBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Translators", Translators_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@Narrators", Narrators_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@DeweyDecimalClassification", DeweyDecimalClassification_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@UniversalDecimalClassification", UniversalDecimalClassification_TextBox.Text);
                            OleDbCommandInsert.Parameters.AddWithValue("@LibraryOfCongressClassification", LibraryOfCongressClassification_TextBox.Text);
                            OleDbCommandInsert.Parameters.Add(Parameter);
                            OleDbCommandInsert.Parameters.AddWithValue("@Price", Price_TextBox.Text);
                        });
                        OleDbConnect.Open();
                        OleDbCommandInsert.ExecuteScalar();
                        OleDbConnect.Close();
                        Dispatcher.Invoke(() =>
                        {
                            MessageWindow MW = new MessageWindow();
                            MW.Owner = this;
                            MW.Owner.IsEnabled = false;
                            MW.YesButton.Visibility = Visibility.Hidden;
                            MW.NoButton.Visibility = Visibility.Hidden;
                            MW.Image.Source = GetImageFromBytes(System.IO.File.ReadAllBytes(System.Windows.Forms.Application.StartupPath + @"\Images\Check.bin"));
                            switch (App.EnumLanguage)
                            {
                                case AllLanguage.English:
                                    MW.MessageTextBlock.Text = "Information added successfully";
                                    MW.OKButton.Content = "OK";
                                    break;
                                default:
                                    MW.MessageTextBlock.Text = "اطلاعات با موفقیت اضافه شد";
                                    MW.OKButton.Content = "تایید";
                                    break;
                            }
                            MW.Show();
                        });
                    });
                }

`C#` (message window):

            private void OKButton_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
            {
                this.Owner.IsEnabled = true;
            }
            private void CloseMessageWindow_Completed(object sender, EventArgs e)
            {
                Close();
            }
Result (I set the "Duration" property of the "Animation" to 7 seconds to better understand the result):

Share via

What is the best way to modify WPF's user interface asynchronously without freezing it?

5 additional answers

Your answer