fix: Update `ProgressRing` styles to match WinUI

[morning4coffe-dev]

GitHub Issue (If applicable): closes #18011

PR Type

What kind of change does this PR introduce?

• Bugfix

What is the current behavior?

The ProgressRing uses old styles to render with Fluent design.

What is the new behavior?

The ProgressRing is matching the fluent style.

PR Checklist

Please check if your PR fulfills the following requirements:

• [ ] Docs have been added/updated which fit documentation template (for bug fixes / features)
• [ ] Unit Tests and/or UI Tests for the changes have been added (for bug fixes / features) (if applicable)
• [ ] Validated PR Screenshots Compare Test Run results.
• [x] Contains NO breaking changes
• [x] Associated with an issue (GitHub or internal) and uses the automatic close keywords.
• [x] Commits must be following the Conventional Commits specification.

[unodevops]

🤖 Your WebAssembly Sample App stage site is ready! Visit it here: https://unowasmprstaging.z20.web.core.windows.net/pr-18018/index.html

[unodevops]

🤖 Your Docs stage site is ready! Visit it here: https://unodocsprstaging.z13.web.core.windows.net/pr-18018/index.html

[nventive-devops]

The build 137418 found UI Test snapshots differences: android-28-net8: 20, android-28-net8-Snap: 49, ios: 7, ios-Snap: 30, skia-gtk-screenshots: 22, skia-linux-screenshots: 21, skia-windows-screenshots: 47, wasm: 329, wasm-automated-net8.0-UWP-Default-automated: 16, wasm-automated-net8.0-UWP-RuntimeTests-0: 0, wasm-automated-net8.0-UWP-RuntimeTests-1: 0, wasm-automated-net8.0-UWP-RuntimeTests-2: 0, wasm-automated-net8.0-WinUI-Benchmarks-automated: 0, wasm-automated-net8.0-WinUI-RuntimeTests-0: 0, wasm-automated-net8.0-WinUI-RuntimeTests-1: 0, wasm-automated-net8.0-WinUI-RuntimeTests-2: 0

Details

