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

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

• Learn Universal Windows Programming Via Modern C++
• Learn Universal Windows Programming Via Modern C++ (Button Control)
• Learn Universal Windows Programming Via Modern C++ (Stackpanel)
• Learn Universal Windows Programming Via Modern C++ (CheckBox)
• Learn Universal Windows Programming Via Modern C++ (RadioButton)
• Learn Universal Windows Programming Via Modern C++ (Combobox)
• Learn Universal Windows Programming Via Modern C++ (Border)
• Learn Universal Windows Programming Via Modern C++ (CommandBar)
• Learn Universal Windows Programming Via Modern C++ (SplitView Control)
• Learn Universal Windows Programming Via Modern C++ (AutoSuggestBox)
• Learn Universal Windows Programming Via Modern C++ (ContentDialog)
• Learn Universal Windows Programming Via Modern C++ (Grid control)
• Learn Universal Windows Programming Via Modern C++ (RelativePanel)
• Learn Universal Windows Programming Via Modern C++ (ProgressBar)
• Learn Universal Windows Programming Via Modern C++ (DispatcherTimer)

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

ProgressRing control

ProgressRing is similar to the ProgressBar control. It indicates that some operation is going on in the background. ProgressBar contains the value indicator to show the completed percentage of the task while the ProgressRing just shows the indeterminate progress by displaying animated ring.

This control is mostly used in the background loading of the content on the web or in the database. The following UI shows the ProgressRing control ( just represents that the data's loading).

 

 

 

Property - IsActive

It has only one main property - set IsActive as true and the animation is started; set IsActive as false and the animation is stopped.

 

Note

• true - Control is animated, and visible to the user
• false - Control is hidden and the animation has stopped. 

Let's see one simple example

 

Concept - Add two buttons - Start and Stop. If the user presses the Start button, the animation gets started. And, when the Stop button is pressed, it stops the animation. Here is the code for the same.

#include "pch.h"

using namespace winrt;
using namespace Windows::ApplicationModel;
using namespace Windows::ApplicationModel::Activation;
using namespace Windows::Foundation;
using namespace Windows::UI;
using namespace Windows::UI::Xaml;
using namespace Windows::UI::Xaml::Controls;
using namespace Windows::UI::Xaml::Controls::Primitives;
using namespace Windows::UI::Xaml::Interop;
using namespace Windows::UI::Xaml::Navigation;
using namespace Windows::UI::Xaml::Media;
using namespace Windows::Media;
using namespace Windows::Media::Core;
using namespace Windows::Storage;
using namespace Windows::Storage::Pickers;


struct App :ApplicationT<App>
{
    TextBlock txtStatus;

    ProgressRing proRing;

    IInspectable CreateInspectable(hstring strCaption)
    {
        return PropertyValue::CreateString(strCaption);
    }

    void BtnClick(IInspectable const & sender, const RoutedEventArgs &args)
    {

        Button btnTag = sender.as<Button>();

        auto demo = btnTag.Tag();

        IPropertyValue tagId = btnTag.Tag().as<IPropertyValue>();

        if (tagId.GetInt16() == 1)
        {
            proRing.IsActive(true);
        }
        else if (tagId.GetInt16() == 2)
        {
            proRing.IsActive(false);
        }
    }

    TextBlock CreateTextBlock(hstring text)
    {
        TextBlock txtBlock;
        txtBlock.Text(text);
        txtBlock.FontFamily(FontFamily(L"Segoe UI Semibold"));
        txtBlock.TextAlignment(TextAlignment::Left);
        txtBlock.FontSize(35);
        txtBlock.Foreground(SolidColorBrush(Colors::Brown()));
        txtBlock.Margin(CreateThickness(10, 10, 0, 0));
        return txtBlock;
    }

    Thickness CreateThickness(int left, int top, int right, int bottom)
    {
        Thickness thick;
        thick.Left = left;
        thick.Top = top;
        thick.Right = right;
        thick.Bottom = bottom;
        return thick;
    }


    void OnLaunched(LaunchActivatedEventArgs const&)
    {

        Button BtnIncrease, BtnDecrease, BtnError;
        auto captionText = PropertyValue::CreateString(L"Start");
        BtnIncrease.Content(captionText);
        BtnIncrease.Click({ this,&App::BtnClick });
        BtnIncrease.Margin(CreateThickness(20, 10, 0, 0));
        BtnIncrease.Tag(PropertyValue::CreateInt32(1));

        captionText = PropertyValue::CreateString(L"Stop");
        BtnDecrease.Content(captionText);
        BtnDecrease.Click({ this,&App::BtnClick });
        BtnDecrease.Margin(CreateThickness(20, 10, 0, 0));
        BtnDecrease.Tag(PropertyValue::CreateInt32(2));

        auto txtheader = CreateTextBlock(L"ProgressRing Sample(Modern C++/WinRT)");
        txtheader.FontSize(25);

        StackPanel btnPanel;
        btnPanel.Orientation(Orientation::Horizontal);
        btnPanel.Children().Append(BtnIncrease);
        btnPanel.Children().Append(BtnDecrease);



        StackPanel sContentPanel;
        sContentPanel.Children().Append(btnPanel);
        sContentPanel.Orientation(Orientation::Vertical);
        sContentPanel.VerticalAlignment(VerticalAlignment::Top);

        proRing.IsActive(true);
        proRing.Width(100);
        proRing.Height(100);
        proRing.Margin(CreateThickness(20, 10, 0, 0));

        proRing.Background(SolidColorBrush(Colors::Yellow()));
        proRing.VerticalAlignment(VerticalAlignment::Center);
        proRing.HorizontalAlignment(HorizontalAlignment::Left);

        StackPanel mainPanel;
        mainPanel.Children().Append(sContentPanel);
        mainPanel.Children().Append(txtheader);
        mainPanel.Children().Append(proRing);



        Window window = Window::Current();
        window.Content(mainPanel);
        window.Activate();


    }
};

int __stdcall wWinMain(HINSTANCE, HINSTANCE, PWSTR, int)
{
    Application::Start([](auto &&) {make<App>(); });
    return 0;
}

output

 

The sample code is given here.

Conclusion

I hope you understood how to use ProgressRing control.