poshgui.com

  • Home
  • Pricing
  • Documentation
    • Features | Roadmap
    • Changelog
    • Docs
    • Video Tutorials
  • Contact
  • About
  • Login
  • Home
  • Pricing
  • Documentation
    • Features | Roadmap
    • Changelog
    • Docs
    • Video Tutorials
  • Contact
  • About
  • Login

Docs

In-depth how-to’s on PoshGUI features

Popular Search textboxbuttonimagecombopicture

WPF

  • Starting New Project
  • Adding controls
  • Changing properties
  • Layout
  • Adding Events and Logic
  • DataContext
  • Exporting your project
  • Multithreading
  • Multipage Applications
  • Custom Lists
  • Controls
    • Tab Control
    • Grid
    • Border
    • StackPanel
    • ProgressBar

WinForms

  • Exporting your project
  • Starting New project
  • Adding controls
  • Changing Properties
  • Adding Events and logic

General

  • Cross-platform support
  • Code editors Keyboard Shortcuts
  • Why the UI on the site looks different than in runtime
  • Privacy Policy
  • Terms & Conditions
View Categories
  • Home
  • Docs
  • WPF
  • Controls
  • ProgressBar

ProgressBar

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function start-counting(){
Async {
for ($i = 1 ; $i -le 100 ; $i++)
{
$State.counter = $i
Start-Sleep -milliseconds 500
}
}
}
function start-counting(){ Async { for ($i = 1 ; $i -le 100 ; $i++) { $State.counter = $i Start-Sleep -milliseconds 500 } } }
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}"
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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

https://app.poshgui.com/wpf/61fd09b756c7f8ec27c45d48

Still stuck? How can we help?

How can we help?

Updated on February 7, 2022
Table of Contents
  • Indeterminate ProgressBar
  • Progress from minimum to maximum
    • The problem
    • Solution
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie settingsACCEPT
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT