WinUI Bug: Progress rings do not display in content dialogs in Windows 11

[MB-Xer]

WinUI Toolkit Bug Report

---

Name of component or part of Toolkit: ProgressRing ContentDialog

Describe the bug: Progress rings do not display inside Content Dialogs in Windows 11 when created programmatically. This is also true when created in XAML but the results vary. For example, if the content dialog is created in XAML but the progress ring is created and added to the dialog programmatically, it will sometimes work. It will almost always work when the ring is added to the dialog after the dialog appears on screen, e.g. using the ContentDialog.Opened event.

Version Info: started using in ver 2.6.1 but still seeing issue in 2.7

Additional context: Using the new styling, progress rings no longer show in content dialogs.

This is also true in Windows 10 when both the content dialog and the progress ring are created in XAML, and the ProgressRing.IsIndeterminate property is set to true. If ProgressRing.IsIndeterminate is set to 'false' and progress is manually reported, it will work correctly.

This is also true when using old style progress bars in new style content dialogs in Windows 11, but will work when progress is manually reported much like the progress ring issue mentioned above in Windows 10.

This is also true when using the old style progress rings in the new style content dialogs in Windows 11.

New style progress bars seem to work as expected.

[alejo4000]

Hi @MB-Xer , is this an issue you saw with the Figma toolkit? From the description, it sounded like this is an issue with XAML or with the implemented components themselves?

[MB-Xer]

Thanks @alejo4000. This does not have to do with the Figma toolkit. This is an issue I noticed in a UWP app when placing a Microsoft.UI.Xaml.Controls.ProgressRing inside of a Microsoft.UI.Xaml.Controls.ContentDialog and is specific to Windows 11.

The only necessary steps to reproduce this are to install and set up the Microsoft.UI.Xaml Nuget package, programmatically create a content dialog with a progress ring as its content (making sure both controls are from the Microsoft.UI.Xaml namespace), and display the dialog on a Windows 11 box. The dialog will appear but the progress ring does not.

I did make a bit of progress narrowing down a potential cause. In the Microsoft.UI.Xaml.Controls.ContentDialog styling found here: https://github.com/microsoft/microsoft-ui-xaml/blob/main/dev/CommonStyles/ContentDialog_themeresources.xaml, there is a new Rectangle overlay named "SmokeLayerBackground" (line 236). If I change that to a Grid and set the background of the grid to the same ContentDialogSmokeFill resource, everything seems to work fine. I don't have an explanation why that would cause an issue in Windows 11 specifically or why changing it to a Grid fixes it.

[alejo4000]

I'm redirecting this and updating the title so it will be seen by the correct team.

[ArchieCoder]

Wow, I was going nuts with this bug. This is not even related with being dynamically created.

It happens on my side when I use the new ContentDialog style. If I remove the new style, the ProgressRing appears as expected.

Even more weird, I created a sample app this afternoon (before seeing this bug) using the latest Msft.XAML 2.7 and I can't repro.

[fredemmott]

I'm also seeing this with winui 3 from windows app sdk 1.1 on windows 10; it's possible to make it work by 'poking' it a bit - for example, if I use it with a fixed value and increase the value over time, it works after the first few updates. For indeterminate mode, this makes it start working:

    progressRing.IsIndeterminate(false);
    progressRing.IsActive(true);
    progressRing.Value(0);
    co_await winrt::resume_after(std::chrono::milliseconds(100));
    co_await uiThread;
    progressRing.Value(100);
    progressRing.IsIndeterminate(true);

[shelllet]

any news about this bug?

[ArchieCoder]

@shelllet it's fixed in the latest update

[shelllet]

@shelllet it's fixed in the latest update @ArchieCoder why my application do not display ProgressRing control in content dialogs, the version of WindowsAppSdk i used is 1.1.4.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
      <ProgressRing IsActive="True" Width="100" Height="100" Foreground="Green" IsIndeterminate="True"></ProgressRing>
</StackPanel>

[ArchieCoder]

@shelllet oh sorry, it is fixed for UWP apps. However, with your info about WinAppSdk, this is for a WinUI app. Good luck!

[AFriendlyGuy]

It seems it still does not work in WindowsAppSdk 1.2.4. Will this be fixed for WinUI 3 at all?

Here is fredemmott's workaround translated to c#:

    private async Task BugWorkaround() {
        this.progressRing.IsIndeterminate = false;
        this.progressRing.IsActive = false;
        await Task.Delay(System.TimeSpan.FromMilliseconds(100));
        this.progressRing.IsActive = true;
        this.progressRing.IsIndeterminate = true;
    }

I call this method in the constructor of the control (without await obviously).

[Zulu-Inuoe]

It's been almost two years. It's a spinner in a dialog box. Seriously?

[gwalschlager]

Still not working in Win SDK!

[Scenteniarium]

It seems it still does not work in WindowsAppSdk 1.2.4. Will this be fixed for WinUI 3 at all?

Here is fredemmott's workaround translated to c#:

    private async Task BugWorkaround() {
        this.progressRing.IsIndeterminate = false;
        this.progressRing.IsActive = false;
        await Task.Delay(System.TimeSpan.FromMilliseconds(100));
        this.progressRing.IsActive = true;
        this.progressRing.IsIndeterminate = true;
    }

I call this method in the constructor of the control (without await obviously).

Oh my god. It's been three (3) years and this is the only workaround that works. They haven't fixed it since this issue is created.

[JanRajnoha]

@duncanmacmichael could we get some info from team here?

[kmgallahan]

I see no ProgressRing issues using Windows 10 & WASDK 1.5.240205001-preview1. I'm not sure if and when this was an issue in earlier releases on Windows 10.

Others may want to confirm that this is still a problem with the latest WASDK .5.240205001-preview1 release on Windows 11 only.

[ArchieCoder]

In my UWP app, there are occasions that my radio buttons don't have the selected dot when it is checked. I suspect a bug under the hood that makes all these weird UI bugs happening.

[duncanmacmichael]

@duncanmacmichael could we get some info from team here?

Hi, we do have an internal bug item opened for this and are tracking it, but other than that I don't have any updates from the team at this time. Thanks for checking!

[JanRajnoha]

Thank you for info and I have one request for you. I know it could be really time consuming to reply to every bug, but could be possible to sometimes answer for replies? It could help raise trust in team they are working on something. Thank you very much

[JJBrychell]

A fix for this has been submitted and should be available in the 1.6 release.

There is a known issue with Loading/Loaded/Unload events that can cause an unloaded event to be fired when the element is in the tree. This happens when an element is removed and readded to the tree in a single frame. That is what is happening here. The content dialog is remove and re-added to the tree to adjust z-order with the smoke layer causing the situation to arise.

The fix for the erroneous event is most likely too much of a breaking change for a dot release, so we have worked around it and in the color picker's Unloaded event we only discard the ring animation if the element was not added back.