diff --git a/dev/Generated/ProgressRing.properties.cpp b/dev/Generated/ProgressRing.properties.cpp index 2c4be479ab..92a51ca9d6 100644 --- a/dev/Generated/ProgressRing.properties.cpp +++ b/dev/Generated/ProgressRing.properties.cpp @@ -13,7 +13,10 @@ namespace winrt::Microsoft::UI::Xaml::Controls #include "ProgressRing.g.cpp" +GlobalDependencyProperty ProgressRingProperties::s_DeterminateSourceProperty{ nullptr }; +GlobalDependencyProperty ProgressRingProperties::s_IndeterminateSourceProperty{ nullptr }; GlobalDependencyProperty ProgressRingProperties::s_IsActiveProperty{ nullptr }; +GlobalDependencyProperty ProgressRingProperties::s_IsIndeterminateProperty{ nullptr }; GlobalDependencyProperty ProgressRingProperties::s_TemplateSettingsProperty{ nullptr }; ProgressRingProperties::ProgressRingProperties() @@ -23,6 +26,28 @@ ProgressRingProperties::ProgressRingProperties() void ProgressRingProperties::EnsureProperties() { + if (!s_DeterminateSourceProperty) + { + s_DeterminateSourceProperty = + InitializeDependencyProperty( + L"DeterminateSource", + winrt::name_of(), + winrt::name_of(), + false /* isAttached */, + ValueHelper::BoxedDefaultValue(), + winrt::PropertyChangedCallback(&OnDeterminateSourcePropertyChanged)); + } + if (!s_IndeterminateSourceProperty) + { + s_IndeterminateSourceProperty = + InitializeDependencyProperty( + L"IndeterminateSource", + winrt::name_of(), + winrt::name_of(), + false /* isAttached */, + ValueHelper::BoxedDefaultValue(), + winrt::PropertyChangedCallback(&OnIndeterminateSourcePropertyChanged)); + } if (!s_IsActiveProperty) { s_IsActiveProperty = @@ -34,6 +59,17 @@ void ProgressRingProperties::EnsureProperties() ValueHelper::BoxValueIfNecessary(true), winrt::PropertyChangedCallback(&OnIsActivePropertyChanged)); } + if (!s_IsIndeterminateProperty) + { + s_IsIndeterminateProperty = + InitializeDependencyProperty( + L"IsIndeterminate", + winrt::name_of(), + winrt::name_of(), + false /* isAttached */, + ValueHelper::BoxValueIfNecessary(true), + winrt::PropertyChangedCallback(&OnIsIndeterminatePropertyChanged)); + } if (!s_TemplateSettingsProperty) { s_TemplateSettingsProperty = @@ -49,10 +85,29 @@ void ProgressRingProperties::EnsureProperties() void ProgressRingProperties::ClearProperties() { + s_DeterminateSourceProperty = nullptr; + s_IndeterminateSourceProperty = nullptr; s_IsActiveProperty = nullptr; + s_IsIndeterminateProperty = nullptr; s_TemplateSettingsProperty = nullptr; } +void ProgressRingProperties::OnDeterminateSourcePropertyChanged( + winrt::DependencyObject const& sender, + winrt::DependencyPropertyChangedEventArgs const& args) +{ + auto owner = sender.as(); + winrt::get_self(owner)->OnDeterminateSourcePropertyChanged(args); +} + +void ProgressRingProperties::OnIndeterminateSourcePropertyChanged( + winrt::DependencyObject const& sender, + winrt::DependencyPropertyChangedEventArgs const& args) +{ + auto owner = sender.as(); + winrt::get_self(owner)->OnIndeterminateSourcePropertyChanged(args); +} + void ProgressRingProperties::OnIsActivePropertyChanged( winrt::DependencyObject const& sender, winrt::DependencyPropertyChangedEventArgs const& args) @@ -61,6 +116,40 @@ void ProgressRingProperties::OnIsActivePropertyChanged( winrt::get_self(owner)->OnIsActivePropertyChanged(args); } +void ProgressRingProperties::OnIsIndeterminatePropertyChanged( + winrt::DependencyObject const& sender, + winrt::DependencyPropertyChangedEventArgs const& args) +{ + auto owner = sender.as(); + winrt::get_self(owner)->OnIsIndeterminatePropertyChanged(args); +} + +void ProgressRingProperties::DeterminateSource(winrt::IAnimatedVisualSource const& value) +{ + [[gsl::suppress(con)]] + { + static_cast(this)->SetValue(s_DeterminateSourceProperty, ValueHelper::BoxValueIfNecessary(value)); + } +} + +winrt::IAnimatedVisualSource ProgressRingProperties::DeterminateSource() +{ + return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_DeterminateSourceProperty)); +} + +void ProgressRingProperties::IndeterminateSource(winrt::IAnimatedVisualSource const& value) +{ + [[gsl::suppress(con)]] + { + static_cast(this)->SetValue(s_IndeterminateSourceProperty, ValueHelper::BoxValueIfNecessary(value)); + } +} + +winrt::IAnimatedVisualSource ProgressRingProperties::IndeterminateSource() +{ + return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_IndeterminateSourceProperty)); +} + void ProgressRingProperties::IsActive(bool value) { [[gsl::suppress(con)]] @@ -74,6 +163,19 @@ bool ProgressRingProperties::IsActive() return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_IsActiveProperty)); } +void ProgressRingProperties::IsIndeterminate(bool value) +{ + [[gsl::suppress(con)]] + { + static_cast(this)->SetValue(s_IsIndeterminateProperty, ValueHelper::BoxValueIfNecessary(value)); + } +} + +bool ProgressRingProperties::IsIndeterminate() +{ + return ValueHelper::CastOrUnbox(static_cast(this)->GetValue(s_IsIndeterminateProperty)); +} + void ProgressRingProperties::TemplateSettings(winrt::ProgressRingTemplateSettings const& value) { [[gsl::suppress(con)]] diff --git a/dev/Generated/ProgressRing.properties.h b/dev/Generated/ProgressRing.properties.h index 9f0ea19405..d53fabbba4 100644 --- a/dev/Generated/ProgressRing.properties.h +++ b/dev/Generated/ProgressRing.properties.h @@ -9,22 +9,49 @@ class ProgressRingProperties public: ProgressRingProperties(); + void DeterminateSource(winrt::IAnimatedVisualSource const& value); + winrt::IAnimatedVisualSource DeterminateSource(); + + void IndeterminateSource(winrt::IAnimatedVisualSource const& value); + winrt::IAnimatedVisualSource IndeterminateSource(); + void IsActive(bool value); bool IsActive(); + void IsIndeterminate(bool value); + bool IsIndeterminate(); + void TemplateSettings(winrt::ProgressRingTemplateSettings const& value); winrt::ProgressRingTemplateSettings TemplateSettings(); + static winrt::DependencyProperty DeterminateSourceProperty() { return s_DeterminateSourceProperty; } + static winrt::DependencyProperty IndeterminateSourceProperty() { return s_IndeterminateSourceProperty; } static winrt::DependencyProperty IsActiveProperty() { return s_IsActiveProperty; } + static winrt::DependencyProperty IsIndeterminateProperty() { return s_IsIndeterminateProperty; } static winrt::DependencyProperty TemplateSettingsProperty() { return s_TemplateSettingsProperty; } + static GlobalDependencyProperty s_DeterminateSourceProperty; + static GlobalDependencyProperty s_IndeterminateSourceProperty; static GlobalDependencyProperty s_IsActiveProperty; + static GlobalDependencyProperty s_IsIndeterminateProperty; static GlobalDependencyProperty s_TemplateSettingsProperty; static void EnsureProperties(); static void ClearProperties(); + static void OnDeterminateSourcePropertyChanged( + winrt::DependencyObject const& sender, + winrt::DependencyPropertyChangedEventArgs const& args); + + static void OnIndeterminateSourcePropertyChanged( + winrt::DependencyObject const& sender, + winrt::DependencyPropertyChangedEventArgs const& args); + static void OnIsActivePropertyChanged( winrt::DependencyObject const& sender, winrt::DependencyPropertyChangedEventArgs const& args); + + static void OnIsIndeterminatePropertyChanged( + winrt::DependencyObject const& sender, + winrt::DependencyPropertyChangedEventArgs const& args); }; diff --git a/dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.cpp b/dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.cpp new file mode 100644 index 0000000000..8f09caaac5 --- /dev/null +++ b/dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.cpp @@ -0,0 +1,406 @@ +//------------------------------------------------------------------------------ +// +// This code was generated by a tool. +// +// Changes to this file may cause incorrect behavior and will be lost if +// the code is regenerated. +// +//------------------------------------------------------------------------------ +// ____________________________________ +// | Object stats | Count | +// |__________________________|_______| +// | All CompositionObjects | 47 | +// |--------------------------+-------| +// | Animators | 7 | +// | Animated brushes | 3 | +// | Animated gradient stops | - | +// | ExpressionAnimations | 4 | +// | PathKeyFrameAnimations | - | +// |--------------------------+-------| +// | ContainerVisuals | 1 | +// | ShapeVisuals | 1 | +// |--------------------------+-------| +// | ContainerShapes | 1 | +// | CompositionSpriteShapes | 3 | +// |--------------------------+-------| +// | Brushes | 3 | +// | Gradient stops | - | +// | CompositionVisualSurface | - | +// ------------------------------------ +#include "pch.h" +#include "ProgressRingDeterminate.h" +#include "WindowsNumerics.h" + +using namespace winrt::Windows::Foundation; +using namespace winrt::Windows::Foundation::Numerics; +using namespace winrt::Windows::Graphics; +using namespace winrt::Windows::UI; +using namespace winrt::Windows::UI::Composition; + +namespace +{ + class AnimatedVisual + : public winrt::implements + { + static constexpr int64_t c_durationTicks{ 20000000L }; + Compositor const _c{ nullptr }; + ExpressionAnimation const _reusableExpressionAnimation{ nullptr }; + winrt::CompositionPropertySet const _themeProperties{ nullptr }; + ContainerVisual _root{ nullptr }; + CubicBezierEasingFunction _cubicBezierEasingFunction_0{ nullptr }; + ExpressionAnimation _rootProgress{ nullptr }; + StepEasingFunction _holdThenStepEasingFunction{ nullptr }; + + static void StartProgressBoundAnimation( + CompositionObject target, + winrt::hstring animatedPropertyName, + CompositionAnimation animation, + ExpressionAnimation controllerProgressExpression) + { + target.StartAnimation(animatedPropertyName, animation); + const auto controller = target.TryGetAnimationController(animatedPropertyName); + controller.Pause(); + controller.StartAnimation(L"Progress", controllerProgressExpression); + } + + void BindProperty( + CompositionObject target, + winrt::hstring animatedPropertyName, + winrt::hstring expression, + winrt::hstring referenceParameterName, + CompositionObject referencedObject) + { + _reusableExpressionAnimation.ClearAllParameters(); + _reusableExpressionAnimation.Expression(expression); + _reusableExpressionAnimation.SetReferenceParameter(referenceParameterName, referencedObject); + target.StartAnimation(animatedPropertyName, _reusableExpressionAnimation); + } + + ScalarKeyFrameAnimation CreateScalarKeyFrameAnimation(float initialProgress, float initialValue, CompositionEasingFunction initialEasingFunction) + { + const auto result = _c.CreateScalarKeyFrameAnimation(); + result.Duration(TimeSpan{ c_durationTicks }); + result.InsertKeyFrame(initialProgress, initialValue, initialEasingFunction); + return result; + } + + Vector2KeyFrameAnimation CreateVector2KeyFrameAnimation(float initialProgress, float2 initialValue, CompositionEasingFunction initialEasingFunction) + { + const auto result = _c.CreateVector2KeyFrameAnimation(); + result.Duration(TimeSpan{ c_durationTicks }); + result.InsertKeyFrame(initialProgress, initialValue, initialEasingFunction); + return result; + } + + CompositionSpriteShape CreateSpriteShape(CompositionGeometry geometry, float3x2 transformMatrix) + { + const auto result = _c.CreateSpriteShape(geometry); + result.TransformMatrix(transformMatrix); + return result; + } + + // - Layer aggregator + // Offset:<16, 16> + // Color bound to theme property value: Background + CompositionColorBrush ThemeColor_Background() + { + const auto result = _c.CreateColorBrush(); + BindProperty(result, L"Color", L"ColorRGB(_theme.Background.W*1,_theme.Background.X,_theme.Background.Y,_theme.Background.Z)", L"_theme", _themeProperties); + return result; + } + + // - - Layer aggregator + // - Layer: Radial + // Offset:<16, 16> + // Color bound to theme property value: Foreground + CompositionColorBrush ThemeColor_Foreground_0() + { + const auto result = _c.CreateColorBrush(); + BindProperty(result, L"Color", L"ColorRGB(_theme.Foreground.W*0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)", L"_theme", _themeProperties); + return result; + } + + // - - Layer aggregator + // - Layer: Radial + // Offset:<16, 16> + // Color bound to theme property value: Foreground + CompositionColorBrush ThemeColor_Foreground_1() + { + const auto result = _c.CreateColorBrush(); + BindProperty(result, L"Color", L"ColorRGB(_theme.Foreground.W*1,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)", L"_theme", _themeProperties); + return result; + } + + // Layer aggregator + // Layer: Radial + CompositionContainerShape ContainerShape() + { + const auto result = _c.CreateContainerShape(); + result.Scale({ 0.0F, 0.0F }); + const auto shapes = result.Shapes(); + // Offset:<16, 16> + shapes.Append(SpriteShape_1()); + // Offset:<16, 16> + shapes.Append(SpriteShape_2()); + StartProgressBoundAnimation(result, L"Scale", ShapeVisibilityAnimation(), _rootProgress); + return result; + } + + // - Layer aggregator + // Offset:<16, 16> + // Ellipse Path.EllipseGeometry + CompositionEllipseGeometry Ellipse_7_0() + { + const auto result = _c.CreateEllipseGeometry(); + result.Radius({ 8.0F, 8.0F }); + return result; + } + + // - - Layer aggregator + // - Layer: Radial + // Offset:<16, 16> + // Ellipse Path.EllipseGeometry + CompositionEllipseGeometry Ellipse_7_1() + { + const auto result = _c.CreateEllipseGeometry(); + result.TrimEnd(0.5F); + result.Radius({ 8.0F, 8.0F }); + return result; + } + + // - - Layer aggregator + // - Layer: Radial + // Offset:<16, 16> + // Ellipse Path.EllipseGeometry + CompositionEllipseGeometry Ellipse_7_2() + { + const auto result = _c.CreateEllipseGeometry(); + result.Radius({ 8.0F, 8.0F }); + StartProgressBoundAnimation(result, L"TrimEnd", TrimEndScalarAnimation_0_to_0p99(), RootProgress()); + return result; + } + + // Layer aggregator + // Ellipse Path + CompositionSpriteShape SpriteShape_0() + { + // Offset:<16, 16>, Rotation:-0.008387561908827789 degrees, Scale:<1.77, 1.77> + const auto result = CreateSpriteShape(Ellipse_7_0(), { 1.76999998F, 0.0F, 0.0F, 1.76999998F, 16.0F, 16.0F }); + result.StrokeBrush(ThemeColor_Background()); + result.StrokeDashCap(CompositionStrokeCap::Round); + result.StrokeThickness(2.0F); + return result; + } + + // - Layer aggregator + // Layer: Radial + // Ellipse Path + CompositionSpriteShape SpriteShape_1() + { + // Offset:<16, 16>, Rotation:-0.008387561908827789 degrees, Scale:<1.77, 1.77> + const auto result = CreateSpriteShape(Ellipse_7_1(), { 1.76999998F, 0.0F, 0.0F, 1.76999998F, 16.0F, 16.0F }); + result.StrokeBrush(ThemeColor_Foreground_0()); + result.StrokeDashCap(CompositionStrokeCap::Round); + result.StrokeStartCap(CompositionStrokeCap::Round); + result.StrokeEndCap(CompositionStrokeCap::Round); + result.StrokeThickness(2.0F); + return result; + } + + // - Layer aggregator + // Layer: Radial + // Ellipse Path + CompositionSpriteShape SpriteShape_2() + { + // Offset:<16, 16>, Rotation:-0.008387561908827789 degrees, Scale:<1.77, 1.77> + const auto result = CreateSpriteShape(Ellipse_7_2(), { 1.76999998F, 0.0F, 0.0F, 1.76999998F, 16.0F, 16.0F }); + result.StrokeBrush(ThemeColor_Foreground_1()); + result.StrokeDashCap(CompositionStrokeCap::Round); + result.StrokeStartCap(CompositionStrokeCap::Round); + result.StrokeEndCap(CompositionStrokeCap::Round); + result.StrokeThickness(2.0F); + return result; + } + + // The root of the composition. + ContainerVisual Root() + { + const auto result = _root = _c.CreateContainerVisual(); + const auto propertySet = result.Properties(); + propertySet.InsertScalar(L"Progress", 0.0F); + // Layer aggregator + result.Children().InsertAtTop(ShapeVisual_0()); + return result; + } + + CubicBezierEasingFunction CubicBezierEasingFunction_0() + { + return _cubicBezierEasingFunction_0 = _c.CreateCubicBezierEasingFunction({ 0.166999996F, 0.166999996F }, { 0.833000004F, 0.833000004F }); + } + + ExpressionAnimation RootProgress() + { + const auto result = _rootProgress = _c.CreateExpressionAnimation(L"_.Progress"); + result.SetReferenceParameter(L"_", _root); + return result; + } + + // - - - Layer aggregator + // - - Layer: Radial + // - Offset:<16, 16> + // Ellipse Path.EllipseGeometry + // TrimEnd + ScalarKeyFrameAnimation TrimEndScalarAnimation_0_to_0p99() + { + const auto result = CreateScalarKeyFrameAnimation(0.0F, 9.99999975E-05F, StepThenHoldEasingFunction()); + result.InsertKeyFrame(0.00833333377F, 9.99999975E-05F, HoldThenStepEasingFunction()); + result.InsertKeyFrame(0.983333349F, 0.899999976F, CubicBezierEasingFunction_0()); + result.InsertKeyFrame(0.991666675F, 0.99000001F, _cubicBezierEasingFunction_0); + return result; + } + + // Layer aggregator + ShapeVisual ShapeVisual_0() + { + const auto result = _c.CreateShapeVisual(); + result.Size({ 32.0F, 32.0F }); + const auto shapes = result.Shapes(); + // Offset:<16, 16> + shapes.Append(SpriteShape_0()); + // Layer: Radial + shapes.Append(ContainerShape()); + return result; + } + + StepEasingFunction HoldThenStepEasingFunction() + { + const auto result = _holdThenStepEasingFunction = _c.CreateStepEasingFunction(); + result.IsFinalStepSingleFrame(true); + return result; + } + + // - - - - Layer aggregator + // - - - Layer: Radial + // - - Offset:<16, 16> + // - Ellipse Path.EllipseGeometry + // TrimEnd + StepEasingFunction StepThenHoldEasingFunction() + { + const auto result = _c.CreateStepEasingFunction(); + result.IsInitialStepSingleFrame(true); + return result; + } + + // - Layer aggregator + // Layer: Radial + Vector2KeyFrameAnimation ShapeVisibilityAnimation() + { + const auto result = CreateVector2KeyFrameAnimation(0.00833333377F, { 1.0F, 1.0F }, _holdThenStepEasingFunction); + return result; + } + + public: + AnimatedVisual(Compositor compositor, winrt::CompositionPropertySet themeProperties) + : _c(compositor) + , _themeProperties(themeProperties) + , _reusableExpressionAnimation(compositor.CreateExpressionAnimation()) + { + const auto _ = Root(); + } + + void Close() + { + if (_root) + { + _root.Close(); + } + } + + TimeSpan Duration() const + { + return { TimeSpan{ c_durationTicks } }; + } + + + Visual RootVisual() const + { + return _root; + } + + + float2 Size() const + { + return { 32.0F, 32.0F }; + } + + static bool IsRuntimeCompatible() + { + return winrt::Windows::Foundation::Metadata::ApiInformation::IsApiContractPresent(L"Windows.Foundation.UniversalApiContract", 7); + } + }; +} // end namespace + +float4 AnimatedVisuals::ProgressRingDeterminate::ColorAsVector4(Color color) +{ + return { static_cast(color.R), static_cast(color.G), static_cast(color.B), static_cast(color.A) }; +} + +winrt::CompositionPropertySet AnimatedVisuals::ProgressRingDeterminate::EnsureThemeProperties(Compositor compositor) +{ + if (_themeProperties == nullptr) + { + _themeProperties = compositor.CreatePropertySet(); + _themeProperties.InsertVector4(L"Background", ColorAsVector4((Color)_themeBackground)); + _themeProperties.InsertVector4(L"Foreground", ColorAsVector4((Color)_themeForeground)); + } + + return _themeProperties; +} + +winrt::CompositionPropertySet AnimatedVisuals::ProgressRingDeterminate::GetThemeProperties(Compositor compositor) +{ + return EnsureThemeProperties(compositor); +} + +Color AnimatedVisuals::ProgressRingDeterminate::Background() +{ + return _themeBackground; +} + +void AnimatedVisuals::ProgressRingDeterminate::Background(Color value) +{ + _themeBackground = value; + if (_themeProperties != nullptr) + { + _themeProperties.InsertVector4(L"Background", ColorAsVector4((Color)_themeBackground)); + } +} + +Color AnimatedVisuals::ProgressRingDeterminate::Foreground() +{ + return _themeForeground; +} + +void AnimatedVisuals::ProgressRingDeterminate::Foreground(Color value) +{ + _themeForeground = value; + if (_themeProperties != nullptr) + { + _themeProperties.InsertVector4(L"Foreground", ColorAsVector4((Color)_themeForeground)); + } +} + +winrt::Microsoft::UI::Xaml::Controls::IAnimatedVisual AnimatedVisuals::ProgressRingDeterminate::TryCreateAnimatedVisual( + const Compositor& compositor, + IInspectable& diagnostics) +{ + const auto _ = EnsureThemeProperties(compositor); + diagnostics = nullptr; + + if (AnimatedVisual::IsRuntimeCompatible()) + { + return winrt::make(compositor, _themeProperties); + } + + return nullptr; +} diff --git a/dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.h b/dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.h new file mode 100644 index 0000000000..1328f3c770 --- /dev/null +++ b/dev/ProgressRing/AnimatedVisuals/ProgressRingDeterminate.h @@ -0,0 +1,55 @@ +#pragma once +//------------------------------------------------------------------------------ +// +// This code was generated by a tool. +// +// Changes to this file may cause incorrect behavior and will be lost if +// the code is regenerated. +// +//------------------------------------------------------------------------------ + +namespace AnimatedVisuals +{ + // Name: ProgressRingDeterminate + // Frame rate: 60 fps + // Frame count: 120 + // Duration: 2000.0 mS + // ________________________________________________ + // | Theme property | Type | Default value | + // |________________|_______|_____________________| + // | Background | Color | #FFD3D3D3 LightGray | + // | Foreground | Color | #FF0078D7 | + // ------------------------------------------------ + class ProgressRingDeterminate + : public winrt::implements + { + winrt::Windows::UI::Composition::CompositionPropertySet _themeProperties{ nullptr }; + winrt::Windows::UI::Color _themeBackground{ 0xFF, 0xD3, 0xD3, 0xD3 }; + winrt::Windows::UI::Color _themeForeground{ 0xFF, 0x00, 0x78, 0xD7 }; + + winrt::float4 ColorAsVector4(winrt::Windows::UI::Color color); + + winrt::Windows::UI::Composition::CompositionPropertySet EnsureThemeProperties(winrt::Windows::UI::Composition::Compositor compositor); + + // Animation duration: 2.000 seconds. + static constexpr int64_t c_durationTicks{ 20000000L }; + + // Theme property: Background. + static inline const winrt::Windows::UI::Color c_themeBackground{ 0xFF, 0xD3, 0xD3, 0xD3 }; + + // Theme property: Foreground. + static inline const winrt::Windows::UI::Color c_themeForeground{ 0xFF, 0x00, 0x78, 0xD7 }; + + winrt::Windows::UI::Color Background(); + void Background(winrt::Windows::UI::Color value); + winrt::Windows::UI::Color Foreground(); + void Foreground(winrt::Windows::UI::Color value); + + public: + virtual winrt::Windows::UI::Composition::CompositionPropertySet GetThemeProperties(winrt::Windows::UI::Composition::Compositor compositor); + + virtual winrt::Microsoft::UI::Xaml::Controls::IAnimatedVisual TryCreateAnimatedVisual( + const winrt::Windows::UI::Composition::Compositor& compositor, + winrt::IInspectable& diagnostics); + }; +} diff --git a/dev/ProgressRing/ProgressRingIndeterminate.cpp b/dev/ProgressRing/AnimatedVisuals/ProgressRingIndeterminate.cpp similarity index 51% rename from dev/ProgressRing/ProgressRingIndeterminate.cpp rename to dev/ProgressRing/AnimatedVisuals/ProgressRingIndeterminate.cpp index ef00b8323f..b2cad55f4a 100644 --- a/dev/ProgressRing/ProgressRingIndeterminate.cpp +++ b/dev/ProgressRing/AnimatedVisuals/ProgressRingIndeterminate.cpp @@ -2,17 +2,42 @@ // // This code was generated by a tool. // +// LottieGen version: +// 7.0.0-build.16+g667576ee09 +// +// LottieGen source: +// http://aka.ms/Lottie +// // Changes to this file may cause incorrect behavior and will be lost if // the code is regenerated. // //------------------------------------------------------------------------------ +// ____________________________________ +// | Object stats | Count | +// |__________________________|_______| +// | All CompositionObjects | 59 | +// |--------------------------+-------| +// | Animators | 13 | +// | Animated brushes | 3 | +// | Animated gradient stops | - | +// | ExpressionAnimations | 4 | +// | PathKeyFrameAnimations | - | +// |--------------------------+-------| +// | ContainerVisuals | 1 | +// | ShapeVisuals | 1 | +// |--------------------------+-------| +// | ContainerShapes | 1 | +// | CompositionSpriteShapes | 3 | +// |--------------------------+-------| +// | Brushes | 3 | +// | Gradient stops | - | +// | CompositionVisualSurface | - | +// ------------------------------------ #include "pch.h" #include "ProgressRingIndeterminate.h" #include "WindowsNumerics.h" -using namespace winrt::Microsoft::UI::Xaml::Controls; using namespace winrt::Windows::Foundation; -using namespace winrt::Windows::Foundation::Metadata; using namespace winrt::Windows::Foundation::Numerics; using namespace winrt::Windows::Graphics; using namespace winrt::Windows::UI; @@ -20,32 +45,31 @@ using namespace winrt::Windows::UI::Composition; namespace { - static void StartProgressBoundAnimation( - CompositionObject target, - winrt::hstring animatedPropertyName, - CompositionAnimation animation, - ExpressionAnimation controllerProgressExpression) - { - target.StartAnimation(animatedPropertyName, animation); - const auto controller = target.TryGetAnimationController(animatedPropertyName); - controller.Pause(); - controller.StartAnimation(L"Progress", controllerProgressExpression); - } - class AnimatedVisual : public winrt::implements { - // Animation duration: 2.000 seconds. static constexpr int64_t c_durationTicks{ 20000000L }; Compositor const _c{ nullptr }; ExpressionAnimation const _reusableExpressionAnimation{ nullptr }; CompositionPropertySet const _themeProperties{ nullptr }; - CubicBezierEasingFunction _cubicBezierEasingFunction_0{ nullptr }; - StepEasingFunction _holdThenStepEasingFunction{ nullptr }; - ContainerVisual _root{ nullptr }; - ExpressionAnimation _rootProgress{ nullptr }; CompositionColorBrush _themeColor_Foreground_0{ nullptr }; CompositionColorBrush _themeColor_Foreground_1{ nullptr }; + ContainerVisual _root{ nullptr }; + CubicBezierEasingFunction _cubicBezierEasingFunction_0{ nullptr }; + ExpressionAnimation _rootProgress{ nullptr }; + StepEasingFunction _holdThenStepEasingFunction{ nullptr }; + + static void StartProgressBoundAnimation( + CompositionObject target, + winrt::hstring animatedPropertyName, + CompositionAnimation animation, + ExpressionAnimation controllerProgressExpression) + { + target.StartAnimation(animatedPropertyName, animation); + const auto controller = target.TryGetAnimationController(animatedPropertyName); + controller.Pause(); + controller.StartAnimation(L"Progress", controllerProgressExpression); + } void BindProperty( CompositionObject target, @@ -60,94 +84,163 @@ namespace target.StartAnimation(animatedPropertyName, _reusableExpressionAnimation); } - // Layer (Shape): Radial - CompositionContainerShape ContainerShape_0() + void BindProperty2( + CompositionObject target, + winrt::hstring animatedPropertyName, + winrt::hstring expression, + winrt::hstring referenceParameterName0, + CompositionObject referencedObject0, + winrt::hstring referenceParameterName1, + CompositionObject referencedObject1) { - const auto result = _c.CreateContainerShape(); - result.TransformMatrix({ 1.76999998F, 0.0F, 0.0F, 1.76999998F, 16.0F, 16.0F }); - // Transforms: Radial - result.Shapes().Append(ContainerShape_1()); + _reusableExpressionAnimation.ClearAllParameters(); + _reusableExpressionAnimation.Expression(expression); + _reusableExpressionAnimation.SetReferenceParameter(referenceParameterName0, referencedObject0); + _reusableExpressionAnimation.SetReferenceParameter(referenceParameterName1, referencedObject1); + target.StartAnimation(animatedPropertyName, _reusableExpressionAnimation); + } + + ScalarKeyFrameAnimation CreateScalarKeyFrameAnimation(float initialProgress, float initialValue, CompositionEasingFunction initialEasingFunction) + { + const auto result = _c.CreateScalarKeyFrameAnimation(); + result.Duration(TimeSpan{ c_durationTicks }); + result.InsertKeyFrame(initialProgress, initialValue, initialEasingFunction); + return result; + } + + CompositionSpriteShape CreateSpriteShape(CompositionGeometry geometry, float3x2 transformMatrix) + { + const auto result = _c.CreateSpriteShape(geometry); + result.TransformMatrix(transformMatrix); return result; } - // Layer (Shape): Radial + // - Layer aggregator + // Scale:5,5, Offset:<40, 40> + // Color bound to theme property value: Background + CompositionColorBrush ThemeColor_Background() + { + const auto result = _c.CreateColorBrush(); + BindProperty(result, L"Color", L"ColorRGB(_theme.Background.W*1,_theme.Background.X,_theme.Background.Y,_theme.Background.Z)", L"_theme", _themeProperties); + return result; + } + + // - - Layer aggregator + // - Scale:5,5, Offset:<40, 40> + // ShapeGroup: Ellipse B + // Color bound to theme property value: Foreground + CompositionColorBrush ThemeColor_Foreground_0() + { + const auto result = _themeColor_Foreground_0 = _c.CreateColorBrush(); + const auto propertySet = result.Properties(); + propertySet.InsertScalar(L"Opacity0", 0.0F); + BindProperty2(result, L"Color", L"ColorRGB(_theme.Foreground.W*my.Opacity0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)", L"_theme", _themeProperties, L"my", propertySet); + StartProgressBoundAnimation(propertySet, L"Opacity0", Opacity0ScalarAnimation_0_to_1(), _rootProgress); + return result; + } + + // - - Layer aggregator + // - Scale:5,5, Offset:<40, 40> + // ShapeGroup: Ellipse B + // Color bound to theme property value: Foreground + CompositionColorBrush ThemeColor_Foreground_1() + { + const auto result = _themeColor_Foreground_1 = _c.CreateColorBrush(); + const auto propertySet = result.Properties(); + propertySet.InsertScalar(L"Opacity0", 1.0F); + BindProperty2(result, L"Color", L"ColorRGB(_theme.Foreground.W*my.Opacity0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)", L"_theme", _themeProperties, L"my", propertySet); + StartProgressBoundAnimation(propertySet, L"Opacity0", Opacity0ScalarAnimation_1_to_0(), _rootProgress); + return result; + } + + // Layer aggregator // Transforms for Radial - CompositionContainerShape ContainerShape_1() + CompositionContainerShape ContainerShape() { const auto result = _c.CreateContainerShape(); + // Offset:<40, 40>, Scale:<5, 5> + result.TransformMatrix({ 5.0F, 0.0F, 0.0F, 5.0F, 40.0F, 40.0F }); const auto shapes = result.Shapes(); - // Ellipse Path / ShapeGroup: Ellipse B + // ShapeGroup: Ellipse B shapes.Append(SpriteShape_1()); - // Ellipse Path / ShapeGroup: Ellipse A + // ShapeGroup: Ellipse B shapes.Append(SpriteShape_2()); StartProgressBoundAnimation(result, L"RotationAngleInDegrees", RotationAngleInDegreesScalarAnimation_0_to_900(), _rootProgress); return result; } - CubicBezierEasingFunction CubicBezierEasingFunction_0() - { - return _cubicBezierEasingFunction_0 = _c.CreateCubicBezierEasingFunction({ 0.166999996F, 0.166999996F }, { 0.833000004F, 0.833000004F }); - } - - // Ellipse Path / ShapeGroup: Ellipse / Transforms: Radial BG / Layer (Shape): Radial - // BG + // - Layer aggregator + // Scale:5,5, Offset:<40, 40> // Ellipse Path.EllipseGeometry - CompositionEllipseGeometry Ellipse_9_0() + CompositionEllipseGeometry Ellipse_7_0() { const auto result = _c.CreateEllipseGeometry(); - result.Radius({ 8, 8 }); + result.Radius({ 7.0F, 7.0F }); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse B + // - - Layer aggregator + // - Scale:5,5, Offset:<40, 40> + // ShapeGroup: Ellipse B // Ellipse Path.EllipseGeometry - CompositionEllipseGeometry Ellipse_9_1() + CompositionEllipseGeometry Ellipse_7_1() { const auto result = _c.CreateEllipseGeometry(); result.TrimEnd(0.5F); - result.Radius({ 8, 8 }); + result.Radius({ 7.0F, 7.0F }); StartProgressBoundAnimation(result, L"TrimStart", TrimStartScalarAnimation_0_to_0p5(), RootProgress()); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse A + // - - Layer aggregator + // - Scale:5,5, Offset:<40, 40> + // ShapeGroup: Ellipse B // Ellipse Path.EllipseGeometry - CompositionEllipseGeometry Ellipse_9_2() + CompositionEllipseGeometry Ellipse_7_2() { const auto result = _c.CreateEllipseGeometry(); - result.Radius({ 8, 8 }); + result.Radius({ 7.0F, 7.0F }); StartProgressBoundAnimation(result, L"TrimEnd", TrimEndScalarAnimation_0_to_0p5(), _rootProgress); return result; } - StepEasingFunction HoldThenStepEasingFunction() + // Layer aggregator + // Ellipse Path + CompositionSpriteShape SpriteShape_0() { - const auto result = _holdThenStepEasingFunction = _c.CreateStepEasingFunction(); - result.IsFinalStepSingleFrame(true); + // Offset:<40, 40>, Scale:<5, 5> + const auto result = CreateSpriteShape(Ellipse_7_0(), { 5.0F, 0.0F, 0.0F, 5.0F, 40.0F, 40.0F }); + result.StrokeBrush(ThemeColor_Background()); + result.StrokeDashCap(CompositionStrokeCap::Round); + result.StrokeThickness(2.0F); return result; } - // Opacity0 - ScalarKeyFrameAnimation Opacity0ScalarAnimation_0_to_1() + // - Layer aggregator + // Scale:5,5, Offset:<40, 40> + // Ellipse Path + CompositionSpriteShape SpriteShape_1() { - const auto result = _c.CreateScalarKeyFrameAnimation(); - result.Duration(TimeSpan{ c_durationTicks }); - result.InsertKeyFrame(0, 0, _holdThenStepEasingFunction); - result.InsertKeyFrame(0.5F, 1, _holdThenStepEasingFunction); + const auto result = _c.CreateSpriteShape(Ellipse_7_1()); + result.StrokeBrush(ThemeColor_Foreground_0()); + result.StrokeDashCap(CompositionStrokeCap::Round); + result.StrokeStartCap(CompositionStrokeCap::Round); + result.StrokeEndCap(CompositionStrokeCap::Round); + result.StrokeThickness(2.0F); return result; } - // Opacity0 - ScalarKeyFrameAnimation Opacity0ScalarAnimation_1_to_0() + // - Layer aggregator + // Scale:5,5, Offset:<40, 40> + // Ellipse Path + CompositionSpriteShape SpriteShape_2() { - const auto result = _c.CreateScalarKeyFrameAnimation(); - result.Duration(TimeSpan{ c_durationTicks }); - result.InsertKeyFrame(0, 1, _holdThenStepEasingFunction); - result.InsertKeyFrame(0.5F, 0, _holdThenStepEasingFunction); + const auto result = _c.CreateSpriteShape(Ellipse_7_2()); + result.StrokeBrush(ThemeColor_Foreground_1()); + result.StrokeDashCap(CompositionStrokeCap::Round); + result.StrokeStartCap(CompositionStrokeCap::Round); + result.StrokeEndCap(CompositionStrokeCap::Round); + result.StrokeThickness(2.0F); return result; } @@ -156,172 +249,105 @@ namespace { const auto result = _root = _c.CreateContainerVisual(); const auto propertySet = result.Properties(); - propertySet.InsertScalar(L"Progress", 0); + propertySet.InsertScalar(L"Progress", 0.0F); + // Layer aggregator result.Children().InsertAtTop(ShapeVisual_0()); return result; } - ExpressionAnimation RootProgress() + CubicBezierEasingFunction CubicBezierEasingFunction_0() { - const auto result = _rootProgress = _c.CreateExpressionAnimation(L"_.Progress"); - result.SetReferenceParameter(L"_", _root); - return result; + return _cubicBezierEasingFunction_0 = _c.CreateCubicBezierEasingFunction({ 0.166999996F, 0.166999996F }, { 0.833000004F, 0.833000004F }); } - // Layer (Shape): Radial - // Transforms: Radial - // Rotation - ScalarKeyFrameAnimation RotationAngleInDegreesScalarAnimation_0_to_900() + ExpressionAnimation RootProgress() { - const auto result = _c.CreateScalarKeyFrameAnimation(); - result.Duration(TimeSpan{ c_durationTicks }); - result.InsertKeyFrame(0, 0, _holdThenStepEasingFunction); - result.InsertKeyFrame(0.5F, 450, _cubicBezierEasingFunction_0); - result.InsertKeyFrame(1, 900, _cubicBezierEasingFunction_0); + const auto result = _rootProgress = _c.CreateExpressionAnimation(L"_.Progress"); + result.SetReferenceParameter(L"_", _root); return result; } - ShapeVisual ShapeVisual_0() + // Opacity0 + ScalarKeyFrameAnimation Opacity0ScalarAnimation_0_to_1() { - const auto result = _c.CreateShapeVisual(); - result.Size({ 32, 32 }); - const auto shapes = result.Shapes(); - // Ellipse Path / ShapeGroup: Ellipse / Transforms: Radial BG / Layer (Shape): Radial - // BG - shapes.Append(SpriteShape_0()); - // Layer (Shape): Radial - shapes.Append(ContainerShape_0()); + const auto result = CreateScalarKeyFrameAnimation(0.0F, 0.0F, _holdThenStepEasingFunction); + result.InsertKeyFrame(0.5F, 1.0F, _holdThenStepEasingFunction); return result; } - // Ellipse Path - CompositionSpriteShape SpriteShape_0() + // Opacity0 + ScalarKeyFrameAnimation Opacity0ScalarAnimation_1_to_0() { - const auto result = _c.CreateSpriteShape(Ellipse_9_0()); - result.TransformMatrix({ 1.76999998F, 0.0F, 0.0F, 1.76999998F, 16.0F, 16.0F }); - result.StrokeBrush(ThemeColor_Background()); - result.StrokeDashCap(CompositionStrokeCap::Round); - result.StrokeEndCap(CompositionStrokeCap::Round); - result.StrokeStartCap(CompositionStrokeCap::Round); - result.StrokeMiterLimit(4); - result.StrokeThickness(2); + const auto result = CreateScalarKeyFrameAnimation(0.0F, 1.0F, _holdThenStepEasingFunction); + result.InsertKeyFrame(0.5F, 0.0F, _holdThenStepEasingFunction); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path - CompositionSpriteShape SpriteShape_1() + // - Layer aggregator + // Scale:5,5, Offset:<40, 40> + // Rotation + ScalarKeyFrameAnimation RotationAngleInDegreesScalarAnimation_0_to_900() { - const auto result = _c.CreateSpriteShape(Ellipse_9_1()); - result.StrokeBrush(ThemeColor_Foreground_0()); - result.StrokeDashCap(CompositionStrokeCap::Round); - result.StrokeEndCap(CompositionStrokeCap::Round); - result.StrokeStartCap(CompositionStrokeCap::Round); - result.StrokeMiterLimit(4); - result.StrokeThickness(2); + const auto result = CreateScalarKeyFrameAnimation(0.0F, 0.0F, _holdThenStepEasingFunction); + result.InsertKeyFrame(0.5F, 450.0F, _cubicBezierEasingFunction_0); + result.InsertKeyFrame(1.0F, 900.0F, _cubicBezierEasingFunction_0); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path - CompositionSpriteShape SpriteShape_2() + // - - - Layer aggregator + // - - Scale:5,5, Offset:<40, 40> + // - ShapeGroup: Ellipse B + // Ellipse Path.EllipseGeometry + // TrimEnd + ScalarKeyFrameAnimation TrimEndScalarAnimation_0_to_0p5() { - const auto result = _c.CreateSpriteShape(Ellipse_9_2()); - result.StrokeBrush(ThemeColor_Foreground_1()); - result.StrokeDashCap(CompositionStrokeCap::Round); - result.StrokeEndCap(CompositionStrokeCap::Round); - result.StrokeStartCap(CompositionStrokeCap::Round); - result.StrokeMiterLimit(4); - result.StrokeThickness(2); + const auto result = CreateScalarKeyFrameAnimation(0.0F, 9.99999975E-05F, _holdThenStepEasingFunction); + result.InsertKeyFrame(0.5F, 0.5F, _cubicBezierEasingFunction_0); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse B + // - - - Layer aggregator + // - - Scale:5,5, Offset:<40, 40> + // - ShapeGroup: Ellipse B // Ellipse Path.EllipseGeometry // TrimStart - StepEasingFunction StepThenHoldEasingFunction() - { - const auto result = _c.CreateStepEasingFunction(); - result.IsInitialStepSingleFrame(true); - return result; - } - - // Ellipse Path / ShapeGroup: Ellipse / Transforms: Radial BG / Layer (Shape): Radial - // BG - // Color bound to theme property value: Background - CompositionColorBrush ThemeColor_Background() + ScalarKeyFrameAnimation TrimStartScalarAnimation_0_to_0p5() { - const auto result = _c.CreateColorBrush(); - BindProperty(result, L"Color", L"ColorRGB(_theme.Background.W,_theme.Background.X,_theme.Background.Y,_theme.Background.Z)", L"_theme", _themeProperties); + const auto result = CreateScalarKeyFrameAnimation(0.0F, 0.0F, StepThenHoldEasingFunction()); + result.InsertKeyFrame(0.5F, 0.0F, HoldThenStepEasingFunction()); + result.InsertKeyFrame(1.0F, 0.5F, CubicBezierEasingFunction_0()); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse B - // Color bound to theme property value: Foreground - CompositionColorBrush ThemeColor_Foreground_0() - { - const auto result = _themeColor_Foreground_0 = _c.CreateColorBrush(); - const auto propertySet = result.Properties(); - propertySet.InsertScalar(L"Opacity0", 0); - _reusableExpressionAnimation.ClearAllParameters(); - _reusableExpressionAnimation.Expression(L"ColorRGB(_theme.Foreground.W * my.Opacity0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)"); - _reusableExpressionAnimation.SetReferenceParameter(L"my", propertySet); - _reusableExpressionAnimation.SetReferenceParameter(L"_theme", _themeProperties); - result.StartAnimation(L"Color", _reusableExpressionAnimation); - StartProgressBoundAnimation(propertySet, L"Opacity0", Opacity0ScalarAnimation_0_to_1(), _rootProgress); - return result; - } - - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse A - // Color bound to theme property value: Foreground - CompositionColorBrush ThemeColor_Foreground_1() + // Layer aggregator + ShapeVisual ShapeVisual_0() { - const auto result = _themeColor_Foreground_1 = _c.CreateColorBrush(); - const auto propertySet = result.Properties(); - propertySet.InsertScalar(L"Opacity0", 1); - _reusableExpressionAnimation.ClearAllParameters(); - _reusableExpressionAnimation.Expression(L"ColorRGB(_theme.Foreground.W * my.Opacity0,_theme.Foreground.X,_theme.Foreground.Y,_theme.Foreground.Z)"); - _reusableExpressionAnimation.SetReferenceParameter(L"my", propertySet); - _reusableExpressionAnimation.SetReferenceParameter(L"_theme", _themeProperties); - result.StartAnimation(L"Color", _reusableExpressionAnimation); - StartProgressBoundAnimation(propertySet, L"Opacity0", Opacity0ScalarAnimation_1_to_0(), _rootProgress); + const auto result = _c.CreateShapeVisual(); + result.Size({ 80.0F, 80.0F }); + const auto shapes = result.Shapes(); + // Scale:5,5, Offset:<40, 40> + shapes.Append(SpriteShape_0()); + // Scale:5,5, Offset:<40, 40> + shapes.Append(ContainerShape()); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse A - // Ellipse Path.EllipseGeometry - // TrimEnd - ScalarKeyFrameAnimation TrimEndScalarAnimation_0_to_0p5() + StepEasingFunction HoldThenStepEasingFunction() { - const auto result = _c.CreateScalarKeyFrameAnimation(); - result.Duration(TimeSpan{ c_durationTicks }); - result.InsertKeyFrame(0, 9.99999975E-05F, _holdThenStepEasingFunction); - result.InsertKeyFrame(0.5F, 0.5F, _cubicBezierEasingFunction_0); + const auto result = _holdThenStepEasingFunction = _c.CreateStepEasingFunction(); + result.IsFinalStepSingleFrame(true); return result; } - // Layer (Shape): Radial - // Transforms: Radial - // Ellipse Path / ShapeGroup: Ellipse B - // Ellipse Path.EllipseGeometry + // - - - - Layer aggregator + // - - - Scale:5,5, Offset:<40, 40> + // - - ShapeGroup: Ellipse B + // - Ellipse Path.EllipseGeometry // TrimStart - ScalarKeyFrameAnimation TrimStartScalarAnimation_0_to_0p5() + StepEasingFunction StepThenHoldEasingFunction() { - const auto result = _c.CreateScalarKeyFrameAnimation(); - result.Duration(TimeSpan{ c_durationTicks }); - result.InsertKeyFrame(0, 0, StepThenHoldEasingFunction()); - result.InsertKeyFrame(0.5F, 0, HoldThenStepEasingFunction()); - result.InsertKeyFrame(1, 0.5F, CubicBezierEasingFunction_0()); + const auto result = _c.CreateStepEasingFunction(); + result.IsInitialStepSingleFrame(true); return result; } @@ -356,33 +382,67 @@ namespace float2 Size() const { - return { 32, 32 }; + return { 80.0F, 80.0F }; } static bool IsRuntimeCompatible() { - return ApiInformation::IsApiContractPresent(L"Windows.Foundation.UniversalApiContract", 7); + return winrt::Windows::Foundation::Metadata::ApiInformation::IsApiContractPresent(L"Windows.Foundation.UniversalApiContract", 7); } }; } // end namespace -CompositionPropertySet AnimatedVisuals::ProgressRingIndeterminate::EnsureThemeProperties(Compositor compositor) +float4 AnimatedVisuals::ProgressRingIndeterminate::ColorAsVector4(Color color) +{ + return { static_cast(color.R), static_cast(color.G), static_cast(color.B), static_cast(color.A) }; +} + +winrt::CompositionPropertySet AnimatedVisuals::ProgressRingIndeterminate::EnsureThemeProperties(Compositor compositor) { if (_themeProperties == nullptr) { _themeProperties = compositor.CreatePropertySet(); - _themeProperties.InsertVector4(L"Background", { 211, 211, 211, 255 }); - _themeProperties.InsertVector4(L"Foreground", { 0, 120, 215, 255 }); + _themeProperties.InsertVector4(L"Background", ColorAsVector4((Color)_themeBackground)); + _themeProperties.InsertVector4(L"Foreground", ColorAsVector4((Color)_themeForeground)); } + return _themeProperties; } -CompositionPropertySet AnimatedVisuals::ProgressRingIndeterminate::GetThemeProperties(Compositor compositor) +winrt::CompositionPropertySet AnimatedVisuals::ProgressRingIndeterminate::GetThemeProperties(Compositor compositor) { return EnsureThemeProperties(compositor); } -IAnimatedVisual AnimatedVisuals::ProgressRingIndeterminate::TryCreateAnimatedVisual( +Color AnimatedVisuals::ProgressRingIndeterminate::Background() +{ + return _themeBackground; +} + +void AnimatedVisuals::ProgressRingIndeterminate::Background(Color value) +{ + _themeBackground = value; + if (_themeProperties != nullptr) + { + _themeProperties.InsertVector4(L"Background", ColorAsVector4((Color)_themeBackground)); + } +} + +Color AnimatedVisuals::ProgressRingIndeterminate::Foreground() +{ + return _themeForeground; +} + +void AnimatedVisuals::ProgressRingIndeterminate::Foreground(Color value) +{ + _themeForeground = value; + if (_themeProperties != nullptr) + { + _themeProperties.InsertVector4(L"Foreground", ColorAsVector4((Color)_themeForeground)); + } +} + +winrt::Microsoft::UI::Xaml::Controls::IAnimatedVisual AnimatedVisuals::ProgressRingIndeterminate::TryCreateAnimatedVisual( const Compositor& compositor, IInspectable& diagnostics) { diff --git a/dev/ProgressRing/AnimatedVisuals/ProgressRingIndeterminate.h b/dev/ProgressRing/AnimatedVisuals/ProgressRingIndeterminate.h new file mode 100644 index 0000000000..aded898b45 --- /dev/null +++ b/dev/ProgressRing/AnimatedVisuals/ProgressRingIndeterminate.h @@ -0,0 +1,61 @@ +#pragma once +//------------------------------------------------------------------------------ +// +// This code was generated by a tool. +// +// LottieGen version: +// 7.0.0-build.16+g667576ee09 +// +// LottieGen source: +// http://aka.ms/Lottie +// +// Changes to this file may cause incorrect behavior and will be lost if +// the code is regenerated. +// +//------------------------------------------------------------------------------ + +namespace AnimatedVisuals +{ + // Name: ProgressRingIndeterminate + // Frame rate: 60 fps + // Frame count: 120 + // Duration: 2000.0 mS + // ________________________________________________ + // | Theme property | Type | Default value | + // |________________|_______|_____________________| + // | Background | Color | #FFD3D3D3 LightGray | + // | Foreground | Color | #FF0078D7 | + // ------------------------------------------------ + class ProgressRingIndeterminate + : public winrt::implements + { + winrt::Windows::UI::Composition::CompositionPropertySet _themeProperties{ nullptr }; + winrt::Windows::UI::Color _themeBackground{ 0xFF, 0xD3, 0xD3, 0xD3 }; + winrt::Windows::UI::Color _themeForeground{ 0xFF, 0x00, 0x78, 0xD7 }; + + winrt::float4 ColorAsVector4(winrt::Windows::UI::Color color); + + winrt::Windows::UI::Composition::CompositionPropertySet EnsureThemeProperties(winrt::Windows::UI::Composition::Compositor compositor); + + // Animation duration: 2.000 seconds. + static constexpr int64_t c_durationTicks{ 20000000L }; + + // Theme property: Background. + static inline const winrt::Windows::UI::Color c_themeBackground{ 0xFF, 0xD3, 0xD3, 0xD3 }; + + // Theme property: Foreground. + static inline const winrt::Windows::UI::Color c_themeForeground{ 0xFF, 0x00, 0x78, 0xD7 }; + + winrt::Windows::UI::Color Background(); + void Background(winrt::Windows::UI::Color value); + winrt::Windows::UI::Color Foreground(); + void Foreground(winrt::Windows::UI::Color value); + + public: + virtual winrt::Windows::UI::Composition::CompositionPropertySet GetThemeProperties(winrt::Windows::UI::Composition::Compositor compositor); + + virtual winrt::Microsoft::UI::Xaml::Controls::IAnimatedVisual TryCreateAnimatedVisual( + const winrt::Windows::UI::Composition::Compositor& compositor, + winrt::IInspectable& diagnostics); + }; +} diff --git a/dev/ProgressRing/IThemedAnimatedVisualSource.h b/dev/ProgressRing/IThemedAnimatedVisualSource.h deleted file mode 100644 index 838e872b18..0000000000 --- a/dev/ProgressRing/IThemedAnimatedVisualSource.h +++ /dev/null @@ -1,5 +0,0 @@ -#pragma once - -struct IThemedAnimatedVisualSource -{ -}; diff --git a/dev/ProgressRing/InteractionTests/ProgressRingTests.cs b/dev/ProgressRing/InteractionTests/ProgressRingTests.cs index ce9d02f335..57f13e98d5 100644 --- a/dev/ProgressRing/InteractionTests/ProgressRingTests.cs +++ b/dev/ProgressRing/InteractionTests/ProgressRingTests.cs @@ -43,24 +43,28 @@ public void TestCleanup() } [TestMethod] - public void ChangeStateTest() + public void ChangeStateTest() { using (var setup = new TestSetupHelper("ProgressRing Tests")) { - Log.Comment("Verify IsActive property is set to true by default for testing"); + Log.Comment("Verify IsActive and IsIndeterminate property is set to true by default for testing"); ToggleButton isActiveCheckBox = FindElement.ByName("ShowIsActiveCheckBox"); + ToggleButton isIndeterminateCheckBox = FindElement.ByName("ShowIsIndeterminateCheckBox"); TextBlock isActiveText = FindElement.ByName("ShowIsActiveText"); + TextBlock isIsIndeterminateText = FindElement.ByName("ShowIsIndeterminateText"); TextBlock isPlayingText = FindElement.ByName("IsPlayingText"); TextBlock visualStateText = FindElement.ByName("VisualStateText"); TextBlock opacityText = FindElement.ByName("OpacityText"); Verify.IsTrue(Convert.ToBoolean(isActiveText.DocumentText)); + Verify.IsTrue(Convert.ToBoolean(isIsIndeterminateText.DocumentText)); - Log.Comment("IsActive set to true updates ProgressRing to Active state"); + Log.Comment("IsActive and IsIndeterminate set to true updates ProgressRing to Active state"); Verify.AreEqual("Active", visualStateText.DocumentText); + Log.Comment("Verity that opacity is 1 when Active"); Verify.AreEqual("1", opacityText.DocumentText); @@ -72,15 +76,28 @@ public void ChangeStateTest() Verify.IsTrue(Convert.ToBoolean(isPlayingText.DocumentText)); } - isActiveCheckBox.ToggleAndWait(); + Log.Comment("IsActive set to True and IsIndeterminate set to false updates ProgressRing to DeterminateActive state"); + + isIndeterminateCheckBox.ToggleAndWait(); + + Verify.IsFalse(Convert.ToBoolean(isIsIndeterminateText.DocumentText)); + + Verify.AreEqual("DeterminateActive", visualStateText.DocumentText); + + Log.Comment("Verify Lottie animation for Indeterminate player is not playing when in DeterminateActive state"); + Verify.IsFalse(Convert.ToBoolean(isPlayingText.DocumentText)); Log.Comment("IsActive set to false updates ProgressRing to Inactive state"); + + isActiveCheckBox.ToggleAndWait(); + Verify.AreEqual("Inactive", visualStateText.DocumentText); Log.Comment("Verify Lottie animation is not playing when in Inactive state"); Verify.IsFalse(Convert.ToBoolean(isPlayingText.DocumentText)); Wait.ForIdle(); + Log.Comment("Verity that opacity is 0 when Inactive"); Verify.AreEqual("0", opacityText.DocumentText); @@ -98,43 +115,59 @@ public void LottieCustomSourceTest() navigateToCustomLottieSourcePage.InvokeAndWait(); - Log.Comment("Verify IsActive property is set to true by default for testing"); + Log.Comment("Verify IsActive and IsIndeterminate property is set to true by default for testing"); - ToggleButton customLottieSourceIsActiveCheckBox = FindElement.ByName("CustomLottieSourceIsActiveCheckBox"); + ToggleButton isActiveCheckBox = FindElement.ByName("ShowIsActiveCheckBox_CLS"); + ToggleButton isIndeterminateCheckBox = FindElement.ByName("ShowIsIndeterminateCheckBox_CLS"); TextBlock isActiveText = FindElement.ByName("ShowIsActiveText"); + TextBlock isIsIndeterminateText = FindElement.ByName("ShowIsIndeterminateText"); TextBlock isPlayingText = FindElement.ByName("IsPlayingText"); TextBlock visualStateText = FindElement.ByName("VisualStateText"); TextBlock opacityText = FindElement.ByName("OpacityText"); Verify.IsTrue(Convert.ToBoolean(isActiveText.DocumentText)); + Verify.IsTrue(Convert.ToBoolean(isIsIndeterminateText.DocumentText)); - Log.Comment("IsActive set to true updates ProgressRing to Active state"); + Log.Comment("IsActive and IsIndeterminate set to true updates ProgressRing to Active state"); Verify.AreEqual("Active", visualStateText.DocumentText); + Log.Comment("Verity that opacity is 1 when Active"); Verify.AreEqual("1", opacityText.DocumentText); // Lottie animations only support Windows versions rs5 and above if (PlatformConfiguration.IsOsVersionGreaterThanOrEqual(OSVersion.Redstone5)) { - Log.Comment("Verify Lottie animation is playing whith custom Lottie source and in Active state"); + Log.Comment("Verify Lottie animation is playing when in Active state"); Verify.IsTrue(Convert.ToBoolean(isPlayingText.DocumentText)); } - customLottieSourceIsActiveCheckBox.ToggleAndWait(); + Log.Comment("IsActive set to True and IsIndeterminate set to false updates ProgressRing to DeterminateActive state"); + + isIndeterminateCheckBox.ToggleAndWait(); + + Verify.IsFalse(Convert.ToBoolean(isIsIndeterminateText.DocumentText)); + + Verify.AreEqual("DeterminateActive", visualStateText.DocumentText); + + Log.Comment("Verify Lottie animation for Indeterminate player is not playing when in DeterminateActive state"); + Verify.IsFalse(Convert.ToBoolean(isPlayingText.DocumentText)); Log.Comment("IsActive set to false updates ProgressRing to Inactive state"); + + isActiveCheckBox.ToggleAndWait(); + Verify.AreEqual("Inactive", visualStateText.DocumentText); Log.Comment("Verify Lottie animation is not playing when in Inactive state"); Verify.IsFalse(Convert.ToBoolean(isPlayingText.DocumentText)); Wait.ForIdle(); + Log.Comment("Verity that opacity is 0 when Inactive"); Verify.AreEqual("0", opacityText.DocumentText); - } } @@ -152,6 +185,7 @@ public void StoryboardAnimationRetemplateTest() Log.Comment("Verify IsActive property is set to true by default for testing"); ToggleButton storyboardAnimationIsActiveCheckBox = FindElement.ByName("StoryboardAnimationIsActiveCheckBox"); + TextBlock isActiveText = FindElement.ByName("ShowIsActiveText"); TextBlock visualStateText = FindElement.ByName("VisualStateText"); diff --git a/dev/ProgressRing/ProgressRing.cpp b/dev/ProgressRing/ProgressRing.cpp index 6883124fc6..f022adbd70 100644 --- a/dev/ProgressRing/ProgressRing.cpp +++ b/dev/ProgressRing/ProgressRing.cpp @@ -9,12 +9,15 @@ #include "ResourceAccessor.h" #include "math.h" -static constexpr wstring_view s_IndeterminateAnimatedVisualPlayerName{ L"IndeterminateAnimatedVisualPlayer"sv }; -static constexpr wstring_view s_LayoutRootName { L"LayoutRoot"sv }; +static constexpr wstring_view s_LayoutRootName{ L"LayoutRoot"sv }; +static constexpr wstring_view s_LottiePlayerName{ L"LottiePlayer"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 }; +static constexpr wstring_view s_ActiveStateName{ L"Active"sv }; +static constexpr wstring_view s_DeterminateActiveStateName{ L"DeterminateActive"sv }; +static constexpr wstring_view s_InactiveStateName{ L"Inactive"sv }; ProgressRing::ProgressRing() { @@ -24,6 +27,9 @@ ProgressRing::ProgressRing() RegisterPropertyChangedCallback(winrt::Control::ForegroundProperty(), { this, &ProgressRing::OnForegroundPropertyChanged }); RegisterPropertyChangedCallback(winrt::Control::BackgroundProperty(), { this, &ProgressRing::OnBackgroundPropertyChanged }); + RegisterPropertyChangedCallback(winrt::RangeBase::ValueProperty(), { this, &ProgressRing::OnRangeBasePropertyChanged }); + RegisterPropertyChangedCallback(winrt::RangeBase::MinimumProperty(), { this, &ProgressRing::OnRangeBasePropertyChanged }); + RegisterPropertyChangedCallback(winrt::RangeBase::MaximumProperty(), { this, &ProgressRing::OnRangeBasePropertyChanged }); SetValue(s_TemplateSettingsProperty, winrt::make<::ProgressRingTemplateSettings>()); @@ -39,11 +45,22 @@ void ProgressRing::OnApplyTemplate() { winrt::IControlProtected controlProtected{ *this }; - m_player.set(GetTemplateChildT(s_IndeterminateAnimatedVisualPlayerName, controlProtected)); m_layoutRoot.set(GetTemplateChildT(s_LayoutRootName, controlProtected)); + m_player.set(GetTemplateChildT(s_LottiePlayerName, controlProtected)); SetAnimatedVisualPlayerSource(); - ChangeVisualState(); + UpdateLottieProgress(); + UpdateStates(); +} + +void ProgressRing::OnDeterminateSourcePropertyChanged(winrt::DependencyPropertyChangedEventArgs const& args) +{ + SetAnimatedVisualPlayerSource(); +} + +void ProgressRing::OnIndeterminateSourcePropertyChanged(winrt::DependencyPropertyChangedEventArgs const& args) +{ + SetAnimatedVisualPlayerSource(); } void ProgressRing::OnSizeChanged(const winrt::IInspectable&, const winrt::IInspectable&) @@ -51,6 +68,14 @@ void ProgressRing::OnSizeChanged(const winrt::IInspectable&, const winrt::IInspe ApplyTemplateSettings(); } +void ProgressRing::OnRangeBasePropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&) +{ + if (!IsIndeterminate()) + { + UpdateLottieProgress(); + } +} + void ProgressRing::OnForegroundPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&) { if (const auto foreground = Foreground().try_as()) @@ -65,9 +90,22 @@ void ProgressRing::OnForegroundColorPropertyChanged(const winrt::DependencyObjec { if (auto&& player = m_player.get()) { - if (auto const progressRingIndeterminate = player.Source().try_as()) + if (auto const progressRingAnimation = player.Source()) { - SetLottieForegroundColor(progressRingIndeterminate); + if (IsIndeterminate()) + { + if (!IndeterminateSource()) + { + SetLottieForegroundColor(progressRingAnimation); + } + } + else + { + if (!DeterminateSource()) + { + SetLottieForegroundColor(progressRingAnimation); + } + } } } } @@ -86,36 +124,84 @@ void ProgressRing::OnBackgroundColorPropertyChanged(const winrt::DependencyObjec { if (auto&& player = m_player.get()) { - if (auto const progressRingIndeterminate = player.Source().try_as()) + if (auto const progressRingAnimation = player.Source()) { - SetLottieBackgroundColor(progressRingIndeterminate); + if (IsIndeterminate()) + { + if (!IndeterminateSource()) + { + SetLottieBackgroundColor(progressRingAnimation); + } + } + else + { + if (!DeterminateSource()) + { + SetLottieBackgroundColor(progressRingAnimation); + } + } } } } void ProgressRing::OnIsActivePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args) { - ChangeVisualState(); + UpdateStates(); +} + +void ProgressRing::OnIsIndeterminatePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args) +{ + UpdateStates(); } void ProgressRing::SetAnimatedVisualPlayerSource() { if (auto&& player = m_player.get()) { - if (!player.Source()) + if (IsIndeterminate()) { - player.Source(winrt::make()); + // Check if custom indeterminate animation source is set. + if (!IndeterminateSource()) + { + // Set default indeterminate animation source. + player.Source(winrt::make()); - if (const auto progressRingIndeterminate = player.Source().try_as()) + if (const auto progressRingAnimation = player.Source()) + { + SetLottieForegroundColor(progressRingAnimation); + SetLottieBackgroundColor(progressRingAnimation); + } + } + else { - SetLottieForegroundColor(progressRingIndeterminate); - SetLottieBackgroundColor(progressRingIndeterminate); + // Set custom indeterminate animation source. + player.Source(IndeterminateSource()); } } + else + { + // Check if custom determinate animation source is set. + if (!DeterminateSource()) + { + // Set default determinate animation source. + player.Source(winrt::make()); + + if (const auto progressRingAnimation = player.Source()) + { + SetLottieForegroundColor(progressRingAnimation); + SetLottieBackgroundColor(progressRingAnimation); + } + } + else + { + // Set custom determinate animation source. + player.Source(DeterminateSource()); + } + } } } -void ProgressRing::SetLottieForegroundColor(winrt::impl::com_ref progressRingIndeterminate) +void ProgressRing::SetLottieForegroundColor(const winrt::IAnimatedVisualSource animatedVisualSource) { const auto compositor = winrt::Window::Current().Compositor(); @@ -132,10 +218,13 @@ void ProgressRing::SetLottieForegroundColor(winrt::impl::com_refGetThemeProperties(compositor).InsertVector4(s_ForegroundName, SharedHelpers::RgbaColor(foregroundColor)); + if (const auto progressRingAnimation = animatedVisualSource.try_as()) + { + progressRingAnimation->GetThemeProperties(compositor).InsertVector4(s_ForegroundName, SharedHelpers::RgbaColor(foregroundColor)); + } } -void ProgressRing::SetLottieBackgroundColor(winrt::impl::com_ref progressRingIndeterminate) +void ProgressRing::SetLottieBackgroundColor(const winrt::IAnimatedVisualSource animatedVisualSource) { const auto compositor = winrt::Window::Current().Compositor(); @@ -147,28 +236,59 @@ void ProgressRing::SetLottieBackgroundColor(winrt::impl::com_ref().Color(); } }(); - progressRingIndeterminate->GetThemeProperties(compositor).InsertVector4(s_BackgroundName, SharedHelpers::RgbaColor(backgroundColor)); + if (const auto progressRingAnimation = animatedVisualSource.try_as()) + { + progressRingAnimation->GetThemeProperties(compositor).InsertVector4(s_BackgroundName, SharedHelpers::RgbaColor(backgroundColor)); + } +} + +void ProgressRing::UpdateLottieProgress() +{ + if (auto&& player = m_player.get()) + { + const double value = Value(); + const double range = Maximum() - Minimum(); + const double fromProgress = m_oldValue / range; + const double toProgress = value / range; + + const auto _ = player.PlayAsync(fromProgress, toProgress, false); + m_oldValue = value; + } } -void ProgressRing::ChangeVisualState() +void ProgressRing::UpdateStates() { if (IsActive()) { - winrt::VisualStateManager::GoToState(*this, L"Active", true); - - if (auto&& player = m_player.get()) + if (IsIndeterminate()) { - const auto _ = player.PlayAsync(0, 1, true); + winrt::VisualStateManager::GoToState(*this, s_ActiveStateName, true); + + // Swap player source to indeterminate. + SetAnimatedVisualPlayerSource(); + + if (auto&& player = m_player.get()) + { + const auto _ = player.PlayAsync(0, 1, true); + } } + else + { + winrt::VisualStateManager::GoToState(*this, s_DeterminateActiveStateName, true); + + // Swap player source to determinate. + SetAnimatedVisualPlayerSource(); + UpdateLottieProgress(); + } } else { - winrt::VisualStateManager::GoToState(*this, L"Inactive", true); + winrt::VisualStateManager::GoToState(*this, s_InactiveStateName, true); if (auto&& player = m_player.get()) { diff --git a/dev/ProgressRing/ProgressRing.h b/dev/ProgressRing/ProgressRing.h index 79f79f21f6..65fdb09f6d 100644 --- a/dev/ProgressRing/ProgressRing.h +++ b/dev/ProgressRing/ProgressRing.h @@ -6,9 +6,10 @@ #include "pch.h" #include "common.h" -#include "ProgressRingIndeterminate.h" -#include "ProgressRingTemplateSettings.h" +#include "AnimatedVisuals/ProgressRingIndeterminate.h" +#include "AnimatedVisuals/ProgressRingDeterminate.h" +#include "ProgressRingTemplateSettings.h" #include "ProgressRing.g.h" #include "ProgressRing.properties.h" @@ -24,7 +25,10 @@ class ProgressRing : void OnApplyTemplate(); + void OnIsIndeterminatePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args); void OnIsActivePropertyChanged(const winrt::DependencyPropertyChangedEventArgs& args); + void OnDeterminateSourcePropertyChanged(winrt::DependencyPropertyChangedEventArgs const& args); + void OnIndeterminateSourcePropertyChanged(winrt::DependencyPropertyChangedEventArgs const& args); void OnForegroundPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&); void OnForegroundColorPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&); void OnBackgroundPropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&); @@ -32,12 +36,16 @@ class ProgressRing : private: void SetAnimatedVisualPlayerSource(); - void SetLottieForegroundColor(winrt::impl::com_ref progressRingIndeterminate); - void SetLottieBackgroundColor(winrt::impl::com_ref progressRingIndeterminate); + void SetLottieForegroundColor(const winrt::IAnimatedVisualSource); + void SetLottieBackgroundColor(const winrt::IAnimatedVisualSource); + void OnRangeBasePropertyChanged(const winrt::DependencyObject&, const winrt::DependencyProperty&); void OnSizeChanged(const winrt::IInspectable&, const winrt::IInspectable&); - void ChangeVisualState(); + void UpdateStates(); void ApplyTemplateSettings(); + void UpdateLottieProgress(); - tracker_ref m_player{ this }; tracker_ref m_layoutRoot{ this }; + tracker_ref m_player{ this }; + + double m_oldValue{ 0 }; }; diff --git a/dev/ProgressRing/ProgressRing.idl b/dev/ProgressRing/ProgressRing.idl index cfe7d0cda4..b9f4ad6aae 100644 --- a/dev/ProgressRing/ProgressRing.idl +++ b/dev/ProgressRing/ProgressRing.idl @@ -14,7 +14,7 @@ runtimeclass ProgressRingTemplateSettings : Windows.UI.Xaml.DependencyObject [WUXC_VERSION_MUXONLY] [webhosthidden] -unsealed runtimeclass ProgressRing : Windows.UI.Xaml.Controls.Control +unsealed runtimeclass ProgressRing : Windows.UI.Xaml.Controls.Primitives.RangeBase { ProgressRing(); @@ -22,10 +22,23 @@ unsealed runtimeclass ProgressRing : Windows.UI.Xaml.Controls.Control [MUX_DEFAULT_VALUE("true")] Boolean IsActive{ get; set; }; + [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)] + [MUX_DEFAULT_VALUE("true")] + Boolean IsIndeterminate{ get; set; }; + + [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)] + IAnimatedVisualSource DeterminateSource{ get; set; }; + + [MUX_PROPERTY_CHANGED_CALLBACK(TRUE)] + IAnimatedVisualSource IndeterminateSource{ get; set; }; + [MUX_PROPERTY_NEEDS_DP_FIELD] ProgressRingTemplateSettings TemplateSettings{ get; }; static Windows.UI.Xaml.DependencyProperty IsActiveProperty{ get; }; + static Windows.UI.Xaml.DependencyProperty IsIndeterminateProperty{ get; }; + static Windows.UI.Xaml.DependencyProperty DeterminateSourceProperty{ get; }; + static Windows.UI.Xaml.DependencyProperty IndeterminateSourceProperty{ get; }; } } diff --git a/dev/ProgressRing/ProgressRing.vcxitems b/dev/ProgressRing/ProgressRing.vcxitems index 3d4bddcf5d..e248baf208 100644 --- a/dev/ProgressRing/ProgressRing.vcxitems +++ b/dev/ProgressRing/ProgressRing.vcxitems @@ -17,17 +17,18 @@ - + + - + + - diff --git a/dev/ProgressRing/ProgressRing.vcxitems.filters b/dev/ProgressRing/ProgressRing.vcxitems.filters index 84eff3029f..315b28bdc4 100644 --- a/dev/ProgressRing/ProgressRing.vcxitems.filters +++ b/dev/ProgressRing/ProgressRing.vcxitems.filters @@ -4,18 +4,27 @@ - + + AnimatedVisuals + + + AnimatedVisuals + - - + + AnimatedVisuals + + + AnimatedVisuals + @@ -27,4 +36,9 @@ + + + {27ee48af-c650-446a-b92a-98f9d44146ff} + + \ No newline at end of file diff --git a/dev/ProgressRing/ProgressRing.xaml b/dev/ProgressRing/ProgressRing.xaml index 9955863965..755c3e88a2 100644 --- a/dev/ProgressRing/ProgressRing.xaml +++ b/dev/ProgressRing/ProgressRing.xaml @@ -2,8 +2,7 @@ + xmlns:local="using:Microsoft.UI.Xaml.Controls"> @@ -55,8 +18,22 @@ + IsActive="{x:Bind ShowIsActiveCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}" + IsIndeterminate="{x:Bind ShowIsIndeterminateCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}" + > + + + + + + + + + + + + + @@ -66,10 +43,22 @@ + + + - - + + + + + + + + + + + @@ -77,15 +66,21 @@ - - + + + + + + + diff --git a/dev/ProgressRing/TestUI/ProgressRingCustomLottieSourcePage.xaml.cs b/dev/ProgressRing/TestUI/ProgressRingCustomLottieSourcePage.xaml.cs index e8117da037..ebc6f029ac 100644 --- a/dev/ProgressRing/TestUI/ProgressRingCustomLottieSourcePage.xaml.cs +++ b/dev/ProgressRing/TestUI/ProgressRingCustomLottieSourcePage.xaml.cs @@ -2,6 +2,7 @@ using Windows.UI.Xaml; using Windows.UI.Xaml.Controls; using Windows.UI.Xaml.Media; +using Windows.UI.Xaml.Media.Animation; namespace MUXControlsTestApp { @@ -22,11 +23,12 @@ private void ProgressRingCustomLottieSourcePage_Loaded(object sender, RoutedEven var commonStatesGroup = VisualStateManager.GetVisualStateGroups(layoutRoot)[0]; commonStatesGroup.CurrentStateChanged += this.ProgressRingCustomLottieSourcePage_CurrentStateChanged; VisualStateText.Text = commonStatesGroup.CurrentState.Name; - foreach (var state in commonStatesGroup.States) - { - // Change the animation to 0 duration to avoid timing issues in the test. - state.Storyboard.Children[0].Duration = new Duration(TimeSpan.FromSeconds(0)); - } + + //for (int i = 0; i < commonStatesGroup.Transitions[0].Storyboard.Children.Count; i++) + //{ + // // Change the animation to 0 duration to avoid timing issues in the test. + // commonStatesGroup.Transitions[0].Storyboard.Children[i].Duration = new Duration(TimeSpan.FromSeconds(0)); + //} var animatedVisualPlayer = (Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer)VisualTreeHelper.GetChild(layoutRoot, 0); @@ -46,10 +48,32 @@ private void ProgressRingCustomLottieSourcePage_CurrentStateChanged(object sende OpacityText.Text = layoutRoot.Opacity.ToString(); } + public void UpdateMinMax_Click(object sender, RoutedEventArgs e) + { + TestCustomLottieSourceProgressRing.Maximum = String.IsNullOrEmpty(MaximumInput.Text) ? Double.Parse(MaximumInput.PlaceholderText) : Double.Parse(MaximumInput.Text); + TestCustomLottieSourceProgressRing.Minimum = String.IsNullOrEmpty(MinimumInput.Text) ? Double.Parse(MinimumInput.PlaceholderText) : Double.Parse(MinimumInput.Text); + } + public void UpdateWidth_Click(object sender, RoutedEventArgs e) { TestCustomLottieSourceProgressRing.Width = String.IsNullOrEmpty(WidthInput.Text) ? Double.Parse(WidthInput.PlaceholderText) : Double.Parse(WidthInput.Text); TestCustomLottieSourceProgressRing.Height = String.IsNullOrEmpty(WidthInput.Text) ? Double.Parse(WidthInput.PlaceholderText) : Double.Parse(WidthInput.Text); } + + public void UpdateValue_Click(object sender, RoutedEventArgs e) + { + TestCustomLottieSourceProgressRing.Value = String.IsNullOrEmpty(ValueInput.Text) ? Double.Parse(ValueInput.PlaceholderText) : Double.Parse(ValueInput.Text); + } + public void ChangeValue_Click(object sender, RoutedEventArgs e) + { + if (TestCustomLottieSourceProgressRing.Value + 1 > TestCustomLottieSourceProgressRing.Maximum) + { + TestCustomLottieSourceProgressRing.Value = (int)(TestCustomLottieSourceProgressRing.Minimum + 0.5); + } + else + { + TestCustomLottieSourceProgressRing.Value += 1; + } + } } } diff --git a/dev/ProgressRing/TestUI/ProgressRingPage.xaml b/dev/ProgressRing/TestUI/ProgressRingPage.xaml index e4a8c8587e..6960920bc1 100644 --- a/dev/ProgressRing/TestUI/ProgressRingPage.xaml +++ b/dev/ProgressRing/TestUI/ProgressRingPage.xaml @@ -20,6 +20,7 @@ @@ -30,10 +31,22 @@ + + + - - + + + + + + + + + + + @@ -44,10 +57,16 @@ + + + + diff --git a/dev/ProgressRing/TestUI/ProgressRingPage.xaml.cs b/dev/ProgressRing/TestUI/ProgressRingPage.xaml.cs index 9b5787a092..d80ed15b70 100644 --- a/dev/ProgressRing/TestUI/ProgressRingPage.xaml.cs +++ b/dev/ProgressRing/TestUI/ProgressRingPage.xaml.cs @@ -27,11 +27,12 @@ private void ProgressRingPage_Loaded(object sender, RoutedEventArgs e) var commonStatesGroup = VisualStateManager.GetVisualStateGroups(layoutRoot)[0]; commonStatesGroup.CurrentStateChanged += this.ProgressRingPage_CurrentStateChanged; VisualStateText.Text = commonStatesGroup.CurrentState.Name; - foreach (var state in commonStatesGroup.States) - { - // Change the animation to 0 duration to avoid timing issues in the test. - state.Storyboard.Children[0].Duration = new Duration(TimeSpan.FromSeconds(0)); - } + + //for (int i = 0; i < commonStatesGroup.Transitions[0].Storyboard.Children.Count; i++) + //{ + // // Change the animation to 0 duration to avoid timing issues in the test. + // commonStatesGroup.Transitions[0].Storyboard.Children[i].Duration = new Duration(TimeSpan.FromSeconds(0)); + //} var animatedVisualPlayer = (Microsoft.UI.Xaml.Controls.AnimatedVisualPlayer)VisualTreeHelper.GetChild(layoutRoot, 0); @@ -51,10 +52,32 @@ private void ProgressRingPage_CurrentStateChanged(object sender, VisualStateChan OpacityText.Text = layoutRoot.Opacity.ToString(); } + public void UpdateMinMax_Click(object sender, RoutedEventArgs e) + { + TestProgressRing.Maximum = String.IsNullOrEmpty(MaximumInput.Text) ? Double.Parse(MaximumInput.PlaceholderText) : Double.Parse(MaximumInput.Text); + TestProgressRing.Minimum = String.IsNullOrEmpty(MinimumInput.Text) ? Double.Parse(MinimumInput.PlaceholderText) : Double.Parse(MinimumInput.Text); + } + public void UpdateWidth_Click(object sender, RoutedEventArgs e) { TestProgressRing.Width = String.IsNullOrEmpty(WidthInput.Text) ? Double.Parse(WidthInput.PlaceholderText) : Double.Parse(WidthInput.Text); TestProgressRing.Height = String.IsNullOrEmpty(WidthInput.Text) ? Double.Parse(WidthInput.PlaceholderText) : Double.Parse(WidthInput.Text); } + + public void UpdateValue_Click(object sender, RoutedEventArgs e) + { + TestProgressRing.Value = String.IsNullOrEmpty(ValueInput.Text) ? Double.Parse(ValueInput.PlaceholderText) : Double.Parse(ValueInput.Text); + } + public void ChangeValue_Click(object sender, RoutedEventArgs e) + { + if (TestProgressRing.Value + 1 > TestProgressRing.Maximum) + { + TestProgressRing.Value = (int)(TestProgressRing.Minimum + 0.5); + } + else + { + TestProgressRing.Value += 1; + } + } } } diff --git a/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml b/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml index c89a6f6c33..5fb7efb53a 100644 --- a/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml +++ b/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml @@ -34,20 +34,6 @@ - - - - - - - Visible - - - - - - - @@ -234,6 +220,7 @@ Height="32" Width="32" IsActive="{x:Bind StoryboardAnimationIsActiveCheckBox.IsChecked, Converter={StaticResource NullableBooleanToBooleanConverter}, Mode=OneWay}" + IsIndeterminate="True" /> diff --git a/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml.cs b/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml.cs index 84f92bb817..61ed818f25 100644 --- a/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml.cs +++ b/dev/ProgressRing/TestUI/ProgressRingStoryboardAnimationPage.xaml.cs @@ -19,7 +19,7 @@ private void ProgressRingStoryboardAnimationPage_Loaded(object sender, RoutedEve { var layoutRoot = (Grid)VisualTreeHelper.GetChild(TestStoryboardAnimationProgressRing, 0); - var commonStatesGroup = VisualStateManager.GetVisualStateGroups(layoutRoot)[1]; + var commonStatesGroup = VisualStateManager.GetVisualStateGroups(layoutRoot)[0]; commonStatesGroup.CurrentStateChanged += this.ProgressRingStoryboardAnimationPage_CurrentStateChanged; VisualStateText.Text = commonStatesGroup.CurrentState.Name;