Merge pull request #4074 from AvaloniaUI/feature/fluent-progress-bar

Feature/fluent progress bar

samples/ControlCatalog/Pages/ProgressBarPage.xaml

@@ -1,29 +1,19 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             x:Class="ControlCatalog.Pages.ProgressBarPage">
+<UserControl xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="ControlCatalog.Pages.ProgressBarPage">
   <StackPanel Orientation="Vertical" Spacing="4">
     <TextBlock Classes="h1">ProgressBar</TextBlock>
     <TextBlock Classes="h2">A progress bar control</TextBlock>
-
     <StackPanel>
-      <CheckBox
-          x:Name="showProgress"
-          Margin="10,16,0,0"
-          Content="Show Progress Text" />
-      <StackPanel Orientation="Horizontal"
-                  Margin="0,16,0,0"
-                  HorizontalAlignment="Center"
-                  Spacing="16">
+      <CheckBox x:Name="showProgress" Margin="10,16,0,0" Content="Show Progress Text" />
+      <CheckBox x:Name="isIndeterminate" Margin="10,16,0,0" Content="Toggle Indeterminate" />
+      <StackPanel Orientation="Horizontal" Margin="0,16,0,0" HorizontalAlignment="Center" Spacing="16">
         <StackPanel Spacing="16">
-          <ProgressBar ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #hprogress.Value}" />
-          <ProgressBar IsIndeterminate="True"/>
+          <ProgressBar IsIndeterminate="{Binding #isIndeterminate.IsChecked}" ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #hprogress.Value}" />
         </StackPanel>
-        <ProgressBar ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #vprogress.Value}" Orientation="Vertical" />
-        <ProgressBar Orientation="Vertical" IsIndeterminate="True" />
+        <ProgressBar IsIndeterminate="{Binding #isIndeterminate.IsChecked}" ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #vprogress.Value}" Orientation="Vertical" />
       </StackPanel>
       <StackPanel Margin="16">
-        <Slider Name="hprogress" Maximum="100" Value="40"/>
-        <Slider Name="vprogress" Maximum="100" Value="60"/>
+        <Slider Name="hprogress" Maximum="100" Value="40" />
+        <Slider Name="vprogress" Maximum="100" Value="60" />
       </StackPanel>
     </StackPanel>
   </StackPanel>

src/Avalonia.Controls/ProgressBar.cs

@@ -1,8 +1,7 @@
-
 using System;
 using Avalonia.Controls.Primitives;
-using Avalonia.Data;
 using Avalonia.Layout;
