UWP

Learn Universal Windows Programming Via Modern C++ (ProgressBar)

Before reading this article, I highly recommend reading the previous parts of the series.

ProgressBar control

ProgressBar indicates that some operation is going on in the background. Just update the graphical indication in the GUI, ex: Copy one folder to another folder. Windows OS shows in one popup window what’s going on.

In this article, I am going to explain how to implement ProgressBar control in Modern C++/WinRT.

ProgressBar has divided into two types.

  1. Repeating Style(Pattern)
  2. ProgressBar fill based on the value;

ProgressBar Repeating Style

To implement the repeating style, set IsIndeterminate value as true. That’s it. It will display the indication like below.

  1. ProgressBar pBar;  
  2. pBar.IsIndeterminate(true);  
  3. pBar.Foreground(SolidColorBrush(Colors::Red()));  
Output

 

ProgressBar is filled based on the value

This feature shows the percentage as a status (Fill the value) based on the value. To use this feature, we have to set the three important properties as given below.

Properties

  • Minimum - Minimum value for Bar value
  • Maximum - Maximum value for Bar.
  • Value - Value is indicated current fill value (how many percents it has completed)

Note -  Value property should be within Minimum and Maximum range. 

  1. ProgressBar pBar;  
  2. pBar.Minimum(0);  
  3. pBar.Maximum(100);  
  4. pBar.Value(value);  
 

Let's see one simple example

