From 3b317fc3080b183892a4b0c419e7c32d64fe6af5 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Thu, 28 May 2020 15:58:13 -0300
Subject: [PATCH 01/17] initial progressbar port.

---
 .../Accents/FluentBaseDark.xaml               |   5 +
 .../Accents/FluentBaseLight.xaml              |   6 +
 .../Accents/FluentControlResourcesDark.xaml   |   9 ++
 .../Accents/FluentControlResourcesLight.xaml  |   8 ++
 src/Avalonia.Themes.Fluent/ProgressBar.xaml   | 108 ++++++++++++++----
 5 files changed, 116 insertions(+), 20 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
index 7a715bbde7..aed5ac1360 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseDark.xaml
@@ -162,6 +162,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" />
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
index 5c6286a0bc..50d29f44ab 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentBaseLight.xaml
@@ -164,6 +164,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" />
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
index 7364c339f1..21181bf19d 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesDark.xaml
@@ -169,6 +169,15 @@
     <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="#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" />
diff --git a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
index 15e157f573..8ce75862f1 100644
--- a/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
+++ b/src/Avalonia.Themes.Fluent/Accents/FluentControlResourcesLight.xaml
@@ -168,6 +168,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 TextBox.xaml -->
     <SolidColorBrush x:Key="TextBoxForegroundHeaderThemeBrush" Color="#FF000000" />
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index d3c2f0c784..39a573303c 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -1,24 +1,92 @@
-<Styles xmlns="https://github.com/avaloniaui">
-  <Style Selector="ProgressBar">
-    <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}"/>
+<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 VerticalAlignment="Center" IsIndeterminate="True" Orientation="Vertical" />
+      </StackPanel>
+    </Border>
+  </Design.PreviewWith>
+  <Style Selector="ProgressBar">    
+    <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="IsTabStop" Value="False" />-->
+    <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}"/>
+          <StackPanel x:Name="IndeterminateRoot" Orientation="Horizontal" Spacing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" Opacity="0">
+            <StackPanel.RenderTransform>
+              <TranslateTransform />
+            </StackPanel.RenderTransform>
+            <Border x:Name="B5" RenderTransformOrigin="0.5,0.5">
+              <Border.RenderTransform>
+                <TranslateTransform />
+              </Border.RenderTransform>
+              <Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
+                <Ellipse.RenderTransform>
+                  <TranslateTransform />
+                </Ellipse.RenderTransform>
+              </Ellipse>
+            </Border>
+            <Border x:Name="B4" RenderTransformOrigin="0.5,0.5">
+              <Border.RenderTransform>
+                <TranslateTransform />
+              </Border.RenderTransform>
+              <Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
+                <Ellipse.RenderTransform>
+                  <TranslateTransform />
+                </Ellipse.RenderTransform>
+              </Ellipse>
+            </Border>
+            <Border x:Name="B3" RenderTransformOrigin="0.5,0.5">
+              <Border.RenderTransform>
+                <TranslateTransform />
+              </Border.RenderTransform>
+              <Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
+                <Ellipse.RenderTransform>
+                  <TranslateTransform />
+                </Ellipse.RenderTransform>
+              </Ellipse>
+            </Border>
+            <Border x:Name="B2" RenderTransformOrigin="0.5,0.5">
+              <Border.RenderTransform>
+                <TranslateTransform />
+              </Border.RenderTransform>
+              <Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
+                <Ellipse.RenderTransform>
+                  <TranslateTransform />
+                </Ellipse.RenderTransform>
+              </Ellipse>
+            </Border>
+            <Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="0.5,0.5">
+              <Border.RenderTransform>
+                <TranslateTransform />
+              </Border.RenderTransform>
+              <Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
+                <Ellipse.RenderTransform>
+                  <TranslateTransform />
+                </Ellipse.RenderTransform>
+              </Ellipse>
+            </Border>
+          </StackPanel>
+          <Border
+              x:Name="DeterminateRoot"
+              Background="{TemplateBinding Background}"
+              BorderBrush="{TemplateBinding BorderBrush}"
+              BorderThickness="{TemplateBinding BorderThickness}"              
+              CornerRadius="{DynamicResource ControlCornerRadius}">
+            <Border
+                x:Name="PART_Indicator"
+                Margin="{TemplateBinding Padding}"
+                Background="{TemplateBinding Foreground}"
+                HorizontalAlignment="Left"
+                CornerRadius="{DynamicResource ControlCornerRadius}" />
           </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>
       </ControlTemplate>
     </Setter>
@@ -33,10 +101,10 @@
   </Style>
   <Style Selector="ProgressBar:horizontal">
     <Setter Property="MinWidth" Value="200"/>
-    <Setter Property="MinHeight" Value="16"/>
+    <Setter Property="MinHeight" Value="4"/>
   </Style>
   <Style Selector="ProgressBar:vertical">
-    <Setter Property="MinWidth" Value="16"/>
+    <Setter Property="MinWidth" Value="4"/>
     <Setter Property="MinHeight" Value="200"/>
   </Style>
   <Style Selector="ProgressBar:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
@@ -48,7 +116,7 @@
   </Style>
   <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#PART_Indicator">
     <Style.Animations>
-      <Animation Duration="0:0:3"
+      <Animation Duration="0:0:1"
                  IterationCount="Infinite"
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">

From 4554a3d5d7335bcd85066ac87bb3692ab3a7eab7 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Thu, 28 May 2020 16:09:40 -0300
Subject: [PATCH 02/17] fix progress bar.

---
 samples/ControlCatalog/App.xaml             |  7 +++---
 samples/ControlCatalog/MainView.xaml.cs     | 25 ---------------------
 samples/ControlCatalog/MainWindow.xaml      |  2 +-
 src/Avalonia.Themes.Fluent/ProgressBar.xaml |  7 +++---
 4 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/samples/ControlCatalog/App.xaml b/samples/ControlCatalog/App.xaml
index 20ca291910..d59c15bb6a 100644
--- a/samples/ControlCatalog/App.xaml
+++ b/samples/ControlCatalog/App.xaml
@@ -2,9 +2,10 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              x:Class="ControlCatalog.App">
   <Application.Styles>
-    <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml"/>
-    <StyleInclude Source="avares://Avalonia.Themes.Default/Accents/BaseLight.xaml"/>
-    <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>    
+    <StyleInclude Source="resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default" />
+    <StyleInclude Source="avares://Avalonia.Themes.Fluent/Accents/FluentDark.xaml"/>
+    <StyleInclude Source="avares://Avalonia.Themes.Fluent/FluentTheme.xaml"/>
+    <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Default.xaml"/>
     <Style Selector="TextBlock.h1">
       <Setter Property="FontSize" Value="{DynamicResource FontSizeLarge}"/>
       <Setter Property="FontWeight" Value="Medium"/>
diff --git a/samples/ControlCatalog/MainView.xaml.cs b/samples/ControlCatalog/MainView.xaml.cs
index 2d01d37dbe..8738a54fa9 100644
--- a/samples/ControlCatalog/MainView.xaml.cs
+++ b/samples/ControlCatalog/MainView.xaml.cs
@@ -32,31 +32,6 @@ namespace ControlCatalog
 
             }
 
-            var light = new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
-            {
-                Source = new Uri("resm:Avalonia.Themes.Default.Accents.BaseLight.xaml?assembly=Avalonia.Themes.Default")
-            };
-            var dark = new StyleInclude(new Uri("resm:Styles?assembly=ControlCatalog"))
-            {
-                Source = new Uri("resm:Avalonia.Themes.Default.Accents.BaseDark.xaml?assembly=Avalonia.Themes.Default")
-            };
-
-
-            var themes = this.Find<ComboBox>("Themes");
-            themes.SelectionChanged += (sender, e) =>
-            {
-                switch (themes.SelectedIndex)
-                {
-                    case 0:
-                        Styles[0] = light;
-                        break;
-                    case 1:
-                        Styles[0] = dark;
-                        break;
-                }
-            };
-            Styles.Add(light);
-
             var decorations = this.Find<ComboBox>("Decorations");
             decorations.SelectionChanged += (sender, e) =>
             {
diff --git a/samples/ControlCatalog/MainWindow.xaml b/samples/ControlCatalog/MainWindow.xaml
index a0bb956425..670e30725b 100644
--- a/samples/ControlCatalog/MainWindow.xaml
+++ b/samples/ControlCatalog/MainWindow.xaml
@@ -7,7 +7,7 @@
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:vm="clr-namespace:ControlCatalog.ViewModels"
         xmlns:v="clr-namespace:ControlCatalog.Views"
-        x:Class="ControlCatalog.MainWindow" WindowState="{Binding WindowState, Mode=TwoWay}" Background="Transparent">
+        x:Class="ControlCatalog.MainWindow" WindowState="{Binding WindowState, Mode=TwoWay}">
   <NativeMenu.Menu>
     <NativeMenu>
       <NativeMenuItem Header="File">
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index 39a573303c..a77c28767e 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -3,7 +3,7 @@
     <Border Padding="20">
       <StackPanel>
         <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
-        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" Orientation="Vertical" />
+        <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
       </StackPanel>
     </Border>
   </Design.PreviewWith>
@@ -83,8 +83,7 @@
             <Border
                 x:Name="PART_Indicator"
                 Margin="{TemplateBinding Padding}"
-                Background="{TemplateBinding Foreground}"
-                HorizontalAlignment="Left"
+                Background="{TemplateBinding Foreground}"                
                 CornerRadius="{DynamicResource ControlCornerRadius}" />
           </Border>
         </Grid>
@@ -132,7 +131,7 @@
   </Style>
   <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#PART_Indicator">
     <Style.Animations>
-      <Animation Duration="0:0:3"
+      <Animation Duration="0:0:1"
                  IterationCount="Infinite"
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">

From 07ec67126583d97794ab78dc93608319847b119b Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Thu, 4 Jun 2020 15:36:19 +0800
Subject: [PATCH 03/17] Add indeterminate animations

---
 src/Avalonia.Controls/ProgressBar.cs        | 132 ++++--
 src/Avalonia.Themes.Fluent/ProgressBar.xaml | 472 ++++++++++++++++----
 2 files changed, 497 insertions(+), 107 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index c7356f2b4d..3ffbdf331f 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -20,17 +20,47 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<Orientation> OrientationProperty =
             AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);
 