+using Avalonia.Media;
 
 namespace Avalonia.Controls
 {
@@ -11,6 +10,92 @@ namespace Avalonia.Controls
     /// </summary>
     public class ProgressBar : RangeBase
     {
+        public class ProgressBarTemplateProperties : AvaloniaObject
+        {
+            private double _container2Width;
+            private double _containerWidth;
+            private double _containerAnimationStartPosition;
+            private double _containerAnimationEndPosition;
+            private double _container2AnimationStartPosition;
+            private double _container2AnimationEndPosition;
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> ContainerAnimationStartPositionProperty =
+           AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+               nameof(ContainerAnimationStartPosition),
+               p => p.ContainerAnimationStartPosition,
+               (p, o) => p.ContainerAnimationStartPosition = o, 0d);
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> ContainerAnimationEndPositionProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(ContainerAnimationEndPosition),
+                    p => p.ContainerAnimationEndPosition,
+                    (p, o) => p.ContainerAnimationEndPosition = o, 0d);
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> Container2AnimationStartPositionProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(Container2AnimationStartPosition),
+                    p => p.Container2AnimationStartPosition,
+                    (p, o) => p.Container2AnimationStartPosition = o, 0d);
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> Container2AnimationEndPositionProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(Container2AnimationEndPosition),
+                    p => p.Container2AnimationEndPosition,
+                    (p, o) => p.Container2AnimationEndPosition = o);
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> Container2WidthProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(Container2Width),
+                    p => p.Container2Width,
+                    (p, o) => p.Container2Width = o);
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> ContainerWidthProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(ContainerWidth),
+                    p => p.ContainerWidth,
+                    (p, o) => p.ContainerWidth = o);
+
+            public double ContainerAnimationStartPosition
+            {
+                get => _containerAnimationStartPosition;
+                set => SetAndRaise(ContainerAnimationStartPositionProperty, ref _containerAnimationStartPosition, value);
+            }
+
+            public double ContainerAnimationEndPosition
+            {
+                get => _containerAnimationEndPosition;
+                set => SetAndRaise(ContainerAnimationEndPositionProperty, ref _containerAnimationEndPosition, value);
+            }
+
+            public double Container2AnimationStartPosition
+            {
+                get => _container2AnimationStartPosition;
+                set => SetAndRaise(Container2AnimationStartPositionProperty, ref _container2AnimationStartPosition, value);
+            }
+
+            public double Container2Width
+            {
+                get => _container2Width;
+                set => SetAndRaise(Container2WidthProperty, ref _container2Width, value);
+            }
+
+            public double ContainerWidth
+            {
+                get => _containerWidth;
+                set => SetAndRaise(ContainerWidthProperty, ref _containerWidth, value);
+            }
+
+            public double Container2AnimationEndPosition
+            {
+                get => _container2AnimationEndPosition;
+                set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
+            }
+        }
+
+        private double _indeterminateStartingOffset;
+        private double _indeterminateEndingOffset;
+        private Border _indicator;
+
         public static readonly StyledProperty<bool> IsIndeterminateProperty =
             AvaloniaProperty.Register<ProgressBar, bool>(nameof(IsIndeterminate));
 
@@ -20,19 +105,33 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<Orientation> OrientationProperty =
             AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);
 
-        private static readonly DirectProperty<ProgressBar, double> IndeterminateStartingOffsetProperty =
+        [Obsolete("To be removed when Avalonia.Themes.Default is discontinued.")]
+        public static readonly DirectProperty<ProgressBar, double> IndeterminateStartingOffsetProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(IndeterminateStartingOffset),
                 p => p.IndeterminateStartingOffset,
                 (p, o) => p.IndeterminateStartingOffset = o);
 
-        private static readonly DirectProperty<ProgressBar, double> IndeterminateEndingOffsetProperty =
+        [Obsolete("To be removed when Avalonia.Themes.Default is discontinued.")]
+        public static readonly DirectProperty<ProgressBar, double> IndeterminateEndingOffsetProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(IndeterminateEndingOffset),
                 p => p.IndeterminateEndingOffset,
                 (p, o) => p.IndeterminateEndingOffset = o);
 
-        private Border _indicator;
+        [Obsolete("To be removed when Avalonia.Themes.Default is discontinued.")]
+        public double IndeterminateStartingOffset
+        {
+            get => _indeterminateStartingOffset;
+            set => SetAndRaise(IndeterminateStartingOffsetProperty, ref _indeterminateStartingOffset, value);
+        }
+
+        [Obsolete("To be removed when Avalonia.Themes.Default is discontinued.")]
+        public double IndeterminateEndingOffset
+        {
+            get => _indeterminateEndingOffset;
+            set => SetAndRaise(IndeterminateEndingOffsetProperty, ref _indeterminateEndingOffset, value);
+        }
 
         static ProgressBar()
         {
@@ -45,6 +144,8 @@ namespace Avalonia.Controls
             UpdatePseudoClasses(IsIndeterminate, Orientation);
         }
 
+        public ProgressBarTemplateProperties TemplateProperties { get; } = new ProgressBarTemplateProperties();
+
         public bool IsIndeterminate
         {
             get => GetValue(IsIndeterminateProperty);
@@ -62,19 +163,6 @@ namespace Avalonia.Controls
             get => GetValue(OrientationProperty);
             set => SetValue(OrientationProperty, value);
         }
