Windows.UI.Xaml.Controls.ProgressRing

November 30, 2023 · View on GitHub

-description

Represents a control that indicates that an operation is ongoing. The typical visual appearance is a ring-shaped "spinner" that cycles an animation as progress continues.

Equivalent WinUI 2 API for UWP: Microsoft.UI.Xaml.Controls.ProgressRing (for WinUI in the Windows App SDK, see the Windows App SDK namespaces).

-xaml-syntax

<ProgressRing .../>

-remarks

Tip

For more info, design guidance, and code examples, see [Progress controls.

ProgressRing is a control that indicates indeterminate progress by displaying an animated ring.

Progress ring control

Use a ProgressRing to visually indicate that an operation is in progress. Set the IsActive property to turn the ProgressRing on or off. If IsActive is false, the ProgressRing is not shown, but space is reserved for it in the UI layout. To not reserve space for the ProgressRing, set its Visibility property to Collapsed.

Control style and template

You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available locally with the SDK or NuGet package installation.

  • WinUI Styles (recommended): Use Microsoft.UI.Xaml.Controls.ProgressRing.
  • Non-WinUI styles: For built-in styles, see %ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\<SDK version>\Generic\generic.xaml.

Locations might be different if you customized the installation. Styles and resources from different versions of the SDK might have different values.

XAML also includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. Modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the XAML styles article. Light-weight styling resources are available starting in Windows 10, version 1607 (SDK 14393).

Notes for previous versions

Windows 8.x In an app compiled for Windows 8, when the ProgressRing is active, the progress animation continues even if its not visible on the screen, such as when its Visibility is Collapsed. This can keep the UI thread awake, use resources, and impair app performance. When the ProgressRing is not visible, you should disable the animation by setting IsActive to false.

-examples

Tip

For more info, design guidance, and code examples, see [Progress controls.

If you have the WinUI 2 Gallery app installed, click here to open the app and see the ProgressRing in action.

This example shows how to set the IsActive property of a ProgressRing in code. A ToggleSwitch is used to turn theProgressRing control on or off.

            <StackPanel Orientation="Horizontal">
                <ToggleSwitch Header="Toggle Switch Example" OffContent="Do work" 
                              OnContent="Working" Toggled="ToggleSwitch_Toggled"/>  
                <ProgressRing x:Name="progress1"/>
            </StackPanel>
        private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
        {
            ToggleSwitch toggleSwitch = sender as ToggleSwitch;
            if (toggleSwitch != null)
            {
                if (toggleSwitch.IsOn == true)
                {
                    progress1.IsActive = true;
                    progress1.Visibility = Visibility.Visible;
                }
                else
                {
                    progress1.IsActive = false;
                    progress1.Visibility = Visibility.Collapsed;
                }
            }
        }

-see-also

Progress controls overview, ProgressBar, Controls list, Controls by function