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.