-        private double _indeterminateStartingOffset;
-        private double IndeterminateStartingOffset
-        {
-            get => _indeterminateStartingOffset;
-            set => SetAndRaise(IndeterminateStartingOffsetProperty, ref _indeterminateStartingOffset, value);
-        }
-
-        private double _indeterminateEndingOffset;
-        private double IndeterminateEndingOffset
-        {
-            get => _indeterminateEndingOffset;
-            set => SetAndRaise(IndeterminateEndingOffsetProperty, ref _indeterminateEndingOffset, value);
-        }
 
         /// <inheritdoc/>
         protected override Size ArrangeOverride(Size finalSize)
@@ -111,21 +199,33 @@ namespace Avalonia.Controls
             {
                 if (IsIndeterminate)
                 {
-                    if (Orientation == Orientation.Horizontal)
-                    {
-                        var width = bounds.Width / 5.0;
-                        IndeterminateStartingOffset = -width;
-                        _indicator.Width = width;
-                        IndeterminateEndingOffset = bounds.Width;
+                    // Pulled from ModernWPF.
 
-                    }
-                    else
-                    {
-                        var height = bounds.Height / 5.0;
-                        IndeterminateStartingOffset = -bounds.Height;
-                        _indicator.Height = height;
-                        IndeterminateEndingOffset = height;
-                    }
+                    var dim = Orientation == Orientation.Horizontal ? bounds.Width : bounds.Height;
+                    var barIndicatorWidth = dim * 0.4; // Indicator width at 40% of ProgressBar
+                    var barIndicatorWidth2 = dim * 0.6; // Indicator width at 60% of ProgressBar
+
+                    TemplateProperties.ContainerWidth = barIndicatorWidth;
+                    TemplateProperties.Container2Width = barIndicatorWidth2;
+
+                    TemplateProperties.ContainerAnimationStartPosition = barIndicatorWidth * -1.8; // Position at -180%
+                    TemplateProperties.ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
+
+                    TemplateProperties.Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
+                    TemplateProperties.Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
+
+                    // Remove these properties when we switch to fluent as default and removed the old one.
+                    IndeterminateStartingOffset = -(dim / 5d);
+                    IndeterminateEndingOffset = dim;
+
+                    var padding = Padding;
+                    var rectangle = new RectangleGeometry(
+                        new Rect(
+                            padding.Left,
+                            padding.Top,
+                            bounds.Width - (padding.Right + padding.Left),
+                            bounds.Height - (padding.Bottom + padding.Top)
+                            ));
                 }
                 else
                 {

src/Avalonia.Themes.Default/ProgressBar.xaml

@@ -1,4 +1,12 @@
 <Styles xmlns="https://github.com/avaloniaui">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel>
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
+        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
   <Style Selector="ProgressBar">
     <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
     <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}"/>
@@ -69,11 +77,11 @@
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">
           <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding TemplateProperties.IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
           <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding TemplateProperties.IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>

src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml

@@ -184,6 +184,11 @@
     <SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99000000" />
     <SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="White" />
     <SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
+    <!-- BaseResources for ProgressBar.xaml -->
+    <SolidColorBrush x:Key="ProgressBarBackgroundThemeBrush" Color="#30000000" />
+    <SolidColorBrush x:Key="ProgressBarBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF4617B4" />
+    <SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF4617B4" />
 
     <!-- BaseResources for TextBox.xaml -->
     <StaticResource x:Key="TextControlForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />

src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml

@@ -187,6 +187,12 @@
     <SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="White" />
     <SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
     
+    <!-- BaseResources for ProgressBar.xaml -->
+    <SolidColorBrush x:Key="ProgressBarBackgroundThemeBrush" Color="#59FFFFFF" />
+    <SolidColorBrush x:Key="ProgressBarBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF5B2EC5" />
+    <SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF8A57FF" />
+
     <!-- BaseResources for TextBox.xaml -->
     <StaticResource x:Key="TextControlForeground" ResourceKey="SystemControlForegroundBaseHighBrush" />
     <StaticResource x:Key="TextControlForegroundPointerOver" ResourceKey="SystemControlForegroundBaseHighBrush" />

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml

@@ -336,6 +336,15 @@
     <StaticResource x:Key="MenuFlyoutSubItemRevealBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />-->
     <!--<Thickness x:Key="LanguageSwitcherMenuFlyoutItemPlaceholderThemeThickness">44,0,0,0</Thickness>-->
 
+    <!-- Resources for ProgressBar.xaml -->
+    <x:Double x:Key="ProgressBarIndicatorPauseOpacity">0.6</x:Double>
+    <x:Double x:Key="ProgressBarThemeMinHeight">4</x:Double>
+    <Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>        
+    <SolidColorBrush x:Key="ProgressBarBackgroundThemeBrush" Color="#59FFFFFF" />
+    <SolidColorBrush x:Key="ProgressBarBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF5B2EC5" />
+    <SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF8A57FF" />
+    
     <!-- Resources for TextBox.xaml -->
     <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FFFFFFFF" />
     <SolidColorBrush x:Key="TextBoxPlaceholderTextThemeBrush" Color="#AB000000" />

src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml

@@ -248,6 +248,14 @@
     <SolidColorBrush x:Key="ListBoxItemSelectedDisabledForegroundThemeBrush" Color="#99FFFFFF" />
     <SolidColorBrush x:Key="ListBoxItemSelectedForegroundThemeBrush" Color="White" />
     <SolidColorBrush x:Key="ListBoxItemSelectedPointerOverBackgroundThemeBrush" Color="#FF5F37BE" />
+    <!-- Resources for ProgressBar.xaml -->
+    <x:Double x:Key="ProgressBarIndicatorPauseOpacity">0.6</x:Double>
+    <x:Double x:Key="ProgressBarThemeMinHeight">4</x:Double>
+    <Thickness x:Key="ProgressBarBorderThemeThickness">0</Thickness>
+    <SolidColorBrush x:Key="ProgressBarBackgroundThemeBrush" Color="#30000000" />
+    <SolidColorBrush x:Key="ProgressBarBorderThemeBrush" Color="Transparent" />
+    <SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="#FF4617B4" />
+    <SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="#FF4617B4" />
 
     <!-- Resources for MenuFlyout.xaml (Menu, ContextMenu, etc) -->
     <x:Double x:Key="MenuFlyoutSeparatorThemeHeight">1</x:Double>

src/Avalonia.Themes.Fluent/ProgressBar.xaml

@@ -1,81 +1,176 @@
-<Styles xmlns="https://github.com/avaloniaui">
+<Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+  <Design.PreviewWith>
+    <Border Padding="20">
+      <StackPanel>
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
+        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
   <Style Selector="ProgressBar">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}"/>
