ProgressRing State Transitions Inconsistency Fix (#2120)

* Opacity dependencyProperty to triggers player.stop() * clean up commented out code
microsoft · Mar 17, 2020 · 015cc8e · 015cc8e
1 parent 0d4065f
commit 015cc8e
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 21 deletions.
diff --git a/dev/ProgressRing/ProgressRing.cpp b/dev/ProgressRing/ProgressRing.cpp
@@ -12,20 +12,20 @@
 float GetCircleRadius(double thickness, double actualWidth);
 winrt::float4 Color4(winrt::Color color);
 
-static constexpr wstring_view s_LayoutRootName{ L"LayoutRoot" };
-static constexpr wstring_view s_OutlinePathName{ L"OutlinePathPart" };
-static constexpr wstring_view s_OutlineFigureName{ L"OutlineFigurePart" };
-static constexpr wstring_view s_OutlineArcName{ L"OutlineArcPart" };
-static constexpr wstring_view s_RingPathName{ L"RingPathPart" };
-static constexpr wstring_view s_RingFigureName{ L"RingFigurePart" };
-static constexpr wstring_view s_RingArcName{ L"RingArcPart" };
-static constexpr wstring_view s_LottiePlayerName{ L"LottiePlayer" };
-static constexpr wstring_view s_DeterminateStateName{ L"Determinate" };
-static constexpr wstring_view s_IndeterminateStateName{ L"Indeterminate" };
-static constexpr wstring_view s_DefaultForegroundThemeResourceName{ L"SystemControlHighlightAccentBrush" };
-static constexpr wstring_view s_DefaultBackgroundThemeResourceName{ L"SystemControlBackgroundBaseLowBrush" };
-static constexpr wstring_view s_ForegroundName{ L"Foreground" };
-static constexpr wstring_view s_BackgroundName{ L"Background" };
+static constexpr wstring_view s_LayoutRootName{ L"LayoutRoot"sv };
+static constexpr wstring_view s_OutlinePathName{ L"OutlinePathPart"sv };
+static constexpr wstring_view s_OutlineFigureName{ L"OutlineFigurePart"sv };
+static constexpr wstring_view s_OutlineArcName{ L"OutlineArcPart"sv };
+static constexpr wstring_view s_RingPathName{ L"RingPathPart"sv };
+static constexpr wstring_view s_RingFigureName{ L"RingFigurePart"sv };
+static constexpr wstring_view s_RingArcName{ L"RingArcPart"sv };
+static constexpr wstring_view s_LottiePlayerName{ L"LottiePlayer"sv };
+static constexpr wstring_view s_DeterminateStateName{ L"Determinate"sv };
+static constexpr wstring_view s_IndeterminateStateName{ L"Indeterminate"sv };
+static constexpr wstring_view s_DefaultForegroundThemeResourceName{ L"SystemControlHighlightAccentBrush"sv };
+static constexpr wstring_view s_DefaultBackgroundThemeResourceName{ L"SystemControlBackgroundBaseLowBrush"sv };
+static constexpr wstring_view s_ForegroundName{ L"Foreground"sv };
+static constexpr wstring_view s_BackgroundName{ L"Background"sv };
 
 ProgressRing::ProgressRing()
 {
@@ -55,7 +55,16 @@ void ProgressRing::OnApplyTemplate()
     m_ringPath.set(GetTemplateChildT<winrt::Path>(s_RingPathName, controlProtected));
     m_ringFigure.set(GetTemplateChildT<winrt::PathFigure>(s_RingFigureName, controlProtected));
     m_ringArc.set(GetTemplateChildT<winrt::ArcSegment>(s_RingArcName, controlProtected));
-    m_player.set(GetTemplateChildT<winrt::AnimatedVisualPlayer>(s_LottiePlayerName, controlProtected));
+
+    m_player.set([this, controlProtected]()
+    {
+        auto const player = GetTemplateChildT<winrt::AnimatedVisualPlayer>(s_LottiePlayerName, controlProtected);
+        if (player)
+        {
+            player.RegisterPropertyChangedCallback(winrt::UIElement::OpacityProperty(), { this, &ProgressRing::OnOpacityPropertyChanged });
+        }
+        return player;
+    }());
 
     GetStrokeThickness();
     ApplyLottieAnimation();
@@ -116,6 +125,17 @@ void ProgressRing::OnBackgroundColorPropertyChanged(const winrt::DependencyObjec
     }
 }
 
+void ProgressRing::OnOpacityPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&)
+{
+    if (auto&& player = m_player.get())
+    {
+        if (player.Opacity() == 0)
+        {
+            player.Stop();
+        }
+    }
+}
+
 void ProgressRing::OnIsIndeterminatePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args)
 {
     UpdateStates();
@@ -193,11 +213,6 @@ void ProgressRing::UpdateStates()
     else
     {
         winrt::VisualStateManager::GoToState(*this, s_DeterminateStateName, true);
-
-        if (auto&& player = m_player.get())
-        {
-            player.Stop();
-        }
     }
 }
 

diff --git a/dev/ProgressRing/ProgressRing.h b/dev/ProgressRing/ProgressRing.h
@@ -31,6 +31,7 @@ class ProgressRing :
 
 private:
     void OnRangeBasePropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&);
+    void OnOpacityPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&);
     void OnSizeChanged(const winrt::IInspectable&, const winrt::IInspectable&);
     void ApplyLottieAnimation();
     void SetLottieForegroundColor(winrt::impl::com_ref<AnimatedVisuals::ProgressRingIndeterminate> progressRingIndeterminate);

diff --git a/dev/ProgressRing/ProgressRing.vcxitems.filters b/dev/ProgressRing/ProgressRing.vcxitems.filters
@@ -20,6 +20,6 @@
     <Page Include="$(MSBuildThisFileDirectory)ProgressRing_themeresources.xaml" />
   </ItemGroup>
   <ItemGroup>
-    <PRIResource Include="$(MSBuildThisFileDirectory)Resources.resw" />
+    <PRIResource Include="$(MSBuildThisFileDirectory)Strings\en-us\Resources.resw" />
   </ItemGroup>
 </Project>
diff --git a/dev/ProgressRing/ProgressRing.xaml b/dev/ProgressRing/ProgressRing.xaml
@@ -16,6 +16,22 @@
 
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
+                                <VisualStateGroup.Transitions>
+                                    <VisualTransition From="Indeterminate" To="Determinate">
+                                        <Storyboard>
+                                            <DoubleAnimation
+                                                Storyboard.TargetName="DeterminateProgressRingRoot"
+                                                Storyboard.TargetProperty="Opacity"
+                                                To="1"
+                                                Duration="0:0:0.15" />
+                                            <DoubleAnimation
+                                                Storyboard.TargetName="LottiePlayer"
+                                                Storyboard.TargetProperty="Opacity"
+                                                To="0"
+                                                Duration="0:0:0.15" />
+                                        </Storyboard>
+                                    </VisualTransition>
+                                </VisualStateGroup.Transitions>
                                 <VisualState x:Name="Determinate" />
                                 <VisualState x:Name="Indeterminate">
                                     <Storyboard>