CQ: Add for Animated Icon

Author: XTorLukas

src/Files.App/UserControls/Symbols/ArrowGlyph.xaml

@@ -2,16 +2,27 @@
 	x:Class="Files.App.UserControls.Symbols.ArrowGlyph"
 	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
 	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 	xmlns:local="using:Files.App.UserControls.Symbols"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 	x:Name="Root"
 	mc:Ignorable="d">
 
-	<Grid x:Name="SymbolGrid">
+	<Grid x:Name="SymbolGrid" Loaded="SymbolGrid_Loaded">
 		<FontIcon
 			x:Name="SymbolIcon"
 			FontSize="{Binding FontSize, ElementName=Root}"
-			Glyph="{x:Bind Glyph, Mode=OneWay}" />
+			Glyph="{x:Bind Glyph, Mode=OneWay}"
+			Visibility="{x:Bind IsStaticIconVisible, Mode=OneWay}" />
+
+		<AnimatedIcon x:Name="DynamicAnimatedIcon" Visibility="{x:Bind IsAnimatedIconVisible, Mode=OneWay}">
+			<AnimatedIcon.Source>
+				<animatedvisuals:AnimatedBackVisualSource />
+			</AnimatedIcon.Source>
+			<AnimatedIcon.FallbackIconSource>
+				<SymbolIconSource Symbol="Back" />
+			</AnimatedIcon.FallbackIconSource>
+		</AnimatedIcon>
 	</Grid>
 </UserControl>

src/Files.App/UserControls/Symbols/ArrowGlyph.xaml.cs

@@ -1,27 +1,34 @@
-using Microsoft.UI;
-using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.AnimatedVisuals;
 using Microsoft.UI.Xaml.Media;
+using System.Numerics;
+using System.Runtime.CompilerServices;
 
 namespace Files.App.UserControls.Symbols
 {
 	[DependencyProperty<double>("FontSize", DefaultValue = "(double)12.0")]
-	[DependencyProperty<Brush>("Color", nameof(OnColorChange), DefaultValue = "null")]
+	[DependencyProperty<Brush>("Foreground", nameof(OnColorChange), DefaultValue = "null")]
 	[DependencyProperty<ArrowSymbolType>("Arrow", nameof(OnArrowChange), DefaultValue = "Files.App.Data.Enums.ArrowSymbolType.ChevronRight")]
+	[DependencyProperty<bool>("UseAnimatedIcon", nameof(OnUseAnimatedIconChanged), DefaultValue = "false")]
 	[DependencyProperty<string>("Glyph", DefaultValue = "null")]
-	public sealed partial class ArrowGlyph : UserControl, IRealTimeControl
+	public partial class ArrowGlyph : UserControl, INotifyPropertyChanged, IRealTimeControl
 	{
 		private static ICommandManager Commands { get; } = Ioc.Default.GetRequiredService<ICommandManager>();
 
 		private string ForwardGlyph { get; } = Commands.NavigateForward.Glyph.BaseGlyph;
-
 		private string BackGlyph { get; } = Commands.NavigateBack.Glyph.BaseGlyph;
-
 		private string ChevronLeft { get; } = "\uE76B";
 		private string ChevronRight { get; } = "\uE76C";
 
 		private long _token;
 
+		public event PropertyChangedEventHandler? PropertyChanged;
+
+		public bool IsStaticIconVisible => !UseAnimatedIcon;
+
+		public bool IsAnimatedIconVisible => UseAnimatedIcon;
+
 		public ArrowGlyph()
 		{
 			InitializeComponent();
@@ -30,8 +37,25 @@ public ArrowGlyph()
 			RealTimeLayoutService.AddCallback(this, UpdateGlyph);
 		}
 
+
+		protected void OnPropertyChanged([CallerMemberName] string? propertyName = null)
+		{
+			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+		}
+
 		private void UpdateGlyph()
 		{
+			if (UseAnimatedIcon)
+			{
+				SymbolGrid.Rotation = Arrow switch
+				{
+					ArrowSymbolType.Forward => FlowDirection == FlowDirection.LeftToRight ? 180 : 0,
+					ArrowSymbolType.Back => FlowDirection == FlowDirection.LeftToRight ? 0 : 180,
+					_ => 0
+				};
+				return;
+			}
+
 			Glyph = Arrow switch
 			{
 				ArrowSymbolType.Forward => FlowDirection == FlowDirection.LeftToRight ? ForwardGlyph : BackGlyph,
@@ -56,6 +80,26 @@ private void OnArrowChange(ArrowSymbolType oldValue, ArrowSymbolType newValue)
 			if (oldValue != newValue)
 				UpdateGlyph();
 		}
+
+		private void OnUseAnimatedIconChanged(bool oldValue, bool newValue)
+		{
+			if (oldValue != newValue)
+			{
+				UpdateGlyph();
+				OnPropertyChanged(nameof(IsStaticIconVisible));
+				OnPropertyChanged(nameof(IsAnimatedIconVisible));
+			}
+		}
+
+		private void SymbolGrid_Loaded(object sender, RoutedEventArgs e)
+		{
+			if (UseAnimatedIcon)
+			{
+				var centerX = SymbolGrid.ActualWidth / 2;
+				var centerY = SymbolGrid.ActualHeight / 2;
+				SymbolGrid.CenterPoint = new Vector3((float)centerX, (float)centerY, 0);
+			}
+		}
 	}
 
 }

src/Files.App/Views/Layouts/ColumnLayoutPage.xaml

@@ -345,7 +345,7 @@
 											x:Load="{x:Bind IsFolder}"
 											Arrow="ChevronRight"
 											FontSize="12"
-											Color="{ThemeResource TextFillColorSecondaryBrush}" />
+											Foreground="{ThemeResource TextFillColorSecondaryBrush}" />
 
 									</StackPanel>
 								</Grid>

src/Files.App/Views/Properties/MainPropertiesPage.xaml

@@ -9,6 +9,7 @@
 	xmlns:dataitems="using:Files.App.Data.Items"
 	xmlns:helpers="using:Files.App.Helpers"
 	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	xmlns:s="using:Files.App.UserControls.Symbols"
 	xmlns:uc="using:Files.App.UserControls"
 	xmlns:vm="using:Files.App.ViewModels.Properties"
 	xmlns:wctconverters="using:CommunityToolkit.WinUI.UI.Converters"
@@ -69,14 +70,7 @@
 						<StaticResource x:Key="ButtonBorderBrushDisabled" ResourceKey="SystemControlTransparentBrush" />
 					</ResourceDictionary>
 				</Button.Resources>
-				<AnimatedIcon x:Name="BackAnimatedIcon">
-					<AnimatedIcon.Source>
-						<animatedvisuals:AnimatedBackVisualSource />
-					</AnimatedIcon.Source>
-					<AnimatedIcon.FallbackIconSource>
-						<SymbolIconSource Symbol="Back" />
-					</AnimatedIcon.FallbackIconSource>
-				</AnimatedIcon>
+				<s:ArrowGlyph Arrow="Back" UseAnimatedIcon="True" />
 			</Button>
 
 			<!--  Title Text Area  -->