-        private static readonly DirectProperty<ProgressBar, double> IndeterminateStartingOffsetProperty =
+        public static readonly DirectProperty<ProgressBar, double> ContainerAnimationStartPositionProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(IndeterminateStartingOffset),
-                p => p.IndeterminateStartingOffset,
-                (p, o) => p.IndeterminateStartingOffset = o);
+                nameof(ContainerAnimationStartPosition),
+                p => p.ContainerAnimationStartPosition,
+                (p, o) => p.ContainerAnimationStartPosition = o);
 
-        private static readonly DirectProperty<ProgressBar, double> IndeterminateEndingOffsetProperty =
+        public static readonly DirectProperty<ProgressBar, double> ContainerAnimationEndPositionProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(IndeterminateEndingOffset),
-                p => p.IndeterminateEndingOffset,
-                (p, o) => p.IndeterminateEndingOffset = o);
+                nameof(ContainerAnimationEndPosition),
+                p => p.ContainerAnimationEndPosition,
+                (p, o) => p.ContainerAnimationEndPosition = o);
+
+        public static readonly DirectProperty<ProgressBar, double> ContainerAnimationMidPositionProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(ContainerAnimationMidPosition),
+                p => p.ContainerAnimationMidPosition,
+                (p, o) => p.ContainerAnimationMidPosition = o);
+
+        public static readonly DirectProperty<ProgressBar, double> EllipseAnimationEndPositionProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(EllipseAnimationEndPosition),
+                p => p.EllipseAnimationEndPosition,
+                (p, o) => p.EllipseAnimationEndPosition = o);
+
+        public static readonly DirectProperty<ProgressBar, double> EllipseAnimationWellPositionProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(EllipseAnimationWellPosition),
+                p => p.EllipseAnimationWellPosition,
+                (p, o) => p.EllipseAnimationWellPosition = o);
+
+        public static readonly DirectProperty<ProgressBar, double> EllipseDiameterProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(EllipseDiameter),
+                p => p.EllipseDiameter,
+                (p, o) => p.EllipseDiameter = o);
+
+        public static readonly DirectProperty<ProgressBar, double> EllipseOffsetProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(EllipseOffset),
+                p => p.EllipseOffset,
+                (p, o) => p.EllipseOffset = o);
 
         private Border _indicator;
 
@@ -62,18 +92,54 @@ namespace Avalonia.Controls
             get => GetValue(OrientationProperty);
             set => SetValue(OrientationProperty, value);
         }
-        private double _indeterminateStartingOffset;
-        private double IndeterminateStartingOffset
+
+        private double _containerAnimationStartPosition;
+        public double ContainerAnimationStartPosition
+        {
+            get => _containerAnimationStartPosition;
+            set => SetAndRaise(ContainerAnimationStartPositionProperty, ref _containerAnimationStartPosition, value);
+        }
+
+        private double _containerAnimationEndPosition;
+        public double ContainerAnimationEndPosition
+        {
+            get => _containerAnimationEndPosition;
+            set => SetAndRaise(ContainerAnimationEndPositionProperty, ref _containerAnimationEndPosition, value);
+        }
+
+        private double _containerAnimationMidPosition;
+        public double ContainerAnimationMidPosition
         {
-            get => _indeterminateStartingOffset;
-            set => SetAndRaise(IndeterminateStartingOffsetProperty, ref _indeterminateStartingOffset, value);
+            get => _containerAnimationMidPosition;
+            set => SetAndRaise(ContainerAnimationMidPositionProperty, ref _containerAnimationMidPosition, value);
         }
 
-        private double _indeterminateEndingOffset;
-        private double IndeterminateEndingOffset
+        private double _ellipseAnimationEndPosition;
+        public double EllipseAnimationEndPosition
         {
-            get => _indeterminateEndingOffset;
-            set => SetAndRaise(IndeterminateEndingOffsetProperty, ref _indeterminateEndingOffset, value);
+            get => _ellipseAnimationEndPosition;
+            set => SetAndRaise(EllipseAnimationEndPositionProperty, ref _ellipseAnimationEndPosition, value);
+        }
+
+        private double _ellipseAnimationWellPosition;
+        public double EllipseAnimationWellPosition
+        {
+            get => _ellipseAnimationWellPosition;
+            set => SetAndRaise(EllipseAnimationWellPositionProperty, ref _ellipseAnimationWellPosition, value);
+        }
+
+        private double _ellipseDiameter;
+        public double EllipseDiameter
+        {
+            get => _ellipseDiameter;
+            set => SetAndRaise(EllipseDiameterProperty, ref _ellipseDiameter, value);
+        }
+
+        private double _ellipseOffset;
+        public double EllipseOffset
+        {
+            get => _ellipseOffset;
+            set => SetAndRaise(EllipseOffsetProperty, ref _ellipseOffset, value);
         }
 
         /// <inheritdoc/>
@@ -111,20 +177,34 @@ 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.
+
+                    var dim = Orientation == Orientation.Horizontal ? bounds.Width : bounds.Height;
+                    var barIndicatorWidth = dim * 0.4; // Indicator width at 40% of ProgressBar
 
+                    ContainerAnimationStartPosition = barIndicatorWidth * -1.0; // Position at -100%
+                    ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
+                    ContainerAnimationMidPosition = dim * 0.2;
+                    EllipseAnimationEndPosition = (1.0 / 3.0) * dim;
+                    EllipseAnimationWellPosition = (2.0 / 3.0) * dim;
+
+                    if (dim <= 180.0)
+                    {
+                        // Small ellipse diameter and offset.
+                        EllipseDiameter = 4.0;
+                        EllipseOffset = 4.0;
+                    }
+                    else if (dim <= 280.0)
+                    {
+                        // Medium ellipse diameter and offset.
+                        EllipseDiameter = 5.0;
+                        EllipseOffset = 7.0;
                     }
                     else
                     {
-                        var height = bounds.Height / 5.0;
-                        IndeterminateStartingOffset = -bounds.Height;
-                        _indicator.Height = height;
-                        IndeterminateEndingOffset = height;
+                        // Large ellipse diameter and offset.
+                        EllipseDiameter = 6.0;
+                        EllipseOffset = 9.0;
                     }
                 }
                 else
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index a77c28767e..3459a2ad3e 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -7,7 +7,7 @@
       </StackPanel>
     </Border>
   </Design.PreviewWith>
-  <Style Selector="ProgressBar">    
+  <Style Selector="ProgressBar">
     <Setter Property="Foreground" Value="{DynamicResource SystemControlHighlightAccentBrush}" />
     <Setter Property="Background" Value="{DynamicResource SystemControlBackgroundBaseLowBrush}" />
     <Setter Property="BorderThickness" Value="{DynamicResource ProgressBarBorderThemeThickness}" />
@@ -19,128 +19,438 @@
     <Setter Property="Template">
       <ControlTemplate>
         <Grid>
-          <StackPanel x:Name="IndeterminateRoot" Orientation="Horizontal" Spacing="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseOffset}" Opacity="0">
-            <StackPanel.RenderTransform>
-              <TranslateTransform />
-            </StackPanel.RenderTransform>
+          <StackPanel x:Name="IndeterminateRoot" Orientation="{TemplateBinding Orientation}" Spacing="{TemplateBinding EllipseOffset}">
             <Border x:Name="B5" RenderTransformOrigin="0.5,0.5">
-              <Border.RenderTransform>
-                <TranslateTransform />
-              </Border.RenderTransform>
-              <Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
-                <Ellipse.RenderTransform>
-                  <TranslateTransform />
-                </Ellipse.RenderTransform>
-              </Ellipse>
+              <Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
             </Border>
             <Border x:Name="B4" RenderTransformOrigin="0.5,0.5">
-              <Border.RenderTransform>
-                <TranslateTransform />
-              </Border.RenderTransform>
-              <Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
-                <Ellipse.RenderTransform>
-                  <TranslateTransform />
-                </Ellipse.RenderTransform>
-              </Ellipse>
+              <Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
             </Border>
             <Border x:Name="B3" RenderTransformOrigin="0.5,0.5">
-              <Border.RenderTransform>
-                <TranslateTransform />
-              </Border.RenderTransform>
-              <Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
-                <Ellipse.RenderTransform>
-                  <TranslateTransform />
-                </Ellipse.RenderTransform>
-              </Ellipse>
+              <Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
             </Border>
             <Border x:Name="B2" RenderTransformOrigin="0.5,0.5">
-              <Border.RenderTransform>
-                <TranslateTransform />
-              </Border.RenderTransform>
-              <Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
-                <Ellipse.RenderTransform>
-                  <TranslateTransform />
-                </Ellipse.RenderTransform>
-              </Ellipse>
+              <Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
             </Border>
             <Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="0.5,0.5">
-              <Border.RenderTransform>
-                <TranslateTransform />
-              </Border.RenderTransform>
-              <Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Width="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" Height="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.EllipseDiameter}" RenderTransformOrigin="0.5,0.5">
-                <Ellipse.RenderTransform>
-                  <TranslateTransform />
-                </Ellipse.RenderTransform>
-              </Ellipse>
+              <Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
             </Border>
           </StackPanel>
-          <Border
-              x:Name="DeterminateRoot"
-              Background="{TemplateBinding Background}"
-              BorderBrush="{TemplateBinding BorderBrush}"
-              BorderThickness="{TemplateBinding BorderThickness}"              
-              CornerRadius="{DynamicResource ControlCornerRadius}">
-            <Border
-                x:Name="PART_Indicator"
-                Margin="{TemplateBinding Padding}"
-                Background="{TemplateBinding Foreground}"                
-                CornerRadius="{DynamicResource ControlCornerRadius}" />
+          <Border x:Name="DeterminateRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
+            <Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" CornerRadius="{DynamicResource ControlCornerRadius}" />
           </Border>
         </Grid>
       </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="4"/>
