WinUI 3 crash issue when Progress Ring Initiliazes in Visual Studio 2022

Question

Edit 3: Complete project if anybody wants to check

https://github.com/sumnoon/ProgressRingSample_WinUI3

Edit 2: Added Complete code

Edit: Added the code I am trying to use as sample

I am trying to add progress ring in WinUI 3 sample app. The plan is simple, add a button and when clicked show a progress ring.

I have intialized the progress ring similar to this. This is the XAML code for ProgressRingControl.xaml,

<UserControl
x:Class="progress_sample.ProgressRingControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:progress_sample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Grid VerticalAlignment="Stretch"
      HorizontalAlignment="Stretch">

    <Grid x:Name="IndeterminateProgressPanel"
        Background="LightGray"
        Opacity=".5">
    </Grid>

    <ProgressRing x:Name="IndeterminateProgress"
                  Foreground="Red"
                  Width="65"
                  Height="65" />
</Grid>

And this the code for ProgressRingControl.xaml.cs,

    using Microsoft.UI.Xaml;
    using Microsoft.UI.Xaml.Controls;
    using Microsoft.UI.Xaml.Controls.Primitives;
    using Windows.UI.Core;

namespace progress_sample
{
    public sealed partial class ProgressRingControl : UserControl
    {
        private Popup popup = null;
        public ProgressRingControl()
        {
            this.InitializeComponent();
            SystemNavigationManager.GetForCurrentView().BackRequested += ProgressRingControl_BackRequested;
            Window.Current.CoreWindow.SizeChanged += CoreWindow_SizeChanged;

            popup = new Popup
            {
                Child = this
            };
        }

        public static ProgressRingControl Instance
        {
            get { return Singleton<ProgressRingControl>.Instance; }
        }

        private void CoreWindow_SizeChanged(CoreWindow sender, Windows.UI.Core.WindowSizeChangedEventArgs args)
        {
            UpdateUI();
        }

        private void UpdateUI()
        {
            var bounds = Window.Current.Bounds;
            this.Width = bounds.Width;
            this.Height = bounds.Height;
        }

        private void ProgressRingControl_BackRequested(object sender, BackRequestedEventArgs e)
        {
            //HideProgressRing();
        }
        public void ShowProgressRing()
        {
            IndeterminateProgress.IsActive = true;
            popup.IsOpen = true;
            UpdateUI();
        }

        public void HideProgressRing()
        {
            if (popup.IsOpen)
            {
                IndeterminateProgress.IsActive = false;
                popup.IsOpen = false;
                SystemNavigationManager.GetForCurrentView().BackRequested -= ProgressRingControl_BackRequested;
                Window.Current.CoreWindow.SizeChanged -= CoreWindow_SizeChanged;
            }
        }
    }
}

I am calling this From MainWindow.xaml using a button in such a way that when button is clicked the progress ring should show for 1000ms than hide. I have added MainWindow.xaml and MainWindows.xaml.cs code also, MainWindow.xaml code:

    <Window
    x:Class="progress_sample.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:progress_sample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <Button x:Name="myButton" Click="myButton_Click">Click Me</Button>
    </StackPanel>
</Window>

And MainWindow.xaml.cs code is given below,

using Microsoft.UI.Xaml;
using System.Threading.Tasks;


namespace progress_sample
{

    public sealed partial class MainWindow : Window
    {
        public MainWindow()
        {
            this.InitializeComponent();
        }

        private async void myButton_Click(object sender, RoutedEventArgs e)
        {
            ProgressRingControl.Instance.ShowProgressRing();
            await Task.Delay(1000);
            ProgressRingControl.Instance.HideProgressRing();
        }
    }
}

But during initialization of ProgressRingControl, it is crashing and gives this error,

Attempted to read or write protected memory. This is often an indication that other memory is corrupt.

Any help?

Answer 1

This is one of the easiest way that I can think of.

<Window
    x:Class="ProgressRingTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <StackPanel>
        <ToggleButton
            x:Name="ToggleButtonControl"
            Checked="ToggleButtonControl_Changed"
            Content="Toggle Button"
            Unchecked="ToggleButtonControl_Changed" />
        <ProgressRing
            x:Name="ProgressRingControl"
            IsIndeterminate="False" />
    </StackPanel>

</Window>

using Microsoft.UI.Xaml;

namespace ProgressRingTest;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    private void ToggleButtonControl_Changed(object sender, RoutedEventArgs e)
    {
        this.ProgressRingControl.IsIndeterminate = this.ToggleButtonControl.IsChecked ?? false;
    }
}

UPDATE

This is another way to do to achieve what you said in your comments. In this case, I'm creating an UserControl. I'm also using the CommunityToolkit.Mvvm NuGet package to demonstrate a way to run a process in the back.

PopupWithProgressRing.xaml.cs

using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using System.Threading.Tasks;

namespace PopupTest;

public sealed partial class PopupWithProgressRing : UserControl
{
    public static readonly DependencyProperty IsOpenProperty = DependencyProperty.Register(
        nameof(IsOpen),
        typeof(bool),
        typeof(PopupWithProgressRing),
        new PropertyMetadata(false, OnIsOpenPropertyChanged));

    public PopupWithProgressRing()
    {
        this.InitializeComponent();
    }

    public bool IsOpen
    {
        get => (bool)GetValue(IsOpenProperty);
        set => SetValue(IsOpenProperty, value);
    }

    private static async void OnIsOpenPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (d is PopupWithProgressRing self &&
            e.NewValue is bool value)
        {
            // The ProgressRing won't freezes in the 2nd run without this delay.
            // Probably a WinUI 3 bug. I'll report to the WinUI 3 later.
            await Task.Delay(100);
            self.ProgressRingControl.IsIndeterminate = value;
        }
    }
}

PopupWithProgressRing.xaml

<UserControl
    x:Class="PopupTest.PopupWithProgressRing"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:PopupTest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Popup
            x:Name="ProgressRingPopup"
            VerticalAlignment="Top"
            IsOpen="{x:Bind IsOpen, Mode=OneWay}">
            <StackPanel>
                <ProgressRing x:Name="ProgressRingControl" />
            </StackPanel>
        </Popup>
    </Grid>
</UserControl>

MainWindowViewModel.cs

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Threading.Tasks;

namespace PopupTest;

public partial class MainWindowViewModel : ObservableObject
{
    [RelayCommand]
    // The CommunityToolkit.Mvvm will automatically generate
    // a "RunProcessCommand" for you.
    private async Task RunProcess()
    {
        await Task.Delay(3000);
    }
}

MainWindow.xaml.cs

using Microsoft.UI.Xaml;

namespace PopupTest;

public sealed partial class MainWindow : Window
{
    public MainWindow()
    {
        this.InitializeComponent();
    }

    public MainWindowViewModel ViewModel { get; } = new MainWindowViewModel();
}

MainWindow.xaml

<Window
    x:Class="PopupTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="using:PopupTest"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <ToggleButton
            Command="{x:Bind ViewModel.RunProcessCommand}"
            Content="Run process" />

        <local:PopupWithProgressRing
            x:Name="ProgressRingPopup"
            IsOpen="{x:Bind ViewModel.RunProcessCommand.IsRunning, Mode=OneWay}" />
    </Grid>
</Window>