WinUI ProgressRing Don't Show on WASM (Uno 2.4)

Question

I'm trying to add the new WinUI 2.4 ProgressRing. It works perfectly on UWP app but not show in WASM.

My App.xaml and Mainpage.xaml is:

App.xaml:

<Application
    x:Class="ACM_Search_Uno.WinUI.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ACM_Search_Uno.WinUI">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
            </ResourceDictionary.MergedDictionaries>
            <Color x:Key="SystemAccentColor">#FFCB2128</Color>
            <Color x:Key="AcmGreen">#FFB8C282</Color>
            <Color x:Key="AcmPink">#FFE672A4</Color>
            <Color x:Key="AcmPurple">#FF71749E</Color>
            <Thickness x:Key="PivotItemMargin">0</Thickness>

        </ResourceDictionary>

    </Application.Resources>
</Application>

MainPage.xaml:

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ACM_Search_Uno.WinUI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    x:Class="ACM_Search_Uno.WinUI.MainPage"
    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d">
    <Page.Resources>



    </Page.Resources>


    <ScrollViewer x:Name="MainScroller" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">


        <Grid x:Name="MainGrid">
            <Grid.Background>
                <SolidColorBrush Color="{StaticResource AcmGreen}"/>
            </Grid.Background>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <Grid x:Name="Footer" Grid.Row="2" >
                <Grid.Background>
                    <SolidColorBrush Color="{StaticResource AcmPurple}"/>
                </Grid.Background>

                <Button x:Name="HelpButton"  Margin="10,5,0,5"  Content="Yardım"  FontSize="16" Foreground="White" Background="#FF71749E" FontFamily="Noto Sans Display" FontWeight="SemiLight" Click="HelpButton_ClickAsync"  />

            </Grid>
            <Grid x:Name="Body" Margin="0,0,0,0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.RowSpan="2" >
                <Grid x:Name="SearchGrid" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <StackPanel x:Name="LogoStackPanel" Orientation="Vertical" Margin="0,10,0,10">
                        <Image x:Name="AppLogo" Source="/Assets/acm_logo.png" Width="300" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,10"/>
                        <TextBlock x:Name="HeaderTextBlock" Text="Anahtar Kelime Arama Motoru" TextWrapping="NoWrap" Style="{StaticResource HeaderTextBlockStyle}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,10,0,0" Foreground="#FF343434" TextAlignment="Center" FontStretch="Normal" FontSize="24" FontStyle="Normal" FontFamily="Noto Sans Display" FontWeight="Light"/>




                    </StackPanel>
                    <AutoSuggestBox x:Name="KeywordSearchBox" CornerRadius="2,2,2,2" QueryIcon="Find" RequestedTheme="Dark" PlaceholderText="Lütfen anahtar kelimeyi buraya yazın" VerticalAlignment="Stretch" FontFamily="Noto Sans Display" FontWeight="Normal" FontSize="16" MinWidth="350" Margin="0,10,0,10" Grid.Row="1" MaxWidth="350"/>
                    <StackPanel x:Name="SearchButtonStack" Margin="0,10,0,10" Grid.Row="2">
                        <Button x:Name="SearchButton" Content="Ara" Foreground="#FF343434" Margin="0,10,0,10" HorizontalAlignment="Center" FontSize="16" Click="SearchButton_ClickAsync" CornerRadius="5,5,5,5" FontFamily="Noto Sans Display" FontWeight="Bold" VerticalContentAlignment="Center" VerticalAlignment="Center" MinWidth="150" MinHeight="37.5">
                            <Button.Background>
                                <SolidColorBrush Color="{StaticResource AcmPink}"/>
                            </Button.Background>
                        </Button>
                        <StackPanel x:Name="LanguageChangeStackPanel" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,10,0,10">
                            <TextBlock x:Name="LanguageSwitchHeaderTextBlock" Text="Dil:" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,10,0" FontSize="16" Foreground="#FF343434" FontFamily="Noto Sans Display" FontWeight="SemiBold"/>
                            <ToggleSwitch x:Name="LanguageToggleSwitch" OnContent="English"  OffContent="Türkçe" BorderThickness="2,2,2,2" Margin="10,0,0,0" FontSize="16" Toggled="LanguageToggleSwitch_OnToggledAsync" RequestedTheme="Default" Foreground="#FF343434" FontFamily="Noto Sans Display" FontWeight="Medium"/>

                        </StackPanel>

                    </StackPanel>




                </Grid>




            </Grid>
            <Grid x:Name="WaiterGrid" Background="#FF343434" Visibility="Collapsed" Grid.RowSpan="3">
                <Grid x:Name="Waiter_Item" Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <controls:ProgressRing x:Name="Waiter" Width="50" Height="50" >
                        <controls:ProgressRing.Foreground>
                            <SolidColorBrush Color="{StaticResource AcmPink}"/>
                        </controls:ProgressRing.Foreground>
                        <controls:ProgressRing.Background>
                            <SolidColorBrush Color="{StaticResource AcmPurple}"/>
                        </controls:ProgressRing.Background>
                    </controls:ProgressRing>


                    <TextBlock x:Name="WaiterLabel" x:Uid="Waiter_Label" TextWrapping="Wrap" Text="İşlem Yapılıyor..." VerticalAlignment="Center" Grid.Row="1" Style="{StaticResource SubtitleTextBlockStyle}" Margin="0,20,0,0" FontWeight="Light" Foreground="#FFE2E2E2" FontFamily="Noto Sans Display" FontSize="22"/>
                </Grid>
            </Grid>
        </Grid>
    </ScrollViewer>
</Page>

Running perfectly in UWP:

No any ProgressRing is available at here, different from UWP.

ProgressRing is not available on WASM as described in Uno Platform 2.3 blog article , like on UWP. It should be.

Nuget Package Version(s):

• Uno.UI.RemoteControl {2.4.0}
• Uno.Wasm.Bootstrap {1.2.0}
• Uno.Wasm.Bootstrap.DevServer {1.2.0}
• Microsoft.Extensions.Logging.Filter {1.1.2}
• Microsoft.Extensions.Logging.Con... {1.1.1}
• NETStandard.Library {2.0.3}
• Uno.UI {2.4.0}
• Microsoft.NETCore.UniversalWindo... {6.2.10}
• Microsoft.Extensions.Logging.Con... {1.1.1}
• Microsoft.Extensions.Logging.Filter {1.1.2}
• Microsoft.UI.Xaml {2.4.0}
• Uno.Core {2.0.0}

How can I fix this? Thanks.

Answer 1

To use the ProgressRing control, your project heads need to have a reference to the Uno.UI.Lottie package.

The rendering of this control is done through Lottie, and to avoid adding unwanted dependencies, particularly on Android, this dependency in an optional package.

Answer 2

Update for Uno.Platform 4 : ProgressRing is obsolete (in WASM) as a Windows.UI.Xaml control. However, the WinUI3 version is built into Uno - you just need to reference it!

First, add the WinUI3 namespace (for the ProgressRing) to the page that is hosting the ProgressRing:

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

and then prefix your ProgressRing tag with your newly minted WinUI3 namespace:

<muxc:ProgressRing Grid.Row="1" Height="100" Width="100" IsActive="True" />

Here's the GitHub issue where the Uno dev team answers this question for version 4.0.