+    <Setter Property="MinWidth" Value="200" />
+    <Setter Property="MinHeight" Value="4" />
   </Style>
   <Style Selector="ProgressBar:vertical">
-    <Setter Property="MinWidth" Value="4"/>
-    <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">
+  <Style Selector="ProgressBar:indeterminate /template/ Border#PART_Indicator">
+    <Setter Property="IsVisible" Value="False" />
+  </Style>
+  <!-- Horizontal ProgressBar Animation -->
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ StackPanel#IndeterminateRoot">
     <Style.Animations>
-      <Animation Duration="0:0:1"
-                 IterationCount="Infinite"
-                 Easing="LinearEasing">
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
         <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.X"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
-          <Setter Property="TranslateTransform.X"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E1">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E2">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.167" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E3">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.333" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E4">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.5" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E5">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.667" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B1">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.5">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3">
+          <Setter Property="TranslateTransform.X" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B2">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.667">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.167">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.167">
+          <Setter Property="TranslateTransform.X" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B3">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.833">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.333">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.333">
+          <Setter Property="TranslateTransform.X" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B4">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.5">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.5">
+          <Setter Property="TranslateTransform.X" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B5">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.X" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1.167">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.667">
+          <Setter Property="TranslateTransform.X" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.667">
+          <Setter Property="TranslateTransform.X" Value="100" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#PART_Indicator">
+  <!-- Vertical ProgressBar Animation -->
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ StackPanel#IndeterminateRoot">
     <Style.Animations>
-      <Animation Duration="0:0:1"
-                 IterationCount="Infinite"
-                 Easing="LinearEasing">
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
         <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="TranslateTransform.Y" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
-          <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="TranslateTransform.Y" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E1">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E2">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.167" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E3">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.333" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E4">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.5" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E5">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" Delay="0.667" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B1">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.5">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3">
+          <Setter Property="TranslateTransform.Y" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B2">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.667">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.167">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.167">
+          <Setter Property="TranslateTransform.Y" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B3">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.833">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.333">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.333">
+          <Setter Property="TranslateTransform.Y" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B4">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.5">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.5">
+          <Setter Property="TranslateTransform.Y" Value="100" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B5">
+    <Style.Animations>
+      <Animation Duration="0:0:3.917" IterationCount="Infinite">
+        <KeyFrame KeyTime="0">
+          <Setter Property="TranslateTransform.Y" Value="-50" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1.167">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2.667">
+          <Setter Property="TranslateTransform.Y" Value="0" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:3.667">
+          <Setter Property="TranslateTransform.Y" Value="100" />
         </KeyFrame>
       </Animation>
     </Style.Animations>

From 3f6d98adb7331917c0b0b0abc24a71f861900303 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Thu, 4 Jun 2020 15:45:41 +0800
Subject: [PATCH 04/17] use relative on rto

---
 src/Avalonia.Themes.Fluent/ProgressBar.xaml | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index 3459a2ad3e..de228f641d 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -14,26 +14,25 @@
     <Setter Property="BorderBrush" Value="{DynamicResource SystemControlHighlightTransparentBrush}" />
     <Setter Property="Maximum" Value="100" />
     <Setter Property="MinHeight" Value="{DynamicResource ProgressBarThemeMinHeight}" />
-    <!--<Setter Property="IsTabStop" Value="False" />-->
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
         <Grid>
           <StackPanel x:Name="IndeterminateRoot" Orientation="{TemplateBinding Orientation}" Spacing="{TemplateBinding EllipseOffset}">
-            <Border x:Name="B5" RenderTransformOrigin="0.5,0.5">
-              <Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
+            <Border x:Name="B5" RenderTransformOrigin="50%,50%">
+              <Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
             </Border>
-            <Border x:Name="B4" RenderTransformOrigin="0.5,0.5">
-              <Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
+            <Border x:Name="B4" RenderTransformOrigin="50%,50%">
+              <Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
             </Border>
-            <Border x:Name="B3" RenderTransformOrigin="0.5,0.5">
-              <Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
+            <Border x:Name="B3" RenderTransformOrigin="50%,50%">
+              <Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
             </Border>
-            <Border x:Name="B2" RenderTransformOrigin="0.5,0.5">
-              <Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
+            <Border x:Name="B2" RenderTransformOrigin="50%,50%">
+              <Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
             </Border>
-            <Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="0.5,0.5">
-              <Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="0.5,0.5" />
+            <Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="50%,50%">
+              <Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
             </Border>
           </StackPanel>
           <Border x:Name="DeterminateRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">

From a20c1fa5c7fa50b1aba45e414a5b23434cd0b632 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Thu, 4 Jun 2020 22:42:01 +0800
Subject: [PATCH 05/17] add container2 props

---
 src/Avalonia.Controls/ProgressBar.cs | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index 3ffbdf331f..7143bc2b7f 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -32,6 +32,20 @@ namespace Avalonia.Controls
                 p => p.ContainerAnimationEndPosition,
                 (p, o) => p.ContainerAnimationEndPosition = o);
 
+
+        public static readonly DirectProperty<ProgressBar, double> Container2AnimationStartPositionProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(Container2AnimationStartPosition),
+                p => p.Container2AnimationStartPosition,
+                (p, o) => p.Container2AnimationStartPosition = o);
+
+        public static readonly DirectProperty<ProgressBar, double> Container2AnimationEndPositionProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(Container2AnimationEndPosition),
+                p => p.Container2AnimationEndPosition,
+                (p, o) => p.Container2AnimationEndPosition = o);
+
+
         public static readonly DirectProperty<ProgressBar, double> ContainerAnimationMidPositionProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(ContainerAnimationMidPosition),
@@ -107,6 +121,21 @@ namespace Avalonia.Controls
             set => SetAndRaise(ContainerAnimationEndPositionProperty, ref _containerAnimationEndPosition, value);
         }
 
+        private double _container2AnimationStartPosition;
+        public double Container2AnimationStartPosition
+        {
+            get => _container2AnimationStartPosition;
+            set => SetAndRaise(Container2AnimationStartPositionProperty, ref _container2AnimationStartPosition, value);
+        }
+
+        private double _container2AnimationEndPosition;
+        public double Container2AnimationEndPosition
+        {
+            get => _container2AnimationEndPosition;
+            set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
+        }
+
+
         private double _containerAnimationMidPosition;
         public double ContainerAnimationMidPosition
         {
@@ -181,9 +210,13 @@ namespace Avalonia.Controls
 
                     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
 
                     ContainerAnimationStartPosition = barIndicatorWidth * -1.0; // Position at -100%
                     ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
+                    Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
+                    Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
+
                     ContainerAnimationMidPosition = dim * 0.2;
                     EllipseAnimationEndPosition = (1.0 / 3.0) * dim;
                     EllipseAnimationWellPosition = (2.0 / 3.0) * dim;

From d3dc52fa75d279a4b3a023b1da03dbd298d5eb65 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Thu, 4 Jun 2020 22:45:33 +0800
Subject: [PATCH 06/17] remove ellipse props

---
 src/Avalonia.Controls/ProgressBar.cs | 80 ++--------------------------
 1 file changed, 3 insertions(+), 77 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index 7143bc2b7f..7a0c168d22 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -51,31 +51,7 @@ namespace Avalonia.Controls
                 nameof(ContainerAnimationMidPosition),
                 p => p.ContainerAnimationMidPosition,
                 (p, o) => p.ContainerAnimationMidPosition = o);
-
-        public static readonly DirectProperty<ProgressBar, double> EllipseAnimationEndPositionProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(EllipseAnimationEndPosition),
-                p => p.EllipseAnimationEndPosition,
-                (p, o) => p.EllipseAnimationEndPosition = o);
-
-        public static readonly DirectProperty<ProgressBar, double> EllipseAnimationWellPositionProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(EllipseAnimationWellPosition),
-                p => p.EllipseAnimationWellPosition,
-                (p, o) => p.EllipseAnimationWellPosition = o);
-
-        public static readonly DirectProperty<ProgressBar, double> EllipseDiameterProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(EllipseDiameter),
-                p => p.EllipseDiameter,
-                (p, o) => p.EllipseDiameter = o);
-
-        public static readonly DirectProperty<ProgressBar, double> EllipseOffsetProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(EllipseOffset),
-                p => p.EllipseOffset,
-                (p, o) => p.EllipseOffset = o);
-
+                
         private Border _indicator;
 
         static ProgressBar()
@@ -142,35 +118,7 @@ namespace Avalonia.Controls
             get => _containerAnimationMidPosition;
             set => SetAndRaise(ContainerAnimationMidPositionProperty, ref _containerAnimationMidPosition, value);
         }
