Fixed an issue wherer the backgroud fill and the series fill didn't match frequently

Author: 0x5bfa

src/Files.App/UserControls/StatusCenter.xaml

@@ -68,6 +68,7 @@
 				</Style>
 			</ListView.ItemContainerStyle>
 
+			<!--  Item Template  -->
 			<ListView.ItemTemplate>
 				<DataTemplate x:DataType="statuscenter:StatusCenterItem">
 					<Grid
@@ -139,7 +140,7 @@
 									Text="{x:Bind Header, Mode=OneWay}"
 									TextTrimming="CharacterEllipsis"
 									TextWrapping="NoWrap"
-									ToolTipService.ToolTip="{x:Bind SubHeader, Mode=OneWay}" />
+									ToolTipService.ToolTip="{x:Bind Header, Mode=OneWay}" />
 
 							</StackPanel>
 
@@ -197,7 +198,7 @@
 
 						</Grid>
 
-						<!--  Progress & Footer  -->
+						<!--  Graph & Footer  -->
 						<Grid
 							x:Name="StatusCenterItemRichProgressDisplayPanel"
 							Grid.Row="1"
@@ -213,7 +214,7 @@
 								<ColumnDefinition Width="Auto" />
 							</Grid.ColumnDefinitions>
 
-							<!--  Extended ProgressBar  -->
+							<!--  Main ProgressBar  -->
 							<ProgressBar
 								x:Name="MainProgressBar"
 								Margin="4,4,4,4"
@@ -224,7 +225,7 @@
 								Value="{x:Bind ProgressPercentage, Mode=OneWay}" />
 
 							<!--  Graph  -->
-							<Border
+							<Grid
 								x:Name="MainGraphCartesianChartClipGrid"
 								Height="72"
 								Margin="4,4,4,12"
@@ -234,53 +235,42 @@
 								CornerRadius="4"
 								Visibility="{x:Bind IsExpanded, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
 
-								<Grid>
-									<ProgressBar
-										x:Name="SecondaryProgressBar"
-										Height="70"
-										MinHeight="70"
-										VerticalAlignment="Stretch"
-										CornerRadius="4,0,0,4"
-										Foreground="{ThemeResource AppThemeFillColorAttentionBrush}"
-										IsIndeterminate="False"
-										Style="{StaticResource CustomProgressBarStyle}"
-										Visibility="{x:Bind IsExpanded, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}"
-										Value="{x:Bind ProgressPercentage, Mode=OneWay}" />
-
+								<!--  NOTE: The Graph Control Somehow Includes Slight Padding, Which Is Removed By Setting Negative Margin  -->
+								<Grid Margin="-2,0,0,-2">
 									<livecharts2:CartesianChart
 										x:Name="MainCartesianChart"
-										Height="48"
-										Margin="0,-2"
+										Height="72"
 										VerticalAlignment="Bottom"
 										AnimationsSpeed="00:00:00.001"
 										Series="{x:Bind SpeedGraphSeries, Mode=OneWay}"
 										TooltipPosition="Hidden"
-										XAxes="{x:Bind SpeedGraphXAxes}"
-										YAxes="{x:Bind SpeedGraphYAxes}" />
-
-									<StackPanel Margin="8,4">
-
-										<TextBlock
-											x:Name="OperationSpeedStringTextBlock"
-											HorizontalAlignment="Right"
-											VerticalAlignment="Top"
-											FontSize="10"
-											Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-											Style="{StaticResource CaptionTextBlockStyle}"
-											Text="{helpers:ResourceString Name=SpeedWithColon}" />
-
-										<TextBlock
-											x:Name="OperationSpeedPerSecTextBlock"
-											HorizontalAlignment="Right"
-											VerticalAlignment="Top"
-											FontSize="13"
-											Style="{StaticResource BodyStrongTextBlockStyle}"
-											Text="{x:Bind SpeedText, Mode=OneWay}" />
-
-									</StackPanel>
+										XAxes="{x:Bind SpeedGraphXAxes, Mode=OneWay}"
+										YAxes="{x:Bind SpeedGraphYAxes, Mode=OneWay}" />
 								</Grid>
 
