use winui3 style

samples/ControlCatalog/Pages/ProgressBarPage.xaml

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

src/Avalonia.Controls/ProgressBar.cs

@@ -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(

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>