-
-        private double _ellipseAnimationEndPosition;
-        public double EllipseAnimationEndPosition
-        {
-            get => _ellipseAnimationEndPosition;
-            set => SetAndRaise(EllipseAnimationEndPositionProperty, ref _ellipseAnimationEndPosition, value);
-        }
-
-        private double _ellipseAnimationWellPosition;
-        public double EllipseAnimationWellPosition
-        {
-            get => _ellipseAnimationWellPosition;
-            set => SetAndRaise(EllipseAnimationWellPositionProperty, ref _ellipseAnimationWellPosition, value);
-        }
-
-        private double _ellipseDiameter;
-        public double EllipseDiameter
-        {
-            get => _ellipseDiameter;
-            set => SetAndRaise(EllipseDiameterProperty, ref _ellipseDiameter, value);
-        }
-
-        private double _ellipseOffset;
-        public double EllipseOffset
-        {
-            get => _ellipseOffset;
-            set => SetAndRaise(EllipseOffsetProperty, ref _ellipseOffset, value);
-        }
-
+ 
         /// <inheritdoc/>
         protected override Size ArrangeOverride(Size finalSize)
         {
@@ -216,29 +164,7 @@ namespace Avalonia.Controls
                     ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
                     Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
                     Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
-
-                    ContainerAnimationMidPosition = dim * 0.2;
-                    EllipseAnimationEndPosition = (1.0 / 3.0) * dim;
-                    EllipseAnimationWellPosition = (2.0 / 3.0) * dim;
-
-                    if (dim <= 180.0)
-                    {
-                        // Small ellipse diameter and offset.
-                        EllipseDiameter = 4.0;
-                        EllipseOffset = 4.0;
-                    }
-                    else if (dim <= 280.0)
-                    {
-                        // Medium ellipse diameter and offset.
-                        EllipseDiameter = 5.0;
-                        EllipseOffset = 7.0;
-                    }
-                    else
-                    {
-                        // Large ellipse diameter and offset.
-                        EllipseDiameter = 6.0;
-                        EllipseOffset = 9.0;
-                    }
+                    ContainerAnimationMidPosition = dim * 0.2; 
                 }
                 else
                 {

From 1faa61c670e1598e9d628f2c623aef84e73aac30 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Thu, 4 Jun 2020 23:42:08 +0800
Subject: [PATCH 07/17] almost working... :(

---
 src/Avalonia.Controls/ProgressBar.cs        |  73 +++-
 src/Avalonia.Themes.Fluent/ProgressBar.xaml | 425 ++------------------
 2 files changed, 103 insertions(+), 395 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index 7a0c168d22..d72ab34947 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -3,6 +3,7 @@ using System;
 using Avalonia.Controls.Primitives;
 using Avalonia.Data;
 using Avalonia.Layout;
+using Avalonia.Media;
 
 namespace Avalonia.Controls
 {
@@ -51,7 +52,15 @@ namespace Avalonia.Controls
                 nameof(ContainerAnimationMidPosition),
                 p => p.ContainerAnimationMidPosition,
                 (p, o) => p.ContainerAnimationMidPosition = o);
-                
+
+
+
+        public static readonly DirectProperty<ProgressBar, Geometry> ClipRectProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, Geometry>(
+                nameof(ClipRect),
+                p => p.ClipRect,
+                (p, o) => p.ClipRect = o);
+
         private Border _indicator;
 
         static ProgressBar()
@@ -104,6 +113,40 @@ namespace Avalonia.Controls
             set => SetAndRaise(Container2AnimationStartPositionProperty, ref _container2AnimationStartPosition, value);
         }
 
+       
+              
+       
+       
+        public static readonly DirectProperty<ProgressBar, double> Container2WidthProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(Container2Width),
+                p => p.Container2Width,
+                (p, o) => p.Container2Width = o);
+
+       
+       
+        private double _Container2Width;
+        public double Container2Width
+        {
+            get => _Container2Width;
+            set => SetAndRaise(Container2WidthProperty, ref _Container2Width, value);
+        }
+       
+        public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(ContainerWidth),
+                p => p.ContainerWidth,
+                (p, o) => p.ContainerWidth = o);
+
+       
+       
+        private double _ContainerWidth;
+        public double ContainerWidth
+        {
+            get => _ContainerWidth;
+            set => SetAndRaise(ContainerWidthProperty, ref _ContainerWidth, value);
+        }
+
         private double _container2AnimationEndPosition;
         public double Container2AnimationEndPosition
         {
@@ -111,14 +154,20 @@ namespace Avalonia.Controls
             set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
         }
 
-
         private double _containerAnimationMidPosition;
         public double ContainerAnimationMidPosition
         {
             get => _containerAnimationMidPosition;
             set => SetAndRaise(ContainerAnimationMidPositionProperty, ref _containerAnimationMidPosition, value);
         }
- 
+
+        private Geometry _clipRect;
+        public Geometry ClipRect
+        {
+            get => _clipRect;
+            set => SetAndRaise(ClipRectProperty, ref _clipRect, value);
+        }
+
         /// <inheritdoc/>
         protected override Size ArrangeOverride(Size finalSize)
         {
@@ -160,11 +209,27 @@ namespace Avalonia.Controls
                     var barIndicatorWidth = dim * 0.4; // Indicator width at 40% of ProgressBar
                     var barIndicatorWidth2 = dim * 0.6; // Indicator width at 60% of ProgressBar
 
+                    ContainerWidth = barIndicatorWidth;
+                    Container2Width = barIndicatorWidth2;
+
                     ContainerAnimationStartPosition = barIndicatorWidth * -1.0; // Position at -100%
                     ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
+                    
                     Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
                     Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
-                    ContainerAnimationMidPosition = dim * 0.2; 
+                    
+                    ContainerAnimationMidPosition = dim * 0.2;
+
+                    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)
+                            ));
+
+                    ClipRect = rectangle;
                 }
                 else
                 {
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index de228f641d..8abaead8a1 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -17,28 +17,15 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Grid>
-          <StackPanel x:Name="IndeterminateRoot" Orientation="{TemplateBinding Orientation}" Spacing="{TemplateBinding EllipseOffset}">
-            <Border x:Name="B5" RenderTransformOrigin="50%,50%">
-              <Ellipse x:Name="E5" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
-            </Border>
-            <Border x:Name="B4" RenderTransformOrigin="50%,50%">
-              <Ellipse x:Name="E4" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
-            </Border>
-            <Border x:Name="B3" RenderTransformOrigin="50%,50%">
-              <Ellipse x:Name="E3" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
-            </Border>
-            <Border x:Name="B2" RenderTransformOrigin="50%,50%">
-              <Ellipse x:Name="E2" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
-            </Border>
-            <Border x:Name="B1" Grid.Column="8" RenderTransformOrigin="50%,50%">
-              <Ellipse x:Name="E1" Fill="{TemplateBinding Foreground}" Width="{TemplateBinding EllipseDiameter}" Height="{TemplateBinding EllipseDiameter}" RenderTransformOrigin="50%,50%" />
-            </Border>
-          </StackPanel>
-          <Border x:Name="DeterminateRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
-            <Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" CornerRadius="{DynamicResource ControlCornerRadius}" />
+        <Border x:Name="ProgressBarRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
+          <Border Clip="{TemplateBinding ClipRect}">
+            <Grid>
+              <Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
+              <Rectangle Width="{TemplateBinding ContainerWidth}" x:Name="IndeterminateProgressBarIndicator" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
+              <Rectangle Width="{TemplateBinding Container2Width}" x:Name="IndeterminateProgressBarIndicator2" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
+            </Grid>
           </Border>
-        </Grid>
+        </Border>
       </ControlTemplate>
     </Setter>
   </Style>
@@ -68,388 +55,44 @@
   <Style Selector="ProgressBar:indeterminate /template/ Border#PART_Indicator">
     <Setter Property="IsVisible" Value="False" />
   </Style>
-  <!-- Horizontal ProgressBar Animation -->
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ StackPanel#IndeterminateRoot">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
+  <Style Selector="ProgressBar /template/ Rectangle#IndeterminateProgressBarIndicator">
+    <Setter Property="Opacity" Value="0" />
   </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E1">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
+  <Style Selector="ProgressBar /template/ Rectangle#IndeterminateProgressBarIndicator2">
+    <Setter Property="Opacity" Value="0" />
   </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E2">
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator">
     <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.167" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E3">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.333" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E4">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.5" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Ellipse#E5">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.667" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.X" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B1">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.5">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3">
-          <Setter Property="TranslateTransform.X" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B2">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.667">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.167">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.167">
-          <Setter Property="TranslateTransform.X" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B3">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.833">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.333">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.333">
-          <Setter Property="TranslateTransform.X" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B4">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.5">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.5">
-          <Setter Property="TranslateTransform.X" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#B5">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.X" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1.167">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.667">
-          <Setter Property="TranslateTransform.X" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.667">
-          <Setter Property="TranslateTransform.X" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <!-- Vertical ProgressBar Animation -->
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ StackPanel#IndeterminateRoot">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame Cue="0%">
-          <Setter Property="TranslateTransform.Y" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame Cue="100%">
-          <Setter Property="TranslateTransform.Y" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E1">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E2">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.167" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E3">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.333" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E4">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.5" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Ellipse#E5">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" Delay="0.667" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationWellPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding EllipseAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B1">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.5">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3">
-          <Setter Property="TranslateTransform.Y" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B2">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.667">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.167">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.167">
-          <Setter Property="TranslateTransform.Y" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B3">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.833">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.333">
-          <Setter Property="TranslateTransform.Y" Value="0" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.333">
-          <Setter Property="TranslateTransform.Y" Value="100" />
-        </KeyFrame>
-      </Animation>
-    </Style.Animations>
-  </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B4">
-    <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1">
-          <Setter Property="TranslateTransform.Y" Value="0" />
+      <Animation Duration="0:0:2" IterationCount="Infinite">
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4, 0.0, 0.6, 1.0">
+          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="Opacity" Value="1" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.5">
-          <Setter Property="TranslateTransform.Y" Value="0" />
+        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4, 0.0, 0.6, 1.0">
+          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="Opacity" Value="1" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.5">
-          <Setter Property="TranslateTransform.Y" Value="100" />
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4, 0.0, 0.6, 1.0">
+          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="Opacity" Value="0" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#B5">
+  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator2">
     <Style.Animations>
-      <Animation Duration="0:0:3.917" IterationCount="Infinite">
-        <KeyFrame KeyTime="0">
-          <Setter Property="TranslateTransform.Y" Value="-50" />
-        </KeyFrame>
-        <KeyFrame KeyTime="0:0:1.167">
-          <Setter Property="TranslateTransform.Y" Value="0" />
+      <Animation Duration="0:0:2" IterationCount="Infinite">
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4, 0.0, 0.6, 1.0">
+          <Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="Opacity" Value="1" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:2.667">
-          <Setter Property="TranslateTransform.Y" Value="0" />
+        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4, 0.0, 0.6, 1.0">
+          <Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="Opacity" Value="1" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:3.667">
-          <Setter Property="TranslateTransform.Y" Value="100" />
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4, 0.0, 0.6, 1.0">
+          <Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+          <Setter Property="Opacity" Value="0" />
         </KeyFrame>
       </Animation>
     </Style.Animations>

From ef2a96cae7d73bb0401b165eb7d1b536899a00c7 Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Fri, 5 Jun 2020 16:15:26 +0800
Subject: [PATCH 08/17] use winui3 style

---
 .../ControlCatalog/Pages/ProgressBarPage.xaml |  26 ++--
 src/Avalonia.Controls/ProgressBar.cs          |  54 ++------
 src/Avalonia.Themes.Fluent/ProgressBar.xaml   | 128 ++++++++++++++----
 3 files changed, 126 insertions(+), 82 deletions(-)

diff --git a/samples/ControlCatalog/Pages/ProgressBarPage.xaml b/samples/ControlCatalog/Pages/ProgressBarPage.xaml
index 13bae59805..2ec0b48c76 100644
--- a/samples/ControlCatalog/Pages/ProgressBarPage.xaml
+++ b/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>
diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index d72ab34947..cdbafb314f 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -25,20 +25,19 @@ namespace Avalonia.Controls
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(ContainerAnimationStartPosition),
                 p => p.ContainerAnimationStartPosition,
-                (p, o) => p.ContainerAnimationStartPosition = o);
+                (p, o) => p.ContainerAnimationStartPosition = o, 0d);
 
         public static readonly DirectProperty<ProgressBar, double> ContainerAnimationEndPositionProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(ContainerAnimationEndPosition),
                 p => p.ContainerAnimationEndPosition,