-							</Border>
+								<!--  Speed Text  -->
+								<StackPanel Margin="8,4">
+
+									<TextBlock
+										x:Name="OperationSpeedStringTextBlock"
+										HorizontalAlignment="Right"
+										VerticalAlignment="Top"
+										FontSize="10"
+										Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+										Style="{StaticResource CaptionTextBlockStyle}"
+										Text="{helpers:ResourceString Name=SpeedWithColon}" />
+
+									<TextBlock
+										x:Name="OperationSpeedPerSecTextBlock"
+										HorizontalAlignment="Right"
+										VerticalAlignment="Top"
+										FontSize="13"
+										Style="{StaticResource BodyStrongTextBlockStyle}"
+										Text="{x:Bind SpeedText, Mode=OneWay}" />
+
+								</StackPanel>
+
+							</Grid>
 
 							<!--  Footer  -->
 							<Grid

src/Files.App/Utils/StatusCenter/StatusCenterItem.cs

@@ -163,14 +163,18 @@ public StatusCenterItemProgressModel Progress
 
 		public ObservableCollection<ObservablePoint>? SpeedGraphValues { get; private set; }
 
+		public ObservableCollection<ObservablePoint>? SpeedGraphBackgroundValues { get; private set; }
+
 		public ObservableCollection<ISeries>? SpeedGraphSeries { get; private set; }
 
-		public IList<ICartesianAxis>? SpeedGraphXAxes { get; private set; }
+		public ObservableCollection<ICartesianAxis>? SpeedGraphXAxes { get; private set; }
 
-		public IList<ICartesianAxis>? SpeedGraphYAxes { get; private set; }
+		public ObservableCollection<ICartesianAxis>? SpeedGraphYAxes { get; private set; }
 
 		public double IconBackgroundCircleBorderOpacity { get; private set; }
 
+		public double? CurrentHighestPointValue { get; private set; }
+
 		public CancellationToken CancellationToken
 			=> _operationCancellationToken?.Token ?? default;
 
@@ -207,18 +211,17 @@ public StatusCenterItem(
 			IconBackgroundCircleBorderOpacity = 1;
 			AnimatedIconState = "NormalOff";
 			SpeedGraphValues = new();
+			SpeedGraphBackgroundValues = new();
 			CancelCommand = new RelayCommand(ExecuteCancelCommand);
 			Message = "ProcessingItems".GetLocalizedResource();
+			Source = source;
+			Destination = destination;
 
-			if (source is not null)
-				Source = source;
-
-			if (destination is not null)
-				Destination = destination;
-
+			// Get the graph color
 			if (App.Current.Resources["AppThemeFillColorAttentionBrush"] is not SolidColorBrush accentBrush)
 				return;
 
+			// Initialize graph series
 			SpeedGraphSeries = new()
 			{
 				new LineSeries<ObservablePoint>
@@ -231,21 +234,42 @@ public StatusCenterItem(
 					// Stroke
 					Stroke = new SolidColorPaint(
 						new(accentBrush.Color.R, accentBrush.Color.G, accentBrush.Color.B),
-						1),
+						1f),
 
 					// Fill under the stroke
 					Fill = new LinearGradientPaint(
 						new SKColor[] {
 							new(accentBrush.Color.R, accentBrush.Color.G, accentBrush.Color.B, 50),
 							new(accentBrush.Color.R, accentBrush.Color.G, accentBrush.Color.B, 10)
 						},
-						new(0.5f, 0f),
-						new(0.5f, 1.0f),
-						new[] { 0.2f, 1.3f }),
+						new(0f, 0f),
+						new(0f, 0f),
+						new[] { 0.1f, 1.0f }),
+				},
+				new LineSeries<ObservablePoint>
+				{
+					Values = SpeedGraphBackgroundValues,
+					GeometrySize = 0d,
+					DataPadding = new(0, 0),
+					IsHoverable = false,
+					
+					// Stroke
+					Stroke = new SolidColorPaint(
+						new(accentBrush.Color.R, accentBrush.Color.G, accentBrush.Color.B, 40),
+						0.1f),
+
+					// Fill under the stroke
+					Fill = new LinearGradientPaint(
+						new SKColor[] {
+							new(accentBrush.Color.R, accentBrush.Color.G, accentBrush.Color.B, 40)
+						},
+						new(0f, 0f),
+						new(0f, 0f)),
 				}
 			};
 