• android-28-net8: 20 changed over 832

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Button_OverlappedButtons_UITests_Shared_Windows_UI_Xaml_Controls_Button_Overlapped_Buttons
  • DecimalFormatterTest_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
  • Detereminate_ProgressRing_Validation0_[#FF0000_#FF0000_#FF0000_#FF0000]_UITests_Microsoft_UI_Xaml_Controls_ProgressRing_WinUIDeterminateProgressRing
  • Detereminate_ProgressRing_Validation25_[#FF0000_#008000_#FF0000_#FF0000]_Progress-Ring-Value-25
  • ProgressRing_IsEnabled_Running_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • ProgressRing_Visibility_Collapsed_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • ListView_SelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
  • NativeCommandBar_Size_Uno_UI_Samples_Content_UITests_CommandBar_CommandBar_Dynamic
  • NavigateBackAndForthBetweenMenuItemsAndSettings_Fluent_SamplesApp_Samples_Microsoft_UI_Xaml_Controls_NavigationViewTests_FluentStyle_FluentStyle_NavigationViewSample
  • WebView_NavigateToAnchor_Initial
  • WebView_NavigateToLongString_AfterSuccess
  • Detereminate_ProgressRing_Validation50_[#FF0000_#008000_#008000_#FF0000]_Progress-Ring-Value-50
  • UpDownEnabledTest_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
  • When_Parent_PointerMoved_After_drag_on_non-scrolling_ScrollViewer
  • When_Parent_PointerMoved_After_drag_on_ScrollViewer_-_touch
  • Detereminate_ProgressRing_Validation75_[#FF0000_#008000_#008000_#008000]_Progress-Ring-Value-75
  • ImageStretch_None_Uno_UI_Samples_UITests_ImageTestsControl_Image_Stretch_None
  • When_SingleItem_UITests_Windows_UI_Xaml_Controls_SwipeControlTests_SwipeControl_Automated
  • SelectionTest_UITests_Microsoft_UI_Xaml_Controls_RadioButtonsTests_RadioButtonsPage
  • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage

• android-28-net8-Snap: 49 changed over 1065

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Default_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_Margin_On_Container_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_Margin_On_Container
  • Icons_UITests_Shared_Windows_UI_Xaml_Controls_BitmapIconTests_BitmapIcon_Foreground_UITests_Shared_Windows_UI_Xaml_Controls_BitmapIconTests_BitmapIcon_Foreground
  • ListView_ListViewDynamicOrientation_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewDynamicOrientation
  • NavigationView_MUXControlsTestApp_NavigationViewTopNavPage_MUXControlsTestApp_NavigationViewTopNavPage
  • Scrolling_MUXControlsTestApp_ScrollViewKeyboardAndGamepadNavigationPage_MUXControlsTestApp_ScrollViewKeyboardAndGamepadNavigationPage
  • TextBox_Input_InputScope_PersonalFullName_Uno_UI_Samples_Content_UITests_TextBoxControl_Input_InputScope_PersonalFullName
  • TextBox_Input_InputScope_PhoneNumber_Uno_UI_Samples_Content_UITests_TextBoxControl_Input_InputScope_PhoneNumber
  • TextBox_Input_InputScope_Search_Uno_UI_Samples_Content_UITests_TextBoxControl_Input_InputScope_Search
  • ListView_HorizontalListView_Templates_SamplesApp_Windows_UI_Xaml_Controls_ListView_HorizontalListView_Templates
  • MUX_NumberBox_UITests_Shared_Microsoft_UI_Xaml_Controls_NumberBoxTests_NumberBoxPage
  • MUX_UITests_Microsoft_UI_Xaml_Controls_SplitButtonTests_SplitButtonTestsPage_UITests_Microsoft_UI_Xaml_Controls_SplitButtonTests_SplitButtonTestsPage
  • Gesture_Recognizer_Pointer_Events_test_bench_UITests_Shared_Windows_UI_Input_GestureRecognizer_PointersEvents
  • ListView_ListView_With_ListViews_Count_Measure_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_With_ListViews_Count_Measure
  • MediaPlayerElement_Using_3gp_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_3gp_Extension
  • MediaPlayerElement_Using_mp3_Audio_only_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Mp3_Extension
  • MediaPlayerElement_Using_ogg_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Ogg_Extension
  • TeachingTip_UITests_Microsoft_UI_Xaml_Controls_TeachingTipTests_TeachingTipPage_UITests_Microsoft_UI_Xaml_Controls_TeachingTipTests_TeachingTipPage
  • Scrolling_MUXControlsTestApp_ScrollViewWithScrollControllersPage_MUXControlsTestApp_ScrollViewWithScrollControllersPage
  • ToggleSwitch_ToggleSwitch_Header_UITests_Shared_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_Header
  • ToggleSwitch_ToggleSwitch_IsOn_SamplesApp_Windows_UI_Xaml_Controls_ToggleSwitchControl_ToggleSwitch_IsOn

• ios: 7 changed over 268

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • When_SingleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • When_NoSelection_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • ListView_ListViewWithHeader_InitializesTest_SamplesApp_Windows_UI_Xaml_Controls_ListView_HorizontalListViewGrouped
  • TextBox_UpdatedBinding_On_OneWay_Mode_UITests_Windows_UI_Xaml_Controls_TextBox_TextBox_Bindings
  • When_SingleSelectionWithItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • ProgressRing_Visibility_Collapsed_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220
  • ProgressRing_IsEnabled_Running_UITests_Windows_UI_Xaml_Controls_ProgressRing_WindowsProgressRing_GH1220

• ios-Snap: 30 changed over 1056

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Brushes_PanelImageBrush_Uno_UI_Samples_UITests_ImageBrushTestControl_PanelImageBrush
  • Clipping_UITests_Windows_UI_Xaml_Clipping_BorderVisualClipping_UITests_Windows_UI_Xaml_Clipping_BorderVisualClipping
  • MediaPlayerElement_Mini_player_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_Minimal
  • Brushes_GenericApp_Views_Content_UITests_ImageBrushTestControl_ImageBrush_UniformToFill_GenericApp_Views_Content_UITests_ImageBrushTestControl_ImageBrush_UniformToFill
  • Default_Uno_UI_Samples_Content_UITests_WebView_WebView_AnchorNavigation_Uno_UI_Samples_Content_UITests_WebView_WebView_AnchorNavigation
  • Brushes_ImageBrushStretch2_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushStretch2
  • Brushes_ImageBrushStretch_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushStretch
  • Brushes_EllipsemaskingEllipseGrid_Uno_UI_Samples_UITests_ImageBrushTestControl_EllipsemaskingEllipseGrid
  • Brushes_ImageBrushWithScaleTransform_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushWithScaleTransform
  • Brushes_Uno_UI_Samples_UITests_ImageBrushTestControl_DoubleImageBrushInList_Uno_UI_Samples_UITests_ImageBrushTestControl_DoubleImageBrushInList
  • Grid_CenteredGridinGridwiththreefixedsizechildren_Uno_UI_Samples_Content_UITests_GridTestsControl_CenteredGridinGridwiththreefixedsizechildren
  • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Bigger_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Bigger
  • Image_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Equal_Uno_UI_Samples_UITests_Image_Image_Stretch_Alignment_Equal
  • ListView_ListViewHeaderFooterOnly_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewHeaderFooterOnly
  • Grid_Grid_DataBound_ColumnRow_Definitions_Uno_UI_Samples_Content_UITests_GridTestsControl_Grid_DataBound_ColumnRow_Definitions
  • Image_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Vertical_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Algmnt_Inf_Vertical
  • Image_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Alignment_SizeOnControl_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_Image_Stretch_Alignment_SizeOnControl
  • Brushes_ImageBrushAlignmentXY_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushAlignmentXY
  • Image_Image_Stretch_None_ScrollViewer_Uno_UI_Samples_UITests_ImageTestsControl_Image_Stretch_None_Containers
  • ListView_ListView_Image_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListView_Image

• skia-gtk-screenshots: 22 changed over 2216

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • RectanglemaskingRectangleGrid.png
  • BorderImageBrushRelativeTransform.png-dark
  • BorderImageBrushRelativeTransform.png
  • ImageBrushStretch2.png
  • Using .ogg.png-dark
  • Using .ogg.png
  • ImageBrush_UniformToFill.png
  • Rectangle.png-dark
  • Rectangle.png
  • ImageBrushAlignmentXY2.png-dark
  • ImageBrushAlignmentXY2.png
  • ImageBrushChangingCornerRadius.png
  • BorderImageBrush.png-dark
  • BorderImageBrush.png
  • Path_Geometries.png-dark
  • Path_Geometries.png
  • PasswordBox_AutoFill.png-dark
  • PasswordBox_AutoFill.png
  • Mini player.png-dark
  • Mini player.png

• skia-linux-screenshots: 21 changed over 2216

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Ellipse.png-dark
  • Ellipse.png
  • ImageBrush_SameWithDelay.png-dark
  • ImageBrush_SameWithDelay.png
  • Image_Stretch_None.png-dark
  • Image_Stretch_None.png
  • Image_UseTargetSize.png-dark
  • Image_UseTargetSize.png
  • ImagesInlineInFlipView.png-dark
  • ImagesInlineInFlipView.png
  • EllipsemaskingEllipseSuperpositionPanel.png
  • ImageBrushInList.png-dark
  • ImageBrushInList.png
  • RectangleStretchFill.png-dark
  • RectangleStretchFill.png
  • Mini player.png-dark
  • Mini player.png
  • ImageWithLateSourceUniformToFill.png-dark
  • ImageWithLateSourceUniformToFill.png
  • Using .ogg.png-dark

• skia-windows-screenshots: 47 changed over 2216

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • DoubleImageBrushInList.png-dark
  • DoubleImageBrushInList.png
  • BorderImageBrushRelativeTransform.png
  • ImagesInlineInFlipView.png-dark
  • ImagesInlineInFlipView.png
  • ImageSourceUrlMsAppDataScheme.png-dark
  • ImageSourceUrlMsAppDataScheme.png
  • BorderImageBrushRelativeTransform.png-dark
  • ImageBrushInList.png-dark
  • ImageBrushInList.png
  • ImageWithLateSourceUniformToFill.png-dark
  • ImageWithLateSourceUniformToFill.png
  • Image_Stretch_None_ScrollViewer.png-dark
  • Image_Stretch_None_ScrollViewer.png
  • Image_UseTargetSize.png-dark
  • Image_UseTargetSize.png
  • ImageBrush_UniformToFill.png-dark
  • ImageBrush_UniformToFill.png
  • ImageIconPage.png-dark
  • ImageIconPage.png

• wasm: 329 changed over 1043

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • GenericApp.Views.Samples.Shared.Content.UITests.GridViewMultipleSelectionMode
  • MUXControlsTestApp.HierarchicalNavigationViewMarkup
  • MUXControlsTestApp.NavigationViewIsPaneOpenPage
  • MUXControlsTestApp.SwipeControlClearPage
  • SamplesApp.Samples.Windows_UI_Xaml_Controls.NavigationViewTests.NavigationView_Pane_Automated
  • SamplesApp.Wasm.Windows_UI_Xaml_Controls.ComboBox.ComboBox_CornerRadius
  • SamplesApp.Wasm.Windows_UI_Xaml_Controls.ComboBox.ComboBox_With_ItemContainerStyle
  • SamplesApp.Windows_UI_Xaml_Controls.ListView.ListViewLargeHeader
  • SamplesApp.Windows_UI_Xaml_Controls.ListView.ListView_ItemContainerStyleSelector
  • SamplesApp.Windows_UI_Xaml_Shapes.PathTestsControl.PathResizeTest
  • SamplesApp.Windows_UI_Xaml_Shapes.PathTestsControl.PathScrollViewer
  • SamplesApp.Windows_UI_Xaml_Shapes.PathTestsControl.PathTime
  • UITests.Shared.Windows_UI_Xaml.Clipping.ClippingToControlBounds
  • UITests.Shared.Windows_UI_Xaml_Controls.Popup.Popup_LightDismiss
  • UITests.Shared.Windows_UI_Xaml_Controls.Popup.Popup_Overlay_On
  • UITests.Toolkit.ElevatedView_Levels
  • UITests.Windows_UI_Xaml_Controls.CalendarView.CalendarDatePicker_Description
  • UITests.Windows_UI_Xaml_Controls.ListView.ListViewItem_IsEnabled
  • UITests.Windows_UI_Xaml_Controls.ListView.ListView_DuplicateItem
  • UITests.Windows_UI_Xaml_Controls.TextBox.TextBox_Wrapping

• wasm-automated-net8.0-UWP-Default-automated: 16 changed over 1952

  🚨🚨 Comparison Details (first 20) 🚨🚨

  • Brushes_ImageBrushChangingCornerRadius_Uno_UI_Samples_UITests_ImageBrushTestControl_ImageBrushChangingCornerRadius
  • Default_SamplesApp_Wasm_Windows_UI_Xaml_Controls_ListView_ListView_IsSelected_SamplesApp_Wasm_Windows_UI_Xaml_Controls_ListView_ListView_IsSelected
  • ListView_ListViewSelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
  • ListView_ListView_With_ListViews_Count_Measure_UITests_Shared_Windows_UI_Xaml_Controls_ListView_ListView_With_ListViews_Count_Measure
  • MediaPlayerElement_Using_3gp_UITests_Shared_Windows_UI_Xaml_Controls_MediaPlayerElement_MediaPlayerElement_3gp_Extension
  • ListView_SelectedItems_SamplesApp_Windows_UI_Xaml_Controls_ListView_ListViewSelectedItems
  • TestProgressRing_InitialState_UITests_Microsoft_UI_Xaml_Controls_ProgressRing_WinUIProgressRing_Features
  • When_ExtendedSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • When_SingleSelectionWithItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • When_SingleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • When_NoSelectionWithItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • When_NoSelection_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • When_MultipleSelectionWithoutItemClick_Then_PointersEvents_UITests_Windows_UI_Xaml_Controls_ListView_ListView_Selection_Pointers
  • SequentialAnimations_SamplesApp_Windows_UI_Xaml_Media_Animation_SequentialAnimationsPage
  • Windows_Media_MediaPlayer_UITests_Windows_Media_MediaPlayerTests
  • WriteableBitmap_Invalidate_UITests_Shared_Windows_UI_Xaml_Controls_ImageTests_ImageSourceWriteableBitmapInvalidate

• wasm-automated-net8.0-UWP-RuntimeTests-0: 0 changed over 1

• wasm-automated-net8.0-UWP-RuntimeTests-1: 0 changed over 1

• wasm-automated-net8.0-UWP-RuntimeTests-2: 0 changed over 1

• wasm-automated-net8.0-WinUI-Benchmarks-automated: 0 changed over 1

• wasm-automated-net8.0-WinUI-RuntimeTests-0: 0 changed over 1

• wasm-automated-net8.0-WinUI-RuntimeTests-1: 0 changed over 1

• wasm-automated-net8.0-WinUI-RuntimeTests-2: 0 changed over 1