You can use the Progress Bar to visually indicate to the user that your application is performing tasks
Indeterminate ProgressBar #
You can set the property IsIndeterminate to True, to achieve below the progress bar.
The ProgressBar will be running indefinitely, until you change its property, or otherwise hide it.
It does not need any additional logic or multithreading to make it work
Xaml of the below the Progress bar
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="825" Height="209" Loaded="onLoad" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0"> <Grid> <ProgressBar IsIndeterminate="True" HorizontalAlignment="Left" Height="56" VerticalAlignment="Top" Width="550" Margin="130,65,0,0" Maximum="100"></ProgressBar> </Grid> </Window>
Progress from minimum to maximum #
You can implement a traditional progress bar going for example from 0 to 100, to indicate the progress of the task that your app is currently working
This type of progress bar has to be implemented using multithreading, (link to multithreading). Updating the value without it will freeze the UI of your app
For this type of Progress bar, you have to set the Minimum and Maximum properties. Then we need to update the value property.
The problem #
Due to how ProgressBar is implemented in WPF, updating the value DataContext through DataContext and multithreading does not cause the UI to be updated.
We could solve this issue by adding additional C# code but there is a simpler solution using a supporting control like a text block
Solution #
Let’s implement the example by creating a project with a TextBlock, ProgressBar, and a button like this:
Enable the multithreading toggle on the output tab
Let’s add a counter property to DataContext and set it to 0 and Bind to the TextBlocks Text property.:
Next, let’s add below start-counting function as the Click event:
function start-counting(){ Async { for ($i = 1 ; $i -le 100 ; $i++) { $State.counter = $i Start-Sleep -milliseconds 500 } } }
By now, we should have a working counter application looking like this:
Now let’s make sure the ProgressBar is updating as well
We need to name the Textblock that is being updated, in this example, it’s “MyTextBlock”
Then we need to Bind the value property of the ProgressBar to the Text Value of MyTextBlock. That way, the progress bar will be always updated when the Textblocks value will.
We do that in the XAML Panel by adding the binding in the following way: Value="{Binding ElementName=MyTextBlock, Path=Text}"
Now our application is done and ProgressBar is Updating:
Below is the XAML of this example and a link to a working Public project
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="729" Height="360" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,0,0,0"> <Grid> <Button Content="Start counting" HorizontalAlignment="Center" VerticalAlignment="Top" Width="186" Margin="0,125,0,0" Height="39" Click="start-counting"></Button> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Top" TextWrapping="Wrap" Text="{Binding counter}" Margin="0,50,0,0" Name="MyTextBlock"></TextBlock> <ProgressBar Value="{Binding ElementName=MyTextBlock, Path=Text}" HorizontalAlignment="Left" Height="56" VerticalAlignment="Top" Width="550" Margin="89.84375,217.984375,0,0" Maximum="100"></ProgressBar> </Grid> </Window>