-			SpeedGraphXAxes = new ICartesianAxis[]
+			// Initialize X axes of the graph
+			SpeedGraphXAxes = new()
 			{
 				new Axis
 				{
@@ -256,7 +280,8 @@ public StatusCenterItem(
 				}
 			};
 
-			SpeedGraphYAxes = new ICartesianAxis[]
+			// Initialize Y axes of the graph
+			SpeedGraphYAxes = new()
 			{
 				new Axis
 				{
@@ -341,6 +366,7 @@ private void ReportProgress(StatusCenterItemProgressModel value)
 			if (value.Status is FileSystemStatusCode status)
 				FileSystemOperationReturnResult = status.ToStatus();
 
+			// Update the footer message, percentage, processing item name
 			if (value.Percentage is double p)
 			{
 				if (ProgressPercentage != value.Percentage)
@@ -428,9 +454,41 @@ private void ReportProgress(StatusCenterItemProgressModel value)
 					break;
 			}
 
-			// Remove the same point
+			bool isSamePoint = false;
+
+			// Remove the point that has the same X position
 			if (SpeedGraphValues?.FirstOrDefault(v => v.X == point.X) is ObservablePoint existingPoint)
+			{
 				SpeedGraphValues.Remove(existingPoint);
+				isSamePoint = true;
+			}
+
+			CurrentHighestPointValue ??= point.Y;
+
+			if (!isSamePoint)
+			{
+				// NOTE: -0.4 is the value that is needs to set for the graph drawing
+				var maxHeight = CurrentHighestPointValue * 1.44d - 0.4;
+
+				if (CurrentHighestPointValue < point.Y &&
+					SpeedGraphYAxes is not null &&
+					SpeedGraphYAxes.FirstOrDefault() is var item &&
+					item is not null)
+				{
+					// Max height is updated
+					CurrentHighestPointValue = point.Y;
+					maxHeight = CurrentHighestPointValue * 1.44d;
+					item.MaxLimit = maxHeight;
+
+					// NOTE: -0.1 is the value that is needs to set for the graph drawing
+					UpdateGraphBackgroundPoints(point.X, maxHeight - 0.1, true);
+				}
+				else
+				{
+					// Max height is not updated
+					UpdateGraphBackgroundPoints(point.X, maxHeight, false);
+				}
+			}
 
 			// Add a new point
 			SpeedGraphValues?.Add(point);
@@ -443,6 +501,20 @@ private void ReportProgress(StatusCenterItemProgressModel value)
 			_viewModel.NotifyChanges();
 		}
 
+		private void UpdateGraphBackgroundPoints(double? x, double? y, bool redraw)
+		{
+			if (SpeedGraphBackgroundValues is null)
+				return;
+
+			ObservablePoint newPoint = new(x, y);
+			SpeedGraphBackgroundValues.Add(newPoint);
+
+			if (redraw)
+			{
+				SpeedGraphBackgroundValues.ForEach(x => x.Y = CurrentHighestPointValue * 1.44d - 0.1);
+			}
+		}
+
 		public void ExecuteCancelCommand()
 		{
 			if (IsCancelable)