Add percentage text to drive allocation indicator in properties (#5939)

Author: oleitao

Files/ViewModels/SelectedItemsPropertiesViewModel.cs

@@ -288,7 +288,7 @@ public ulong DriveUsedSpaceValue
             {
                 SetProperty(ref driveUsedSpaceValue, value);
                 DriveUsedSpace = $"{ByteSize.FromBytes(DriveUsedSpaceValue).ToBinaryString().ConvertSizeAbbreviation()} ({ByteSize.FromBytes(DriveUsedSpaceValue).Bytes:#,##0} {"ItemSizeBytes".GetLocalized()})";
-                DriveUsedSpaceDoubleValue = Convert.ToDouble(DriveUsedSpaceValue);
+                OnPropertyChanged(nameof(DrivePercentageValue));
             }
         }
 
@@ -421,7 +421,7 @@ public ulong DriveCapacityValue
             {
                 SetProperty(ref driveCapacityValue, value);
                 DriveCapacity = $"{ByteSize.FromBytes(DriveCapacityValue).ToBinaryString().ConvertSizeAbbreviation()} ({ByteSize.FromBytes(DriveCapacityValue).Bytes:#,##0} {"ItemSizeBytes".GetLocalized()})";
-                DriveCapacityDoubleValue = Convert.ToDouble(DriveCapacityValue);
+                OnPropertyChanged(nameof(DrivePercentageValue));
             }
         }
 
@@ -445,20 +445,9 @@ public Visibility DriveCapacityVisibiity
             set => SetProperty(ref driveCapacityVisibiity, value);
         }
 
-        private double driveCapacityDoubleValue;
-
-        public double DriveCapacityDoubleValue
-        {
-            get => driveCapacityDoubleValue;
-            set => SetProperty(ref driveCapacityDoubleValue, value);
-        }
-
-        private double driveUsedSpaceDoubleValue;
-
-        public double DriveUsedSpaceDoubleValue
+        public double DrivePercentageValue
         {
-            get => driveUsedSpaceDoubleValue;
-            set => SetProperty(ref driveUsedSpaceDoubleValue, value);
+            get => DriveCapacityValue > 0 ? (double)DriveUsedSpaceValue / (double)DriveCapacityValue * 100 : 0;
         }
 
         private Visibility itemAttributesVisibility = Visibility.Visible;

Files/Views/Pages/PropertiesGeneral.xaml

@@ -2,11 +2,11 @@
     x:Class="Files.Views.PropertiesGeneral"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:local="using:Files.ViewModels.Properties"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
-    xmlns:toolkit="using:Microsoft.Toolkit.Uwp.UI.Controls"
     xmlns:usercontrols="using:Files.UserControls"
     Loaded="Properties_Loaded"
     mc:Ignorable="d">
@@ -341,9 +341,45 @@
                 Height="70"
                 Margin="10"
                 IsIndeterminate="False"
-                Maximum="{x:Bind ViewModel.DriveCapacityDoubleValue, Mode=OneWay}"
                 Visibility="{x:Bind ViewModel.DriveCapacityVisibiity, Mode=OneWay}"
-                Value="{x:Bind ViewModel.DriveUsedSpaceDoubleValue, Mode=OneWay}" />
+                Value="{x:Bind ViewModel.DrivePercentageValue, Mode=OneWay}">
+
+                <muxc:ProgressRing.Template>
+                    <ControlTemplate TargetType="muxc:ProgressRing">
+                        <Grid x:Name="LayoutRoot" Background="Transparent">
+                            <Grid.Resources>
+                                <converters:StringFormatConverter x:Key="StringFormatConverter" />
+                            </Grid.Resources>
+                            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+                                <TextBlock
+                                    Margin="0"
+                                    FontWeight="SemiBold"
+                                    Text="{Binding Value, RelativeSource={RelativeSource Mode=TemplatedParent}, Converter={StaticResource StringFormatConverter}, ConverterParameter='{}{0:0}%', Mode=OneWay}"
+                                    TextAlignment="Center" />
+                            </StackPanel>
+
+                            <!--  AnimatedVisualPlayer for Lottie  -->
+                            <muxc:AnimatedVisualPlayer
+                                x:Name="LottiePlayer"
+                                AutoPlay="false"
+                                Opacity="1"
+                                Stretch="fill" />
+
+                            <VisualStateManager.VisualStateGroups>
+                                <VisualStateGroup x:Name="CommonStates">
+                                    <VisualState x:Name="Inactive">
+                                        <VisualState.Setters>
+                                            <Setter Target="LayoutRoot.Opacity" Value="0" />
+                                        </VisualState.Setters>
+                                    </VisualState>
+                                    <VisualState x:Name="DeterminateActive" />
+                                    <VisualState x:Name="Active" />
+                                </VisualStateGroup>
+                            </VisualStateManager.VisualStateGroups>
+                        </Grid>
+                    </ControlTemplate>
+                </muxc:ProgressRing.Template>
+            </muxc:ProgressRing>
 
             <TextBlock
                 x:Uid="PropertiesAttributes"