Concept: If the background work ( Background: Click the button ) is completed 40%,  then show percentage as RedColor. If 80% is completed, show it in yellow color, and if it is 100% completed, show the green color in the ProgressBar control.

  1. #include "pch.h"  
  2.   
  3. using namespace winrt;  
  4. using namespace Windows::ApplicationModel;  
  5. using namespace Windows::ApplicationModel::Activation;  
  6. using namespace Windows::Foundation;  
  7. using namespace Windows::UI;  
  8. using namespace Windows::UI::Xaml;  
  9. using namespace Windows::UI::Xaml::Controls;  
  10. using namespace Windows::UI::Xaml::Controls::Primitives;  
  11. using namespace Windows::UI::Xaml::Interop;  
  12. using namespace Windows::UI::Xaml::Navigation;  
  13. using namespace Windows::UI::Xaml::Media;  
  14. using namespace Windows::Media;  
  15. using namespace Windows::Media::Core;  
  16. using namespace Windows::Storage;  
  17. using namespace Windows::Storage::Pickers;  
  18.   
  19.   
  20. struct App :ApplicationT<App>  
  21. {  
  22.     TextBlock txtStatus;  
  23.     ProgressBar pBar;  
  24.     int value = 20;  
  25.   
  26.     IInspectable CreateInspectable(hstring strCaption)  
  27.     {  
  28.         return PropertyValue::CreateString(strCaption);  
  29.     }  
  30.       
  31.     void BtnClick(IInspectable const & sender, const RoutedEventArgs &args)  
  32.     {  
  33.   
  34.         Button btnTag = sender.as<Button>();  
  35.   
  36.         pBar.ShowError(false);  
  37.   
  38.         auto demo = btnTag.Tag();  
  39.   
  40.         IPropertyValue tagId = btnTag.Tag().as<IPropertyValue>();  
  41.   
  42.         if(tagId.GetInt16() == 1)  
  43.         {  
  44.             value += 10;  
  45.             if (value > 100)  
  46.                 value = 0;  
  47.         }  
  48.         else if (tagId.GetInt16() == 2)  
  49.         {  
  50.             value -= 10;  
  51.             if (value < 0)  
  52.                 value = 0;  
  53.         }         
  54.         else if (tagId.GetInt16() == 3)  
  55.         {  
  56.             pBar.ShowError(true);  
  57.         }  
  58.   
  59.         if (value <= 40)  
  60.             pBar.Foreground(SolidColorBrush(Colors::Red()));  
  61.   
  62.         else if (value <= 80)  
  63.             pBar.Foreground(SolidColorBrush(Colors::Yellow()));  
  64.         else if (value <= 100)  
  65.             pBar.Foreground(SolidColorBrush(Colors::Green()));  
  66.         pBar.Value(value);  
  67.     }  
  68.   
  69.     TextBlock CreateTextBlock(hstring text)  
  70.     {  
  71.         TextBlock txtBlock;  
  72.         txtBlock.Text(text);  
  73.         txtBlock.FontFamily(FontFamily(L"Segoe UI Semibold"));  
  74.         txtBlock.TextAlignment(TextAlignment::Left);  
  75.         txtBlock.FontSize(35);  
  76.         txtBlock.Foreground(SolidColorBrush(Colors::Brown()));  
  77.         txtBlock.Margin(CreateThickness(10, 10, 0, 0));  
  78.         return txtBlock;  
  79.     }  
  80.   
  81.     Thickness CreateThickness(int left, int top, int right, int bottom)  
  82.     {  
  83.         Thickness thick;  
  84.         thick.Left = left;  
  85.         thick.Top = top;  
  86.         thick.Right = right;  
  87.         thick.Bottom = bottom;  
  88.         return thick;  
  89.     }  
  90.   
  91.   
  92.     void OnLaunched(LaunchActivatedEventArgs const&)  
  93.     {  
  94.   
  95.         Button BtnIncrease,BtnDecrease,BtnError;  
  96.         auto captionText = PropertyValue::CreateString(L"Increase");  
  97.         BtnIncrease.Content(captionText);  
  98.         BtnIncrease.Click({ this,&App::BtnClick });  
  99.         BtnIncrease.Margin(CreateThickness(20, 10, 0, 0));  
  100.         BtnIncrease.Tag(PropertyValue::CreateInt32(1));  
  101.   
  102.         captionText = PropertyValue::CreateString(L"Decrease");  
  103.         BtnDecrease.Content(captionText);  
  104.         BtnDecrease.Click({ this,&App::BtnClick });  
  105.         BtnDecrease.Margin(CreateThickness(20, 10, 0, 0));  
  106.         BtnDecrease.Tag(PropertyValue::CreateInt32(2));  
  107.   
  108.         auto txtheader = CreateTextBlock(L"ProgressBar Sample(Modern C++/WinRT)");  
  109.         txtheader.FontSize(25);  
  110.   
  111.         StackPanel btnPanel;  
  112.         btnPanel.Orientation(Orientation::Horizontal);  
  113.         btnPanel.Children().Append(BtnIncrease);  
  114.         btnPanel.Children().Append(BtnDecrease);  
  115.                           
  116.   
  117.         StackPanel sContentPanel;  
  118.         //sContentPanel.Children().Append(txtarticleheader);  
  119.         sContentPanel.Children().Append(btnPanel);  
  120.         sContentPanel.Orientation(Orientation::Vertical);  
  121.         sContentPanel.VerticalAlignment(VerticalAlignment::Top);  
  122.           
  123.   
  124.         pBar.Minimum(0);  
  125.         pBar.Maximum(100);  
  126.         pBar.Value(value);  
  127.         pBar.Height(100);  
  128.         pBar.Margin(CreateThickness(5, 20, 10, 0));  
  129.         pBar.IsIndeterminate(false);  
  130.         pBar.Foreground(SolidColorBrush(Colors::Red()));  
  131.           
  132.         StackPanel mainPanel;  
  133.         mainPanel.Children().Append(sContentPanel);  
  134.         mainPanel.Children().Append(txtheader);  
  135.         mainPanel.Children().Append(pBar);  
  136.   
  137.   
  138.   
  139.         Window window = Window::Current();  
  140.         window.Content(mainPanel);  
  141.         window.Activate();  
  142.   
  143.   
  144.   
  145.   
  146.     }  
  147. };  
  148.   
  149. int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)  
  150. {  
  151.     Application::Start([](auto &&) {make<App>(); });  
  152.     return 0;  
  153. }  
Output

 
 
The sample code is given here.

Conclusion

I hope, you understood how to use ProgressBar control. 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs