WinUI ProgressRing 不在 WASM 上显示 (Uno 2.4)

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

我正在尝试添加新的 WinUI 2.4 ProgressRing。它在 UWP 应用程序上完美运行,但在 WASM 中不显示。

我的App.xaml和Mainpage.xaml是:

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>

运行 在 UWP 中完美:

这里没有任何可用的 ProgressRing,与 UWP 不同。

Uno Platform 2.3 blog article 所述,ProgressRing 在 WASM 上不可用,就像在 UWP 上一样。应该是。

Nuget 包版本:

我该如何解决这个问题?谢谢。

要使用 ProgressRing 控件,您的项目负责人需要引用 Uno.UI.Lottie 包。

此控件的呈现是通过 Lottie 完成的,并且为了避免添加不需要的依赖项,特别是在 Android 上,此依赖项在可选包中。

Uno.Platform 4 的更新:ProgressRing 作为 Windows.UI.Xaml 控件已过时(在 WASM 中)。但是,WinUI3版本是内置在Uno中的,你只需要参考它就可以了!

首先,将 WinUI3 命名空间(用于 ProgressRing)添加到托管 ProgressRing 的页面:

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

然后在您的 ProgressRing 标签前添加新创建的 WinUI3 命名空间:

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

这里是 GitHub issue Uno 开发团队针对 4.0 版回答这个问题的地方。