Loading...

Create cool progress bars or rings with PowerShell and WPF


In this post I will show you a nice WPF library I found that allows you to display cool progress ring or loading indicators. I will show you how to use them with PowerShell.
Last week I shared a cool library that allows you to create a nice and sweet menu.
This week I will continue my work with libraries. 

How to get all sample ?



What is it ?
The library I will talk about is called LoadingIndicators.WPF.
It has been created by Luís 'zeluisping' Guimarães who did a really nice job.
It's composed of 8 different progress rings.



How it looks like ?
See below an example of on of this progress ring in the Windows 10 progress.






Where to find it ?
You can find the library on this GitHub repo. 
You can find also the Nuget package on the Nuget website, here.

How to install it ?
1 / To install it, download the Github repo folder in order to get the assembly file.
Now you have downloaded the repository, we will create our project.
2 / Create a folder assembly
3 / Create a folder resources
My project will look like as below:

4 / In my case I downloaded project from the GitHub repo.
5 / In the downloaded folder go to the folder LoadingIndicators.WPF-master\LoadingIndicators.WPF\bin\Release
6 / Copy the LoadingIndicators.WPF.dll file to the resources folder previously created

Now we have everything we need, let us see how to use it.

How to use it ?

XAML part

1 / Copy the below line in the Window part.
See below my Window part before
See below my Window part after
If you use Mahapps the Window part will be as below:
After the Window part, add the below resources part
If you use Mahapps the Resources part will be as below:
Now let's see how to use progress rings.
There are 8 progress ring available, see below style name to use in the style attribute:
- LoadingIndicatorArcsStyle
- LoadingIndicatorArcsRingStyle
- LoadingIndicatorDoubleBounceStyle
- LoadingIndicatorFlipPlaneStyle
- LoadingIndicatorPulseStyle
- LoadingIndicatorRingStyle
- LoadingIndicatorThreeDotsStyle
- LoadingIndicatorWaveStyle

To use one of them you have the use the below Control sample.
See below below Control for each kind of rings.

To play with them differents attributes are available:
- SpeedRatio: To choose the speed display
- IsActive: To display or not the progress
- Style: To choose the progress we want

You can also change easily the color of each indicators.
if you use Mahapps, it's pretty simple, just change the below line by adding your own color.
In this sample I replaced Cobalt by Red and Tadaaa
You can also change it by adding a Foreground attribute to the indicator.

PS1 part

1 / Add the below line, at the beginning of your script, to load the assembly
2 / See below how to display or not progress rings and change the speedratio

In the below GUI, I added checkbox to enable or not progress rings and a slider control to set the speedratio.
You can find the sample in the folder "With Check and Ratio" from the download link in order to understand how to proceed.

WPF_Progress 1332825316263211618

Enregistrer un commentaire

Accueil item

Award

Learn KQL in one month

Sponsors

You want to support me ?

Mes articles en français

Books in French


Stats