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"
  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;
  20. struct App :ApplicationT<App>
  21. {
  22. TextBlock txtStatus;
  23. ProgressBar pBar;
  24. int value = 20;
  26. IInspectable CreateInspectable(hstring strCaption)
  27. {
  28. return PropertyValue::CreateString(strCaption);
  29. }
  31. void BtnClick(IInspectable const & sender, const RoutedEventArgs &args)
  32. {
  34. Button btnTag = sender.as<Button>();
  36. pBar.ShowError(false);
  38. auto demo = btnTag.Tag();
  40. IPropertyValue tagId = btnTag.Tag().as<IPropertyValue>();
  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. }
  59. if (value <= 40)
  60. pBar.Foreground(SolidColorBrush(Colors::Red()));
  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. }
  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. }
  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. }
  92. void OnLaunched(LaunchActivatedEventArgs const&)
  93. {
  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));
  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));
  108. auto txtheader = CreateTextBlock(L"ProgressBar Sample(Modern C++/WinRT)");
  109. txtheader.FontSize(25);
  111. StackPanel btnPanel;
  112. btnPanel.Orientation(Orientation::Horizontal);
  113. btnPanel.Children().Append(BtnIncrease);
  114. btnPanel.Children().Append(BtnDecrease);
  117. StackPanel sContentPanel;
  118. //sContentPanel.Children().Append(txtarticleheader);
  119. sContentPanel.Children().Append(btnPanel);
  120. sContentPanel.Orientation(Orientation::Vertical);
  121. sContentPanel.VerticalAlignment(VerticalAlignment::Top);
  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()));
  132. StackPanel mainPanel;
  133. mainPanel.Children().Append(sContentPanel);
  134. mainPanel.Children().Append(txtheader);
  135. mainPanel.Children().Append(pBar);
  139. Window window = Window::Current();
  140. window.Content(mainPanel);
  141. window.Activate();
  146. }
  147. };
  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.