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 包版本：
- 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}
我该如何解决这个问题？谢谢。
要使用 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 版回答这个问题的地方。
我正在尝试添加新的 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 包版本：
- 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}
我该如何解决这个问题？谢谢。
要使用 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 版回答这个问题的地方。