-                (p, o) => p.ContainerAnimationEndPosition = o);
-
+                (p, o) => p.ContainerAnimationEndPosition = o, 0d);
 
         public static readonly DirectProperty<ProgressBar, double> Container2AnimationStartPositionProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(Container2AnimationStartPosition),
                 p => p.Container2AnimationStartPosition,
-                (p, o) => p.Container2AnimationStartPosition = o);
+                (p, o) => p.Container2AnimationStartPosition = o, 0d);
 
         public static readonly DirectProperty<ProgressBar, double> Container2AnimationEndPositionProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
@@ -46,14 +45,17 @@ namespace Avalonia.Controls
                 p => p.Container2AnimationEndPosition,
                 (p, o) => p.Container2AnimationEndPosition = o);
 
-
-        public static readonly DirectProperty<ProgressBar, double> ContainerAnimationMidPositionProperty =
+        public static readonly DirectProperty<ProgressBar, double> Container2WidthProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(ContainerAnimationMidPosition),
-                p => p.ContainerAnimationMidPosition,
-                (p, o) => p.ContainerAnimationMidPosition = o);
-
-
+                nameof(Container2Width),
+                p => p.Container2Width,
+                (p, o) => p.Container2Width = o);
+                
+        public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
+            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
+                nameof(ContainerWidth),
+                p => p.ContainerWidth,
+                (p, o) => p.ContainerWidth = o);
 
         public static readonly DirectProperty<ProgressBar, Geometry> ClipRectProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, Geometry>(
@@ -113,15 +115,6 @@ namespace Avalonia.Controls
             set => SetAndRaise(Container2AnimationStartPositionProperty, ref _container2AnimationStartPosition, value);
         }
 
-       
-              
-       
-       
-        public static readonly DirectProperty<ProgressBar, double> Container2WidthProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(Container2Width),
-                p => p.Container2Width,
-                (p, o) => p.Container2Width = o);
 
        
        
@@ -131,15 +124,7 @@ namespace Avalonia.Controls
             get => _Container2Width;
             set => SetAndRaise(Container2WidthProperty, ref _Container2Width, value);
         }
-       
-        public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(ContainerWidth),
-                p => p.ContainerWidth,
-                (p, o) => p.ContainerWidth = o);
 
-       
-       
         private double _ContainerWidth;
         public double ContainerWidth
         {
@@ -153,14 +138,7 @@ namespace Avalonia.Controls
             get => _container2AnimationEndPosition;
             set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
         }
-
-        private double _containerAnimationMidPosition;
-        public double ContainerAnimationMidPosition
-        {
-            get => _containerAnimationMidPosition;
-            set => SetAndRaise(ContainerAnimationMidPositionProperty, ref _containerAnimationMidPosition, value);
-        }
-
+ 
         private Geometry _clipRect;
         public Geometry ClipRect
         {
@@ -212,13 +190,11 @@ namespace Avalonia.Controls
                     ContainerWidth = barIndicatorWidth;
                     Container2Width = barIndicatorWidth2;
 
-                    ContainerAnimationStartPosition = barIndicatorWidth * -1.0; // Position at -100%
+                    ContainerAnimationStartPosition = barIndicatorWidth * -1.8; // Position at -180%
                     ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
                     
                     Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
                     Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
-                    
-                    ContainerAnimationMidPosition = dim * 0.2;
 
                     var padding = Padding;
                     var rectangle = new RectangleGeometry(
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index 8abaead8a1..cd801f9261 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -20,9 +20,13 @@
         <Border x:Name="ProgressBarRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
           <Border Clip="{TemplateBinding ClipRect}">
             <Grid>
-              <Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
-              <Rectangle Width="{TemplateBinding ContainerWidth}" x:Name="IndeterminateProgressBarIndicator" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
-              <Rectangle Width="{TemplateBinding Container2Width}" x:Name="IndeterminateProgressBarIndicator2" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
+              <Grid x:Name="DeterminateRoot">
+                <Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
+              </Grid>
+              <Grid x:Name="IndeterminateRoot">
+                <Rectangle x:Name="IndeterminateProgressBarIndicator" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
+                <Rectangle x:Name="IndeterminateProgressBarIndicator2" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
+              </Grid>
             </Grid>
           </Border>
         </Border>
@@ -52,29 +56,44 @@
       </Setter.Value>
     </Setter>
   </Style>
-  <Style Selector="ProgressBar:indeterminate /template/ Border#PART_Indicator">
-    <Setter Property="IsVisible" Value="False" />
+  <!-- FadeInAnimation mockup-->
+  <Style Selector="ProgressBar /template/ Grid#DeterminateRoot">
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+      </Transitions>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar /template/ Grid#IndeterminateRoot">
+    <Setter Property="Transitions">
+      <Transitions>
+        <DoubleTransition Property="Opacity" Duration="0:0:0.197" />
+      </Transitions>
+    </Setter>
   </Style>
-  <Style Selector="ProgressBar /template/ Rectangle#IndeterminateProgressBarIndicator">
+  <Style Selector="ProgressBar /template/ Grid#DeterminateRoot">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
+  <Style Selector="ProgressBar /template/ Grid#IndeterminateRoot">
     <Setter Property="Opacity" Value="0" />
   </Style>
-  <Style Selector="ProgressBar /template/ Rectangle#IndeterminateProgressBarIndicator2">
+  <Style Selector="ProgressBar:indeterminate /template/ Grid#DeterminateRoot">
     <Setter Property="Opacity" Value="0" />
   </Style>
+  <Style Selector="ProgressBar:indeterminate /template/ Grid#IndeterminateRoot">
+    <Setter Property="Opacity" Value="1" />
+  </Style>
   <Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator">
     <Style.Animations>
       <Animation Duration="0:0:2" IterationCount="Infinite">
-        <KeyFrame KeyTime="0:0:0" KeySpline="0.4, 0.0, 0.6, 1.0">
-          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-          <Setter Property="Opacity" Value="1" />
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4, 0.0, 0.6, 1.0">
-          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-          <Setter Property="Opacity" Value="1" />
+        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:2" KeySpline="0.4, 0.0, 0.6, 1.0">
-          <Setter Property="TranslateTransform.X" Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-          <Setter Property="Opacity" Value="0" />
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
@@ -82,19 +101,78 @@
   <Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator2">
     <Style.Animations>
       <Animation Duration="0:0:2" IterationCount="Infinite">
-        <KeyFrame KeyTime="0:0:0" KeySpline="0.4, 0.0, 0.6, 1.0">
-          <Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-          <Setter Property="Opacity" Value="1" />
+        <KeyFrame KeyTime="0:0:0" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4, 0.0, 0.6, 1.0">
-          <Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-          <Setter Property="Opacity" Value="1" />
+        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
         </KeyFrame>
-        <KeyFrame KeyTime="0:0:2" KeySpline="0.4, 0.0, 0.6, 1.0">
-          <Setter Property="TranslateTransform.X" Value="{Binding Container2AnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
-          <Setter Property="Opacity" Value="0" />
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].Container2AnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
   </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Rectangle#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.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:1.5" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:vertical:indeterminate /template/ Rectangle#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.Y" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+        </KeyFrame>
+        <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].Container2AnimationEndPosition}" />
+        </KeyFrame>
+      </Animation>
+    </Style.Animations>
+  </Style>
+  <Style Selector="ProgressBar:horizontal /template/ Rectangle#IndeterminateProgressBarIndicator">
+    <Setter Property="Width" Value="{Binding $parent[ProgressBar].ContainerWidth}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform X="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar:horizontal /template/ Rectangle#IndeterminateProgressBarIndicator2">
+    <Setter Property="Width" Value="{Binding $parent[ProgressBar].Container2Width}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform X="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar:vertical /template/ Rectangle#IndeterminateProgressBarIndicator">
+    <Setter Property="Height" Value="{Binding $parent[ProgressBar].ContainerWidth}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform Y="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
+  <Style Selector="ProgressBar:vertical /template/ Rectangle#IndeterminateProgressBarIndicator2">
+    <Setter Property="Height" Value="{Binding $parent[ProgressBar].Container2Width}" />
+    <Setter Property="RenderTransform">
+      <Setter.Value>
+        <TranslateTransform Y="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+      </Setter.Value>
+    </Setter>
+  </Style>
 </Styles>

