Add Progressbar ShowProgressText property (#3531)

samples/ControlCatalog/Pages/ProgressBarPage.xaml

@@ -6,15 +6,19 @@
     <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">
         <StackPanel Spacing="16">
-          <ProgressBar Value="{Binding #hprogress.Value}" />
+          <ProgressBar ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #hprogress.Value}" />
           <ProgressBar IsIndeterminate="True"/>
         </StackPanel>
-        <ProgressBar Value="{Binding #vprogress.Value}" Orientation="Vertical" />
+        <ProgressBar ShowProgressText="{Binding #showProgress.IsChecked}" Value="{Binding #vprogress.Value}" Orientation="Vertical" />
         <ProgressBar Orientation="Vertical" IsIndeterminate="True" />
       </StackPanel>
       <StackPanel Margin="16">

src/Avalonia.Controls/ProgressBar.cs

@@ -17,6 +17,9 @@ namespace Avalonia.Controls
         public static readonly StyledProperty<bool> IsIndeterminateProperty =
             AvaloniaProperty.Register<ProgressBar, bool>(nameof(IsIndeterminate));
 
+        public static readonly StyledProperty<bool> ShowProgressTextProperty =
+            AvaloniaProperty.Register<ProgressBar, bool>(nameof(ShowProgressText));
+
         public static readonly StyledProperty<Orientation> OrientationProperty =
             AvaloniaProperty.Register<ProgressBar, Orientation>(nameof(Orientation), Orientation.Horizontal);
 
@@ -51,6 +54,12 @@ namespace Avalonia.Controls
             set => SetValue(IsIndeterminateProperty, value);
         }
 
+        public bool ShowProgressText
+        {
+            get => GetValue(ShowProgressTextProperty);
+            set => SetValue(ShowProgressTextProperty, value);
+        }
+
         public Orientation Orientation
         {
             get => GetValue(OrientationProperty);

src/Avalonia.Themes.Default/ProgressBar.xaml

@@ -1,14 +1,25 @@
 <Styles xmlns="https://github.com/avaloniaui">
   <Style Selector="ProgressBar">
     <Setter Property="Background" Value="{DynamicResource ThemeAccentBrush4}"/>
-    <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}"/> 
+    <Setter Property="Foreground" Value="{DynamicResource ThemeAccentBrush}"/>
     <Setter Property="Template">
       <ControlTemplate>
-        <Border Background="{TemplateBinding Background}"
-                BorderBrush="{TemplateBinding BorderBrush}"
-                BorderThickness="{TemplateBinding BorderThickness}">
-          <Border Name="PART_Indicator" Background="{TemplateBinding Foreground}"/>
-        </Border>
+        <Grid>
+          <Border Background="{TemplateBinding Background}"
+                  BorderBrush="{TemplateBinding BorderBrush}"
+                  BorderThickness="{TemplateBinding BorderThickness}">
+            <Border Name="PART_Indicator" Background="{TemplateBinding Foreground}"/>
+          </Border>
+          <LayoutTransformControl
+                HorizontalAlignment="Center"
+                VerticalAlignment="Center"
+                IsVisible="{Binding ShowProgressText, RelativeSource={RelativeSource TemplatedParent}}"
+                Name="PART_LayoutTransformControl">
+            <TextBlock
+                Foreground="{DynamicResource ThemeForegroundBrush}"
+                Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0:0}%}" />
+          </LayoutTransformControl>
+        </Grid>
       </ControlTemplate>
     </Setter>
   </Style>
@@ -22,42 +33,49 @@
   </Style>
   <Style Selector="ProgressBar:horizontal">
     <Setter Property="MinWidth" Value="200"/>
-    <Setter Property="MinHeight" Value="14"/>
+    <Setter Property="MinHeight" Value="16"/>
   </Style>
   <Style Selector="ProgressBar:vertical">
-    <Setter Property="MinWidth" Value="14"/>
+    <Setter Property="MinWidth" Value="16"/>
     <Setter Property="MinHeight" Value="200"/>
   </Style>
+  <Style Selector="ProgressBar:vertical /template/ LayoutTransformControl#PART_LayoutTransformControl">
+    <Setter Property="LayoutTransform">
+      <Setter.Value>
+        <RotateTransform Angle="90"/>
+      </Setter.Value>
+    </Setter>
+  </Style>
   <Style Selector="ProgressBar:horizontal:indeterminate /template/ Border#PART_Indicator">
-      <Style.Animations>
-          <Animation Duration="0:0:3"
-                     IterationCount="Infinite"
-                     Easing="LinearEasing">
-              <KeyFrame Cue="0%">
-                  <Setter Property="TranslateTransform.X"
-                          Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
-              </KeyFrame>
-              <KeyFrame Cue="100%">
-                  <Setter Property="TranslateTransform.X"
-                          Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
-              </KeyFrame>
+    <Style.Animations>
+      <Animation Duration="0:0:3"
+                 IterationCount="Infinite"
+                 Easing="LinearEasing">
+        <KeyFrame Cue="0%">
+          <Setter Property="TranslateTransform.X"
+                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="TranslateTransform.X"
+                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
       </Animation>
-      </Style.Animations>
+    </Style.Animations>
   </Style>
   <Style Selector="ProgressBar:vertical:indeterminate /template/ Border#PART_Indicator">
-      <Style.Animations>
-          <Animation Duration="0:0:3"
-                     IterationCount="Infinite"
-                     Easing="LinearEasing">
-              <KeyFrame Cue="0%">
-                  <Setter Property="TranslateTransform.Y"
-                          Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
-              </KeyFrame>
-              <KeyFrame Cue="100%">
-                  <Setter Property="TranslateTransform.Y"
-                          Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
-              </KeyFrame>
+    <Style.Animations>
+      <Animation Duration="0:0:3"
+                 IterationCount="Infinite"
+                 Easing="LinearEasing">
+        <KeyFrame Cue="0%">
+          <Setter Property="TranslateTransform.Y"
+                  Value="{Binding IndeterminateStartingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
+        <KeyFrame Cue="100%">
+          <Setter Property="TranslateTransform.Y"
+                  Value="{Binding IndeterminateEndingOffset, RelativeSource={RelativeSource TemplatedParent}}" />
+        </KeyFrame>
       </Animation>
-      </Style.Animations>
+    </Style.Animations>
   </Style>
 </Styles>