+    <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAccentBrush}" />
+    <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}" />
+    <Setter Property="BorderThickness" Value="{DynamicResource ProgressBarBorderThemeThickness}" />
+    <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightTransparentBrush}" />
+    <Setter Property="Maximum" Value="100" />
+    <Setter Property="MinHeight" Value="{DynamicResource ProgressBarThemeMinHeight}" />
+    <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid>
-          <Border Background="{TemplateBinding Background}"
-                  BorderBrush="{TemplateBinding BorderBrush}"
-                  BorderThickness="{TemplateBinding BorderThickness}">
-            <Border Name="PART_Indicator" Background="{TemplateBinding Foreground}"/>
-          </Border>
-          <LayoutTransformControl
-                HorizontalAlignment="Center"
-                VerticalAlignment="Center"
-                IsVisible="{Binding ShowProgressText, RelativeSource={RelativeSource TemplatedParent}}"
-                Name="PART_LayoutTransformControl">
-            <TextBlock
-                Foreground="{DynamicResource ThemeForegroundBrush}"
-                Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0:0}%}" />
-          </LayoutTransformControl>
-        </Grid>
+        <Border x:Name="ProgressBarRoot" ClipToBounds="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">          
+            <Panel>
+              <Panel x:Name="DeterminateRoot">
+                <Border CornerRadius="{DynamicResource ControlCornerRadius}" x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
+              </Panel>
+              <Panel x:Name="IndeterminateRoot">
+                <Border x:Name="IndeterminateProgressBarIndicator" CornerRadius="{DynamicResource ControlCornerRadius}" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
+                <Border x:Name="IndeterminateProgressBarIndicator2" CornerRadius="{DynamicResource ControlCornerRadius}" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
+              </Panel>
+            </Panel>          
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>
   <Style Selector="ProgressBar:horizontal /template/ Border#PART_Indicator">
