ProgressRing
There are two implementations of the ProgressRing
control available in Uno:
Uno Platform provides two versions of the ProgressRing
control:
Microsoft.UI.Xaml.Controls.ProgressRing
- "WUXProgressRing
" - implementation based on the built-in control in Universal Windows Platform, with support for both native & UWP styling.Microsoft.UI.Xaml.Controls.ProgressRing
- "MUXProgressRing
", implementation based on WinUI 2.x and WinUI 3 (see here, powered by Lottie animations.
Control | iOS | macOS | Android | WASM | Skia (GTK, WPF, FrameBuffer, Tizen) |
---|---|---|---|---|---|
MUX ProgressRing |
✔ | ✔ | ✔ | ✔ | ✔ |
WUX ProgressRing |
✔ | ✔ | ✔ | ✔ | ✔ |
Using the Microsoft.UI.Xaml.Controls.ProgressRing
This version comes with WinUI 2.x and WinUI 3 and is using an <AnimatedVisualPlayer />
in its Control Template. It is also designed to be a replacement for the legacy version, where a custom template should work unchanged with this control.
Important
To use the refreshed visual style, you must reference the Lottie package in your projects, or the ring will not be displayed.
Using the Microsoft.UI.Xaml.Controls.ProgressRing
This control works on all platforms and uses the native progress ring control by default, with the exception of Wasm where there is no native progress ring control.
Note
In WinUI-based Uno Platform apps, this control is in the Uno.UI.Controls.Legacy
namespace instead.
Native styles
On Android and iOS, the WUX ProgressRing
uses native controls by default (UIActivityIndicatorView
on iOS and ProgressBar
on Android). To use the UWP rendering on these targets, you can explicitly apply the DefaultWuxProgressRingStyle
Style:
<ProgressRing Style="{StaticResource DefaultWuxProgressRingStyle}" />
Platform-specific usage
To use the MUX ProgressRing
on non-Skia targets and WUX ProgressRing
on Skia targets you can utilize platform-specific XAML syntax:
<Page
...
mux="using:Microsoft.UI.Xaml.Controls"
not_skia="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
skia="http://uno.ui/skia"
mc:Ignorable="d skia">
<Grid>
<skia:Border>
<ProgressRing />
</skia:Border>
<not_skia:Border>
<mux:ProgressRing />
</not_skia:Border>
</Grid>
</Page>