PSGUI – Refreshing GUI within CodeBehind

Hello together,

if you work with more complex scripts behind the GUI you will come to a point, where you want to make changes to the GUI appearance within the CodeBehind-file. An example herefore would be the usage of a progressBar. But how can this be done?

InvokeRefresh

Let´s take an example where you want to do a specific job, which takes long time to finish.

$PSGUI_bXAML.Add_Click(
    {
        $PSGUI_progressbar1.Visible = $true
        #Init CancelLoop
 
        #Reset the Progress Bar
        $PSGUI_progressbar1.Value = 0
        $PSGUI_progressbar1.Maximum=20
   
        for($i = 0; $i -lt $PSGUI_progressbar1.Maximum; $i++)
        {
            Start-Sleep -s 1
            $PSGUI_progressbar1.Value++
 
       
        }
        $PSGUI_progressbar1.Visible = $False
    }   
            
)

We have a window which is named “PSGUI” and a progressBar named “progressbar1”. On the buttonClick-Event of the button “bXAML” we initialize our progressBar to give the user a visual feedback while we do a specific job for a several time. Herefore we increase the values of the progressBar after each loop. Normally this should work – you think.

But you will run into a problem. If you modify the value of the progressBar or any other object visible in the GUI this would only become visible after the whole execution because it is executed in only one workerthread. To fix this issue we use a simple trick.
We call like a rerender of the window whithin the code block. In this example like this:

$PSGUI_bXAML.Add_Click(
    {
        $PSGUI_progressbar1.Visible = $true
        #Init CancelLoop
 
        #Reset the Progress Bar
        $PSGUI_progressbar1.Value = 0
        $PSGUI_progressbar1.Maximum=20
   
        for($i = 0; $i -lt $PSGUI_progressbar1.Maximum; $i++)
        {
            Start-Sleep -s 1
            $PSGUI_progressbar1.Value++
            $PSGUI.Dispatcher.Invoke([action]{},"Render")          
        }
        $PSGUI_progressbar1.Visible = $False
    }   
            
)

By this Invoke command the GUI will be refreshed at this exact time and you will see a increasing progressBar in the GUI.
Take a closer look at the picture: the sequence is started in the CodeBehind file in the code. Now you make some changes to the GUI – like changing the appearance of some objects or its containing values. Afterwards you force the rerender process with the Invoke-command which executes the GUI-refresh in parallel with the following continuation of the code. And that´s it.

Do not forget, that you have to place the refreshes as rare as possible.
And now – make some interactive dialogs! 🙂

Greetings,

David

Advertisements

2 thoughts on “PSGUI – Refreshing GUI within CodeBehind

  1. I think the better option is to forego the code behind and rearchitect to use MVVM. Then you can bind the value of the progress bar and update the view model from another thread. As the view model is updated, the bindings trigger, and the UI is automatically updated… live.

    Like

  2. Hi – je using MVVM within a C# project is the primary approach nowadays. Though here i am testing using XAML formulars within Powershell which brings some problems with it. Though i will try this approach also. Thanks for your comment!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s