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

Question

我正在尝试添加新的 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 不同。

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

Nuget 包版本:

• 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}

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

Answer 1

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

该控件的渲染是通过 Lottie 完成的，为了避免添加不需要的依赖项，特别是在 Android 上，此依赖项位于可选包中。