-    <Setter Property="HorizontalAlignment" Value="Left"/>
-    <Setter Property="VerticalAlignment" Value="Stretch"/>
+    <Setter Property="HorizontalAlignment" Value="Left" />
+    <Setter Property="VerticalAlignment" Value="Stretch" />
   </Style>
   <Style Selector="ProgressBar:vertical /template/ Border#PART_Indicator">
-    <Setter Property="HorizontalAlignment" Value="Stretch"/>
-    <Setter Property="VerticalAlignment" Value="Bottom"/>
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Bottom" />
   </Style>
   <Style Selector="ProgressBar:horizontal">
-    <Setter Property="MinWidth" Value="200"/>
-    <Setter Property="MinHeight" Value="16"/>
+    <Setter Property="MinWidth" Value="200" />
+    <Setter Property="MinHeight" Value="4" />
   </Style>
   <Style Selector="ProgressBar:vertical">
-    <Setter Property="MinWidth" Value="16"/>
-    <Setter Property="MinHeight" Value="200"/>
+    <Setter Property="MinWidth" Value="4" />
+    <Setter Property="MinHeight" Value="200" />
   </Style>
   <Style Selector="ProgressBar:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
     <Setter Property="LayoutTransform">
       <Setter.Value>
-        <RotateTransform Angle="90"/>
+        <RotateTransform Angle="90" />
       </Setter.Value>
     </Setter>
   </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#PART_Indicator">
+  <!-- FadeInAnimation mockup-->
+  <Style Selector="ProgressBar /template/ Panel#DeterminateRoot">
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+      </Transitions>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar /template/ Panel#IndeterminateRoot">
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+      </Transitions>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar /template/ Panel#DeterminateRoot">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
+  <Style Selector="ProgressBar /template/ Panel#IndeterminateRoot">
+    <Setter Property="Opacity" Value="0" />
+  </Style>
+  <Style Selector="ProgressBar:indeterminate /template/ Panel#DeterminateRoot">
+    <Setter Property="Opacity" Value="0" />
+  </Style>
+  <Style Selector="ProgressBar:indeterminate /template/ Panel#IndeterminateRoot">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
+    <Style.Animations>
+      <Animation Duration="0:0:2" IterationCount="Infinite">
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
+    <Style.Animations>
+      <Animation Duration="0:0:2" IterationCount="Infinite">
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator">
     <Style.Animations>
-      <Animation Duration="0:0:3"
-                 IterationCount="Infinite"
-                 Easing="LinearEasing">
-        <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.X"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+      <Animation Duration="0:0:2" IterationCount="Infinite">
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
         </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="TranslateTransform.X"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#PART_Indicator">
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#IndeterminateProgressBarIndicator2">
     <Style.Animations>
-      <Animation Duration="0:0:3"
-                 IterationCount="Infinite"
-                 Easing="LinearEasing">
-        <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+      <Animation Duration="0:0:2" IterationCount="Infinite">
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
         </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
   </Style>
+  <Style Selector="ProgressBar:horizontal /template/ Border#IndeterminateProgressBarIndicator">
+    <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform X="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
+    <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform X="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar:vertical /template/ Border#IndeterminateProgressBarIndicator">
+    <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform Y="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar:vertical /template/ Border#IndeterminateProgressBarIndicator2">
+    <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform Y="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
 </Styles>