From 792405443c808fdaf16bd74ff022fc65338b6d48 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 17 Jun 2020 16:43:15 -0300
Subject: [PATCH 09/17] put fields in the correct place.

---
 src/Avalonia.Controls/ProgressBar.cs | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index cdbafb314f..42cad8acd3 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -1,7 +1,4 @@
-
-using System;
 using Avalonia.Controls.Primitives;
-using Avalonia.Data;
 using Avalonia.Layout;
 using Avalonia.Media;
 
@@ -12,6 +9,14 @@ namespace Avalonia.Controls
     /// </summary>
     public class ProgressBar : RangeBase
     {
+        private Geometry _clipRect;
+        private double _Container2Width;
+        private double _ContainerWidth;
+        private double _containerAnimationStartPosition;
+        private double _containerAnimationEndPosition;
+        private double _container2AnimationStartPosition;
+        private double _container2AnimationEndPosition;
+
         public static readonly StyledProperty<bool> IsIndeterminateProperty =
             AvaloniaProperty.Register<ProgressBar, bool>(nameof(IsIndeterminate));
 
@@ -50,7 +55,7 @@ namespace Avalonia.Controls
                 nameof(Container2Width),
                 p => p.Container2Width,
                 (p, o) => p.Container2Width = o);
-                
+
         public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
             AvaloniaProperty.RegisterDirect<ProgressBar, double>(
                 nameof(ContainerWidth),
@@ -94,52 +99,42 @@ namespace Avalonia.Controls
             set => SetValue(OrientationProperty, value);
         }
 
-        private double _containerAnimationStartPosition;
         public double ContainerAnimationStartPosition
         {
             get => _containerAnimationStartPosition;
             set => SetAndRaise(ContainerAnimationStartPositionProperty, ref _containerAnimationStartPosition, value);
         }
 
-        private double _containerAnimationEndPosition;
         public double ContainerAnimationEndPosition
         {
             get => _containerAnimationEndPosition;
             set => SetAndRaise(ContainerAnimationEndPositionProperty, ref _containerAnimationEndPosition, value);
         }
 
-        private double _container2AnimationStartPosition;
         public double Container2AnimationStartPosition
         {
             get => _container2AnimationStartPosition;
             set => SetAndRaise(Container2AnimationStartPositionProperty, ref _container2AnimationStartPosition, value);
         }
 
-
-       
-       
-        private double _Container2Width;
         public double Container2Width
         {
             get => _Container2Width;
             set => SetAndRaise(Container2WidthProperty, ref _Container2Width, value);
         }
 
-        private double _ContainerWidth;
         public double ContainerWidth
         {
             get => _ContainerWidth;
             set => SetAndRaise(ContainerWidthProperty, ref _ContainerWidth, value);
         }
 
-        private double _container2AnimationEndPosition;
         public double Container2AnimationEndPosition
         {
             get => _container2AnimationEndPosition;
             set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
         }
- 
-        private Geometry _clipRect;
+
         public Geometry ClipRect
         {
             get => _clipRect;
@@ -192,7 +187,7 @@ namespace Avalonia.Controls
 
                     ContainerAnimationStartPosition = barIndicatorWidth * -1.8; // Position at -180%
                     ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
-                    
+
                     Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
                     Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
 

From ea8609d5bd2f36483433a41dd77bda2f4c948369 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 17 Jun 2020 18:52:12 -0300
Subject: [PATCH 10/17] take advantage of border clipping.

---
 src/Avalonia.Themes.Fluent/ProgressBar.xaml | 28 ++++++++++-----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index cd801f9261..e60029a89a 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -2,7 +2,7 @@
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel>
-        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" Value="50" />
         <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
       </StackPanel>
     </Border>
@@ -17,15 +17,15 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border x:Name="ProgressBarRoot" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
-          <Border Clip="{TemplateBinding ClipRect}">
+        <Border x:Name="ProgressBarRoot" ClipToBounds="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
+          <Border CornerRadius="{DynamicResource ControlCornerRadius}">
             <Grid>
               <Grid x:Name="DeterminateRoot">
-                <Border x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
+                <Border CornerRadius="{DynamicResource ControlCornerRadius}" x:Name="PART_Indicator" Margin="{TemplateBinding Padding}" Background="{TemplateBinding Foreground}" />
               </Grid>
               <Grid x:Name="IndeterminateRoot">
-                <Rectangle x:Name="IndeterminateProgressBarIndicator" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
-                <Rectangle x:Name="IndeterminateProgressBarIndicator2" Margin="{TemplateBinding Padding}" Fill="{TemplateBinding Foreground}" />
+                <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}" />
               </Grid>
             </Grid>
           </Border>
@@ -83,7 +83,7 @@
   <Style Selector="ProgressBar:indeterminate /template/ Grid#IndeterminateRoot">
     <Setter Property="Opacity" Value="1" />
   </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator">
+  <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">
@@ -98,7 +98,7 @@
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:horizontal:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator2">
+  <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">
@@ -113,7 +113,7 @@
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator">
+  <Style Selector="ProgressBar:vertical: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">
@@ -128,7 +128,7 @@
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:vertical:indeterminate /template/ Rectangle#IndeterminateProgressBarIndicator2">
+  <Style Selector="ProgressBar:vertical: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">
@@ -143,7 +143,7 @@
       </Animation>
     </Style.Animations>
   </Style>
-  <Style Selector="ProgressBar:horizontal /template/ Rectangle#IndeterminateProgressBarIndicator">
+  <Style Selector="ProgressBar:horizontal /template/ Border#IndeterminateProgressBarIndicator">
     <Setter Property="Width" Value="{Binding $parent[ProgressBar].ContainerWidth}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
@@ -151,7 +151,7 @@
       </Setter.Value>
     </Setter>
   </Style>
-  <Style Selector="ProgressBar:horizontal /template/ Rectangle#IndeterminateProgressBarIndicator2">
+  <Style Selector="ProgressBar:horizontal /template/ Border#IndeterminateProgressBarIndicator2">
     <Setter Property="Width" Value="{Binding $parent[ProgressBar].Container2Width}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
@@ -159,7 +159,7 @@
       </Setter.Value>
     </Setter>
   </Style>
-  <Style Selector="ProgressBar:vertical /template/ Rectangle#IndeterminateProgressBarIndicator">
+  <Style Selector="ProgressBar:vertical /template/ Border#IndeterminateProgressBarIndicator">
     <Setter Property="Height" Value="{Binding $parent[ProgressBar].ContainerWidth}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
@@ -167,7 +167,7 @@
       </Setter.Value>
     </Setter>
   </Style>
-  <Style Selector="ProgressBar:vertical /template/ Rectangle#IndeterminateProgressBarIndicator2">
+  <Style Selector="ProgressBar:vertical /template/ Border#IndeterminateProgressBarIndicator2">
     <Setter Property="Height" Value="{Binding $parent[ProgressBar].Container2Width}" />
     <Setter Property="RenderTransform">
       <Setter.Value>

From 51b4c772db494f166f24fa1cf26033c291ca8566 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 17 Jun 2020 19:07:19 -0300
Subject: [PATCH 11/17] remove cliprect from progress bar.

---
 src/Avalonia.Controls/ProgressBar.cs | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index 42cad8acd3..fc59f45650 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -8,14 +8,14 @@ namespace Avalonia.Controls
     /// A control used to indicate the progress of an operation.
     /// </summary>
     public class ProgressBar : RangeBase
-    {
-        private Geometry _clipRect;
+    {        
         private double _Container2Width;
         private double _ContainerWidth;
         private double _containerAnimationStartPosition;
         private double _containerAnimationEndPosition;
         private double _container2AnimationStartPosition;
         private double _container2AnimationEndPosition;
+        private Border _indicator;
 
         public static readonly StyledProperty<bool> IsIndeterminateProperty =
             AvaloniaProperty.Register<ProgressBar, bool>(nameof(IsIndeterminate));
@@ -62,14 +62,6 @@ namespace Avalonia.Controls
                 p => p.ContainerWidth,
                 (p, o) => p.ContainerWidth = o);
 
-        public static readonly DirectProperty<ProgressBar, Geometry> ClipRectProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, Geometry>(
-                nameof(ClipRect),
-                p => p.ClipRect,
-                (p, o) => p.ClipRect = o);
-
-        private Border _indicator;
-
         static ProgressBar()
         {
             ValueProperty.Changed.AddClassHandler<ProgressBar>((x, e) => x.UpdateIndicatorWhenPropChanged(e));
@@ -133,13 +125,7 @@ namespace Avalonia.Controls
         {
             get => _container2AnimationEndPosition;
             set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
-        }
-
-        public Geometry ClipRect
-        {
-            get => _clipRect;
-            set => SetAndRaise(ClipRectProperty, ref _clipRect, value);
-        }
+        }        
 
         /// <inheritdoc/>
         protected override Size ArrangeOverride(Size finalSize)
@@ -198,9 +184,7 @@ namespace Avalonia.Controls
                             padding.Top,
                             bounds.Width - (padding.Right + padding.Left),
                             bounds.Height - (padding.Bottom + padding.Top)
-                            ));
-
-                    ClipRect = rectangle;
+                            ));                    
                 }
                 else
                 {

From 5fbf15be7e468fdc2095d2ada507b30ace4e47c1 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 17 Jun 2020 19:07:52 -0300
Subject: [PATCH 12/17] use template properties class.

---
 src/Avalonia.Controls/ProgressBar.cs        | 178 ++++++++++----------
 src/Avalonia.Themes.Fluent/ProgressBar.xaml |  40 ++---
 2 files changed, 112 insertions(+), 106 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index fc59f45650..d29e878b73 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -9,12 +9,88 @@ namespace Avalonia.Controls
     /// </summary>
     public class ProgressBar : RangeBase
     {        
-        private double _Container2Width;
-        private double _ContainerWidth;
-        private double _containerAnimationStartPosition;
-        private double _containerAnimationEndPosition;
-        private double _container2AnimationStartPosition;
-        private double _container2AnimationEndPosition;
+        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 Border _indicator;
 
         public static readonly StyledProperty<bool> IsIndeterminateProperty =
@@ -24,43 +100,7 @@ namespace Avalonia.Controls
             AvaloniaProperty.Register<ProgressBar, bool>(nameof(ShowProgressText));
 
         public static readonly StyledProperty<Orientation> OrientationProperty =
-            AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);
-
-        public static readonly DirectProperty<ProgressBar, double> ContainerAnimationStartPositionProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(ContainerAnimationStartPosition),
-                p => p.ContainerAnimationStartPosition,
-                (p, o) => p.ContainerAnimationStartPosition = o, 0d);
-
-        public static readonly DirectProperty<ProgressBar, double> ContainerAnimationEndPositionProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(ContainerAnimationEndPosition),
-                p => p.ContainerAnimationEndPosition,
-                (p, o) => p.ContainerAnimationEndPosition = o, 0d);
-
-        public static readonly DirectProperty<ProgressBar, double> Container2AnimationStartPositionProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(Container2AnimationStartPosition),
-                p => p.Container2AnimationStartPosition,
-                (p, o) => p.Container2AnimationStartPosition = o, 0d);
-
-        public static readonly DirectProperty<ProgressBar, double> Container2AnimationEndPositionProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(Container2AnimationEndPosition),
-                p => p.Container2AnimationEndPosition,
-                (p, o) => p.Container2AnimationEndPosition = o);
-
-        public static readonly DirectProperty<ProgressBar, double> Container2WidthProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(Container2Width),
-                p => p.Container2Width,
-                (p, o) => p.Container2Width = o);
-
-        public static readonly DirectProperty<ProgressBar, double> ContainerWidthProperty =
-            AvaloniaProperty.RegisterDirect<ProgressBar, double>(
-                nameof(ContainerWidth),
-                p => p.ContainerWidth,
-                (p, o) => p.ContainerWidth = o);
+            AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);       
 
         static ProgressBar()
         {
@@ -73,6 +113,8 @@ namespace Avalonia.Controls
             UpdatePseudoClasses(IsIndeterminate, Orientation);
         }
 
+        public ProgressBarTemplateProperties TemplateProperties { get; } = new ProgressBarTemplateProperties();
+
         public bool IsIndeterminate
         {
             get => GetValue(IsIndeterminateProperty);
@@ -89,43 +131,7 @@ namespace Avalonia.Controls
         {
             get => GetValue(OrientationProperty);
             set => SetValue(OrientationProperty, value);
-        }
-
-        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);
-        }        
+        }      
 
         /// <inheritdoc/>
         protected override Size ArrangeOverride(Size finalSize)
@@ -168,14 +174,14 @@ namespace Avalonia.Controls
                     var barIndicatorWidth = dim * 0.4; // Indicator width at 40% of ProgressBar
                     var barIndicatorWidth2 = dim * 0.6; // Indicator width at 60% of ProgressBar
 
-                    ContainerWidth = barIndicatorWidth;
-                    Container2Width = barIndicatorWidth2;
+                    TemplateProperties.ContainerWidth = barIndicatorWidth;
+                    TemplateProperties.Container2Width = barIndicatorWidth2;
 
-                    ContainerAnimationStartPosition = barIndicatorWidth * -1.8; // Position at -180%
-                    ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
+                    TemplateProperties.ContainerAnimationStartPosition = barIndicatorWidth * -1.8; // Position at -180%
+                    TemplateProperties.ContainerAnimationEndPosition = barIndicatorWidth * 3.0; // Position at 300%
 
-                    Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
-                    Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
+                    TemplateProperties.Container2AnimationStartPosition = barIndicatorWidth2 * -1.5; // Position at -150%
+                    TemplateProperties.Container2AnimationEndPosition = barIndicatorWidth2 * 1.66; // Position at 166%
 
                     var padding = Padding;
                     var rectangle = new RectangleGeometry(
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index e60029a89a..6e2b4138b3 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -87,13 +87,13 @@
     <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].ContainerAnimationStartPosition}" />
+          <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].ContainerAnimationEndPosition}" />
+          <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].ContainerAnimationEndPosition}" />
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
@@ -102,13 +102,13 @@
     <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].Container2AnimationStartPosition}" />
+          <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].Container2AnimationStartPosition}" />
+          <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].Container2AnimationEndPosition}" />
+          <Setter Property="TranslateTransform.X" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
@@ -117,13 +117,13 @@
     <Style.Animations>
       <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].ContainerAnimationStartPosition}" />
+          <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].ContainerAnimationEndPosition}" />
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
         </KeyFrame>
         <KeyFrame KeyTime="0:0:2" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].ContainerAnimationEndPosition}" />
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerAnimationEndPosition}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
@@ -132,46 +132,46 @@
     <Style.Animations>
       <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].Container2AnimationStartPosition}" />
+          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
         </KeyFrame>
         <KeyFrame KeyTime="0:0:0.75" KeySpline="0.4,0,0.6,1">
-          <Setter Property="TranslateTransform.Y" Value="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+          <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].Container2AnimationEndPosition}" />
+          <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].ContainerWidth}" />
+    <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
-        <TranslateTransform X="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
+        <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].Container2Width}" />
+    <Setter Property="Width" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
-        <TranslateTransform X="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+        <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].ContainerWidth}" />
+    <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.ContainerWidth}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
-        <TranslateTransform Y="{Binding $parent[ProgressBar].ContainerAnimationStartPosition}" />
+        <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].Container2Width}" />
+    <Setter Property="Height" Value="{Binding $parent[ProgressBar].TemplateProperties.Container2Width}" />
     <Setter Property="RenderTransform">
       <Setter.Value>
-        <TranslateTransform Y="{Binding $parent[ProgressBar].Container2AnimationStartPosition}" />
+        <TranslateTransform Y="{Binding $parent[ProgressBar].TemplateProperties.Container2AnimationStartPosition}" />
       </Setter.Value>
     </Setter>
   </Style>

From 72fb2dd4b57915dedfd9f2c2e6806416141ab756 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 17 Jun 2020 19:11:12 -0300
Subject: [PATCH 13/17] use panel instead of grid.

---
 src/Avalonia.Themes.Fluent/ProgressBar.xaml | 28 ++++++++++-----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index 6e2b4138b3..77a1dc0e25 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -17,18 +17,16 @@
     <Setter Property="VerticalAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
-        <Border x:Name="ProgressBarRoot" ClipToBounds="True" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{DynamicResource ControlCornerRadius}">
-          <Border CornerRadius="{DynamicResource ControlCornerRadius}">
-            <Grid>
-              <Grid x:Name="DeterminateRoot">
+        <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}" />
-              </Grid>
-              <Grid x:Name="IndeterminateRoot">
+              </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}" />
-              </Grid>
-            </Grid>
-          </Border>
+              </Panel>
+            </Panel>          
         </Border>
       </ControlTemplate>
     </Setter>
@@ -57,30 +55,30 @@
     </Setter>
   </Style>
   <!-- FadeInAnimation mockup-->
-  <Style Selector="ProgressBar /template/ Grid#DeterminateRoot">
+  <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/ Grid#IndeterminateRoot">
+  <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/ Grid#DeterminateRoot">
+  <Style Selector="ProgressBar /template/ Panel#DeterminateRoot">
     <Setter Property="Opacity" Value="1" />
   </Style>
-  <Style Selector="ProgressBar /template/ Grid#IndeterminateRoot">
+  <Style Selector="ProgressBar /template/ Panel#IndeterminateRoot">
     <Setter Property="Opacity" Value="0" />
   </Style>
-  <Style Selector="ProgressBar:indeterminate /template/ Grid#DeterminateRoot">
+  <Style Selector="ProgressBar:indeterminate /template/ Panel#DeterminateRoot">
     <Setter Property="Opacity" Value="0" />
   </Style>
-  <Style Selector="ProgressBar:indeterminate /template/ Grid#IndeterminateRoot">
+  <Style Selector="ProgressBar:indeterminate /template/ Panel#IndeterminateRoot">
     <Setter Property="Opacity" Value="1" />
   </Style>
   <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#IndeterminateProgressBarIndicator">

From 1efda3744a443d476dc6acd19b4e6554c83a08b9 Mon Sep 17 00:00:00 2001
From: Dan Walmsley <dan@walms.co.uk>
Date: Wed, 17 Jun 2020 19:31:10 -0300
Subject: [PATCH 14/17] update default theme progress bar.

---
 src/Avalonia.Themes.Default/ProgressBar.xaml | 16 ++++++++++++----
 src/Avalonia.Themes.Fluent/ProgressBar.xaml  |  2 +-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/Avalonia.Themes.Default/ProgressBar.xaml b/src/Avalonia.Themes.Default/ProgressBar.xaml
index d3c2f0c784..9a12ccd720 100644
--- a/src/Avalonia.Themes.Default/ProgressBar.xaml
+++ b/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}"/>
@@ -53,11 +61,11 @@
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">
           <Setter Property="TranslateTransform.X"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
           <Setter Property="TranslateTransform.X"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
@@ -69,11 +77,11 @@
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">
           <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
           <Setter Property="TranslateTransform.Y"
-                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
diff --git a/src/Avalonia.Themes.Fluent/ProgressBar.xaml b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
index 77a1dc0e25..ac5dd7c0ed 100644
--- a/src/Avalonia.Themes.Fluent/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Fluent/ProgressBar.xaml
@@ -2,7 +2,7 @@
   <Design.PreviewWith>
     <Border Padding="20">
       <StackPanel>
-        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" Value="50" />
+        <ProgressBar VerticalAlignment="Center" IsIndeterminate="True" />
         <ProgressBar HorizontalAlignment="Left" IsIndeterminate="True" Orientation="Vertical" />
       </StackPanel>
     </Border>

From a0be18e3f66989e8fd91acb53b025c407fb81e1d Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Fri, 19 Jun 2020 15:38:26 +0800
Subject: [PATCH 15/17] Fix indeterminate animation on old theme

---
 src/Avalonia.Controls/ProgressBar.cs         | 42 +++++++++++++++++---
 src/Avalonia.Themes.Default/ProgressBar.xaml |  8 ++--
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index d29e878b73..2a732e9d90 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -11,12 +11,14 @@ namespace Avalonia.Controls
     {        
         public class ProgressBarTemplateProperties : AvaloniaObject
         {
-            private double _Container2Width;
-            private double _ContainerWidth;
+            private double _container2Width;
+            private double _containerWidth;
             private double _containerAnimationStartPosition;
             private double _containerAnimationEndPosition;
             private double _container2AnimationStartPosition;
             private double _container2AnimationEndPosition;
+            private double _indeterminateStartingOffset;
+            private double _indeterminateEndingOffset;
 
             public static readonly DirectProperty<ProgressBarTemplateProperties, double> ContainerAnimationStartPositionProperty =
            AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
@@ -54,6 +56,18 @@ namespace Avalonia.Controls
                     p => p.ContainerWidth,
                     (p, o) => p.ContainerWidth = o);
 
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> IndeterminateStartingOffsetProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(IndeterminateStartingOffset),
+                    p => p.IndeterminateStartingOffset,
+                    (p, o) => p.IndeterminateStartingOffset = o);
+
+            public static readonly DirectProperty<ProgressBarTemplateProperties, double> IndeterminateEndingOffsetProperty =
+                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
+                    nameof(IndeterminateEndingOffset),
+                    p => p.IndeterminateEndingOffset,
+                    (p, o) => p.IndeterminateEndingOffset = o);
+
             public double ContainerAnimationStartPosition
             {
                 get => _containerAnimationStartPosition;
@@ -74,14 +88,14 @@ namespace Avalonia.Controls
 
             public double Container2Width
             {
-                get => _Container2Width;
-                set => SetAndRaise(Container2WidthProperty, ref _Container2Width, value);
+                get => _container2Width;
+                set => SetAndRaise(Container2WidthProperty, ref _container2Width, value);
             }
 
             public double ContainerWidth
             {
-                get => _ContainerWidth;
-                set => SetAndRaise(ContainerWidthProperty, ref _ContainerWidth, value);
+                get => _containerWidth;
+                set => SetAndRaise(ContainerWidthProperty, ref _containerWidth, value);
             }
 
             public double Container2AnimationEndPosition
@@ -89,6 +103,18 @@ namespace Avalonia.Controls
                 get => _container2AnimationEndPosition;
                 set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
             }
+
+            public double IndeterminateStartingOffset
+            {
+                get => _indeterminateStartingOffset;
+                set => SetAndRaise(IndeterminateStartingOffsetProperty, ref _indeterminateStartingOffset, value);
+            }
+
+            public double IndeterminateEndingOffset
+            {
+                get => _indeterminateEndingOffset;
+                set => SetAndRaise(IndeterminateEndingOffsetProperty, ref _indeterminateEndingOffset, value);
+            }
         }
         
         private Border _indicator;
@@ -182,6 +208,10 @@ namespace Avalonia.Controls
 
                     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.
+                    TemplateProperties.IndeterminateStartingOffset = -dim;
+                    TemplateProperties.IndeterminateEndingOffset = dim * 2;
 
                     var padding = Padding;
                     var rectangle = new RectangleGeometry(
diff --git a/src/Avalonia.Themes.Default/ProgressBar.xaml b/src/Avalonia.Themes.Default/ProgressBar.xaml
index 9a12ccd720..af3613a2a6 100644
--- a/src/Avalonia.Themes.Default/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Default/ProgressBar.xaml
@@ -61,11 +61,11 @@
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">
           <Setter Property="TranslateTransform.X"
-                  Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding TemplateProperties.IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
           <Setter Property="TranslateTransform.X"
-                  Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding TemplateProperties.IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>
@@ -77,11 +77,11 @@
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">
           <Setter Property="TranslateTransform.Y"
-                  Value="{Binding ContainerAnimationStartPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding TemplateProperties.IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
           <Setter Property="TranslateTransform.Y"
-                  Value="{Binding ContainerAnimationEndPosition, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding TemplateProperties.IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>

From 6587c4b7b524f9a6600385c1748e5b6ef2fb634b Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Fri, 19 Jun 2020 21:45:59 +0800
Subject: [PATCH 16/17] add obsoleted props

---
 src/Avalonia.Controls/ProgressBar.cs | 73 +++++++++++++++-------------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/Avalonia.Controls/ProgressBar.cs b/src/Avalonia.Controls/ProgressBar.cs
index 2a732e9d90..e904957429 100644
--- a/src/Avalonia.Controls/ProgressBar.cs
+++ b/src/Avalonia.Controls/ProgressBar.cs
@@ -1,3 +1,4 @@
+using System;
 using Avalonia.Controls.Primitives;
 using Avalonia.Layout;
 using Avalonia.Media;
@@ -8,7 +9,7 @@ namespace Avalonia.Controls
     /// A control used to indicate the progress of an operation.
     /// </summary>
     public class ProgressBar : RangeBase
-    {        
+    {
         public class ProgressBarTemplateProperties : AvaloniaObject
         {
             private double _container2Width;
@@ -17,8 +18,6 @@ namespace Avalonia.Controls
             private double _containerAnimationEndPosition;
             private double _container2AnimationStartPosition;
             private double _container2AnimationEndPosition;
-            private double _indeterminateStartingOffset;
-            private double _indeterminateEndingOffset;
 
             public static readonly DirectProperty<ProgressBarTemplateProperties, double> ContainerAnimationStartPositionProperty =
            AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
@@ -56,18 +55,6 @@ namespace Avalonia.Controls
                     p => p.ContainerWidth,
                     (p, o) => p.ContainerWidth = o);
 
-            public static readonly DirectProperty<ProgressBarTemplateProperties, double> IndeterminateStartingOffsetProperty =
-                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
-                    nameof(IndeterminateStartingOffset),
-                    p => p.IndeterminateStartingOffset,
-                    (p, o) => p.IndeterminateStartingOffset = o);
-
-            public static readonly DirectProperty<ProgressBarTemplateProperties, double> IndeterminateEndingOffsetProperty =
-                AvaloniaProperty.RegisterDirect<ProgressBarTemplateProperties, double>(
-                    nameof(IndeterminateEndingOffset),
-                    p => p.IndeterminateEndingOffset,
-                    (p, o) => p.IndeterminateEndingOffset = o);
-
             public double ContainerAnimationStartPosition
             {
                 get => _containerAnimationStartPosition;
@@ -103,20 +90,10 @@ namespace Avalonia.Controls
                 get => _container2AnimationEndPosition;
                 set => SetAndRaise(Container2AnimationEndPositionProperty, ref _container2AnimationEndPosition, value);
             }
-
-            public double IndeterminateStartingOffset
-            {
-                get => _indeterminateStartingOffset;
-                set => SetAndRaise(IndeterminateStartingOffsetProperty, ref _indeterminateStartingOffset, value);
-            }
-
-            public double IndeterminateEndingOffset
-            {
-                get => _indeterminateEndingOffset;
-                set => SetAndRaise(IndeterminateEndingOffsetProperty, ref _indeterminateEndingOffset, value);
-            }
         }
-        
+
+        private double _indeterminateStartingOffset;
+        private double _indeterminateEndingOffset;
         private Border _indicator;
 
         public static readonly StyledProperty<bool> IsIndeterminateProperty =
@@ -126,7 +103,35 @@ namespace Avalonia.Controls
             AvaloniaProperty.Register<ProgressBar, bool>(nameof(ShowProgressText));
 
         public static readonly StyledProperty<Orientation> OrientationProperty =
-            AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);       
+            AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);
+
+        [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);
+
+        [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);
+
+        [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()
         {
@@ -157,7 +162,7 @@ namespace Avalonia.Controls
         {
             get => GetValue(OrientationProperty);
             set => SetValue(OrientationProperty, value);
-        }      
+        }
 
         /// <inheritdoc/>
         protected override Size ArrangeOverride(Size finalSize)
@@ -208,10 +213,10 @@ namespace Avalonia.Controls
 
                     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.
-                    TemplateProperties.IndeterminateStartingOffset = -dim;
-                    TemplateProperties.IndeterminateEndingOffset = dim * 2;
+                    IndeterminateStartingOffset = -(dim / 5d);
+                    IndeterminateEndingOffset = dim;
 
                     var padding = Padding;
                     var rectangle = new RectangleGeometry(
@@ -220,7 +225,7 @@ namespace Avalonia.Controls
                             padding.Top,
                             bounds.Width - (padding.Right + padding.Left),
                             bounds.Height - (padding.Bottom + padding.Top)
-                            ));                    
+                            ));
                 }
                 else
                 {

From f3e98203352a177d8fbeb8e189c846df1753193f Mon Sep 17 00:00:00 2001
From: Jumar Macato <hikari.netto23@gmail.com>
Date: Fri, 19 Jun 2020 21:54:54 +0800
Subject: [PATCH 17/17] remote tempprop

---
 src/Avalonia.Themes.Default/ProgressBar.xaml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Avalonia.Themes.Default/ProgressBar.xaml b/src/Avalonia.Themes.Default/ProgressBar.xaml
index af3613a2a6..43a0752bc8 100644
--- a/src/Avalonia.Themes.Default/ProgressBar.xaml
+++ b/src/Avalonia.Themes.Default/ProgressBar.xaml
@@ -61,11 +61,11 @@
                  Easing="LinearEasing">
         <KeyFrame Cue="0%">
           <Setter Property="TranslateTransform.X"
-                  Value="{Binding TemplateProperties.IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
         <KeyFrame Cue="100%">
           <Setter Property="TranslateTransform.X"
-                  Value="{Binding TemplateProperties.IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
         </KeyFrame>
       </Animation>
     </Style.Animations>