From 98a47719255fa3b412fef274ebec625333434199 Mon Sep 17 00:00:00 2001
From: AlexanderDotH <einfacheinalex@gmail.com>
Date: Sat, 6 May 2023 16:32:25 +0200
Subject: [PATCH] Fine tuned the LyricsScroller

---
 OpenLyricsClient.Shared/Utils/CryptoUtils.cs  |  21 ---
 OpenLyricsClient/App.axaml                    |   6 +-
 OpenLyricsClient/Backend/Cache/CacheEntry.cs  |   2 +-
 .../Backend/Cache/CacheManager.cs             |   2 +-
 .../Backend/Handler/Artwork/ArtworkHandler.cs | 151 +++++++++---------
 .../Custom/NewLyricsScrollerViewModel.cs      |  25 +++
 .../Providers/SettingsSpotifyViewModel.cs     |   8 +-
 .../SubPages/ScrollPreviewSubPageViewModel.cs |   8 +-
 .../View/Custom/NewLyricsScroller.axaml       |   5 +-
 .../View/Custom/NewLyricsScroller.axaml.cs    |  32 ++--
 .../Frontend/View/Pages/LyricsPage.axaml      |   2 +-
 11 files changed, 139 insertions(+), 123 deletions(-)
 delete mode 100644 OpenLyricsClient.Shared/Utils/CryptoUtils.cs

diff --git a/OpenLyricsClient.Shared/Utils/CryptoUtils.cs b/OpenLyricsClient.Shared/Utils/CryptoUtils.cs
deleted file mode 100644
index 1c4ae9c..0000000
--- a/OpenLyricsClient.Shared/Utils/CryptoUtils.cs
+++ /dev/null
@@ -1,21 +0,0 @@
-using System.Security.Cryptography;
-using System.Text;
-
-namespace OpenLyricsClient.Shared.Utils;
-
-public class CryptoUtils
-{
-    public static string ToMD5(string data)
-    {
-        MD5CryptoServiceProvider md5CryptoServiceProvider = new MD5CryptoServiceProvider();
-        byte[] compute = md5CryptoServiceProvider.ComputeHash(Encoding.UTF8.GetBytes(data));
-        
-        StringBuilder strBuilder = new StringBuilder();
-        for (int i = 0; i < compute.Length; i++)
-        {
-            strBuilder.Append(compute[i].ToString("x2"));
-        }
-        
-        return strBuilder.ToString();
-    }
-}
\ No newline at end of file
diff --git a/OpenLyricsClient/App.axaml b/OpenLyricsClient/App.axaml
index 031a675..28bb590 100644
--- a/OpenLyricsClient/App.axaml
+++ b/OpenLyricsClient/App.axaml
@@ -40,11 +40,11 @@
         <Style>
             
             <Style.Resources>
-                
+ 
                 <SolidColorBrush x:Key="PrimaryThemeColorBrush" Color="#dc143c">
                     <SolidColorBrush.Transitions>
                         <Transitions>
-                            <ColorTransition Property="Color" Duration="0:0:0.5" Easing="LinearEasing"/>
+                            <ColorTransition Property="Color" Duration="0:0:0.5" Easing="CircularEaseOut"/>
                         </Transitions>
                     </SolidColorBrush.Transitions>
                 </SolidColorBrush>
@@ -64,6 +64,7 @@
                         </Transitions>
                     </SolidColorBrush.Transitions>
                 </SolidColorBrush>
+                
                 <SolidColorBrush x:Key="SecondaryThemeFontColorBrush" Color="#FFFFFF">
                     <SolidColorBrush.Transitions>
                         <Transitions>
@@ -71,6 +72,7 @@
                         </Transitions>
                     </SolidColorBrush.Transitions>
                 </SolidColorBrush>
+                
                 <SolidColorBrush x:Key="LightThemeFontColorBrush" Color="#FFFFFF">
                     <SolidColorBrush.Transitions>
                         <Transitions>
diff --git a/OpenLyricsClient/Backend/Cache/CacheEntry.cs b/OpenLyricsClient/Backend/Cache/CacheEntry.cs
index 32187e6..b47399d 100644
--- a/OpenLyricsClient/Backend/Cache/CacheEntry.cs
+++ b/OpenLyricsClient/Backend/Cache/CacheEntry.cs
@@ -29,7 +29,7 @@ public CacheEntry(SongRequestObject songRequestObject, CacheData cacheData, long
                 append += songRequestObject.Artists;
                 append += songRequestObject.SongDuration;
 
-                this._id = CryptoUtils.ToMD5(append);
+                this._id = DevBase.Cryptography.MD5.MD5.ToMD5String(append);
             }
         }
 
diff --git a/OpenLyricsClient/Backend/Cache/CacheManager.cs b/OpenLyricsClient/Backend/Cache/CacheManager.cs
index 8a9c2d2..b28ce33 100644
--- a/OpenLyricsClient/Backend/Cache/CacheManager.cs
+++ b/OpenLyricsClient/Backend/Cache/CacheManager.cs
@@ -333,7 +333,7 @@ private string CalculateID(SongRequestObject songRequestObject)
             append += songRequestObject.Artists;
             append += songRequestObject.SongDuration;
 
-            return CryptoUtils.ToMD5(append);
+            return DevBase.Cryptography.MD5.MD5.ToMD5String(append);
         }
 
         private long CalculateExpirationDate()
diff --git a/OpenLyricsClient/Backend/Handler/Artwork/ArtworkHandler.cs b/OpenLyricsClient/Backend/Handler/Artwork/ArtworkHandler.cs
index c723c24..fb3a9dd 100644
--- a/OpenLyricsClient/Backend/Handler/Artwork/ArtworkHandler.cs
+++ b/OpenLyricsClient/Backend/Handler/Artwork/ArtworkHandler.cs
@@ -48,7 +48,6 @@ public ArtworkHandler(SongHandler songHandler)
             
             ArtworkFoundHandler += OnArtworkFoundHandler;
             
-            
             Core.INSTANCE.TaskRegister.Register(
                 out _applyArtworkSuspensionToken, 
                 new Task(async () => await ApplyArtworkTask(), Core.INSTANCE.CancellationTokenSource.Token, TaskCreationOptions.LongRunning), 
@@ -61,8 +60,78 @@ private void OnArtworkFoundHandler(object sender, ArtworkFoundEventArgs args)
             song.Artwork = args.Artwork;
             
             ArtworkAppliedEvent(args.Artwork);
+        }
+
+        public async Task FireArtworkSearch(SongResponseObject songResponseObject, SongChangedEventArgs songChangedEventArgs)
+        {
+            if (songChangedEventArgs.EventType == EventType.PRE)
+                return;
+            
+            if (DataValidator.ValidateData(songChangedEventArgs) &&
+                DataValidator.ValidateData(songChangedEventArgs.Song))
+            {
+                if (Core.INSTANCE.CacheManager.IsArtworkInCache(songResponseObject.SongRequestObject))
+                    return;
+
+                Stopwatch stopwatch = new Stopwatch();
+                stopwatch.Start();
+
+                await this._artworkCollector.CollectArtwork(songResponseObject);
+
+                this._debugger.Write("Took " + stopwatch.ElapsedMilliseconds + "ms to fetch the artwork!", DebugType.INFO);
+            }
+        }
+
+        private async Task ApplyArtworkTask()
+        {
+            while (!this._disposed)
+            {
+                await Task.Delay(500);
+
+                Shared.Structure.Song.Song song = this._songHandler.CurrentSong;
+                
+                if (!DataValidator.ValidateData(song))
+                    continue;
+                
+                if (!DataValidator.ValidateData(song.SongMetadata))
+                    continue;
+                
+                SongRequestObject songRequestObject = SongRequestObject.FromSong(song);
+                
+                if (!DataValidator.ValidateData(songRequestObject))
+                    continue;
+
+                Shared.Structure.Artwork.Artwork artworkCache = Core.INSTANCE.CacheManager.GetArtworkByRequest(songRequestObject);
+
+                if (!DataValidator.ValidateData(artworkCache))
+                    continue;
+
+                CalcAndApplyColors(artworkCache);
+                
+                if (artworkCache.Equals(song.Artwork))
+                    continue;
+
+                if (artworkCache.ArtworkColor.A == 0 &&
+                    artworkCache.ArtworkColor.R == 0 &&
+                    artworkCache.ArtworkColor.G == 0 &&
+                    artworkCache.ArtworkColor.B == 0)
+                {
+                    await artworkCache.CalculateColor();
+                    Core.INSTANCE.CacheManager.WriteToCache(songRequestObject, artworkCache);
+                }
+
+                if (!DataValidator.ValidateData(artworkCache))
+                    continue;
                 
-            if (!DataValidator.ValidateData(args.Artwork.ArtworkColor))
+                ArtworkFoundEvent(songRequestObject, artworkCache);
+
+                this._oldArtwork = artworkCache;
+            }
+        }
+
+        private void CalcAndApplyColors(Shared.Structure.Artwork.Artwork artwork)
+        {
+            if (!DataValidator.ValidateData(artwork.ArtworkColor))
                 return;
 
             SolidColorBrush primaryColor = App.Current.FindResource("PrimaryColorBrush") as SolidColorBrush;
@@ -83,11 +152,11 @@ private void OnArtworkFoundHandler(object sender, ArtworkFoundEventArgs args)
                 }
                 else
                 { 
-                    color.Color = args.Artwork.ArtworkColor;
+                    color.Color = artwork.ArtworkColor;
                 }
 
-                color.Color = args.Artwork.ArtworkColor;
-                secondaryColor.Color = args.Artwork.DarkArtworkColor;
+                color.Color = artwork.ArtworkColor;
+                secondaryColor.Color = artwork.DarkArtworkColor;
 
                 byte light = 120;
                 byte primary = 22;
@@ -103,7 +172,7 @@ private void OnArtworkFoundHandler(object sender, ArtworkFoundEventArgs args)
                 byte minG = (byte)Math.Round((double)(color.Color.G / 100.0));
                 byte minB = (byte)Math.Round((double)(color.Color.B / 100.0));
 
-                if (args.Artwork.GetBrightness() < 30)
+                if (artwork.GetBrightness() < 30)
                 {
                     selectedLineTextColor!.Color = new Color(255, (byte)(minR * darkSelected),
                             (byte)(minG * darkSelected), (byte)(minB * darkSelected));
@@ -133,78 +202,10 @@ private void OnArtworkFoundHandler(object sender, ArtworkFoundEventArgs args)
                     textColor!.Color = new Color(255, primary, primary, primary);
                     
                     secondaryTextColor!.Color = new Color(255, secondary, secondary, secondary);
-                    
                 }
-                
             });
         }
-
-        public async Task FireArtworkSearch(SongResponseObject songResponseObject, SongChangedEventArgs songChangedEventArgs)
-        {
-            if (songChangedEventArgs.EventType == EventType.PRE)
-                return;
-            
-            if (DataValidator.ValidateData(songChangedEventArgs) &&
-                DataValidator.ValidateData(songChangedEventArgs.Song))
-            {
-                if (Core.INSTANCE.CacheManager.IsArtworkInCache(songResponseObject.SongRequestObject))
-                    return;
-
-                Stopwatch stopwatch = new Stopwatch();
-                stopwatch.Start();
-
-                await this._artworkCollector.CollectArtwork(songResponseObject);
-
-                this._debugger.Write("Took " + stopwatch.ElapsedMilliseconds + "ms to fetch the artwork!", DebugType.INFO);
-            }
-        }
-
-        private async Task ApplyArtworkTask()
-        {
-            while (!this._disposed)
-            {
-                await Task.Delay(500);
-
-                Shared.Structure.Song.Song song = this._songHandler.CurrentSong;
-                
-                if (!DataValidator.ValidateData(song))
-                    continue;
-                
-                if (!DataValidator.ValidateData(song.SongMetadata))
-                    continue;
-                
-                SongRequestObject songRequestObject = SongRequestObject.FromSong(song);
-                
-                if (!DataValidator.ValidateData(songRequestObject))
-                    continue;
-
-                Shared.Structure.Artwork.Artwork artworkCache = Core.INSTANCE.CacheManager.GetArtworkByRequest(songRequestObject);
-
-                if (!DataValidator.ValidateData(artworkCache))
-                    continue;
-
-                if (artworkCache.Equals(song.Artwork))
-                    continue;
-
-                if (artworkCache.ArtworkColor.A == 0 &&
-                    artworkCache.ArtworkColor.R == 0 &&
-                    artworkCache.ArtworkColor.G == 0 &&
-                    artworkCache.ArtworkColor.B == 0)
-                {
-                    await artworkCache.CalculateColor();
-                    Core.INSTANCE.CacheManager.WriteToCache(songRequestObject, artworkCache);
-                }
-
-                if (!DataValidator.ValidateData(artworkCache))
-                    continue;
-                
-                if (this._oldArtwork == null || this._oldArtwork != artworkCache)
-                    ArtworkFoundEvent(songRequestObject, artworkCache);
-
-                this._oldArtwork = artworkCache;
-            }
-        }
-
+        
         protected virtual void ArtworkFoundEvent(SongRequestObject songResponseObject, Shared.Structure.Artwork.Artwork artwork)
         {
             ArtworkFoundEventHandler artworkFound = ArtworkFoundHandler;
diff --git a/OpenLyricsClient/Frontend/Models/Custom/NewLyricsScrollerViewModel.cs b/OpenLyricsClient/Frontend/Models/Custom/NewLyricsScrollerViewModel.cs
index b14e13a..010ec1d 100644
--- a/OpenLyricsClient/Frontend/Models/Custom/NewLyricsScrollerViewModel.cs
+++ b/OpenLyricsClient/Frontend/Models/Custom/NewLyricsScrollerViewModel.cs
@@ -1,8 +1,12 @@
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Runtime.CompilerServices;
+using Avalonia.Controls;
+using Avalonia.Media;
 using OpenLyricsClient.Backend;
 using OpenLyricsClient.Backend.Events.EventArgs;
+using OpenLyricsClient.Backend.Settings.Sections.Lyrics;
+using OpenLyricsClient.Frontend.Models.Pages.Settings;
 using OpenLyricsClient.Shared.Structure.Lyrics;
 
 namespace OpenLyricsClient.Frontend.Models.Custom;
@@ -18,6 +22,15 @@ public NewLyricsScrollerViewModel()
         Core.INSTANCE.LyricHandler.LyricChanged += LyricHandlerOnLyricChanged;
         Core.INSTANCE.LyricHandler.LyricsFound += LyricHandlerOnLyricsFound;
         Core.INSTANCE.SongHandler.SongChanged += SongHandlerOnSongChanged;
+        Core.INSTANCE.SettingsHandler.SettingsChanged += SettingsHandlerOnSettingsChanged;
+    }
+
+    private void SettingsHandlerOnSettingsChanged(object sender, SettingsChangedEventArgs settingschangedeventargs)
+    {
+        if (!settingschangedeventargs.Field.Equals("Artwork Background"))
+            return;
+        
+        OnPropertyChanged("UiBackground");
     }
 
     private void SongHandlerOnSongChanged(object sender, SongChangedEventArgs songchangedevent)
@@ -47,6 +60,18 @@ public LyricPart? Lyric
         set => SetField(ref this._lyric, value);
     }
     
+    public SolidColorBrush UiBackground
+    {
+        get
+        {
+            if (Core.INSTANCE.SettingsHandler.Settings<LyricsSection>()?.GetValue<bool>("Artwork Background") == true)
+                return App.Current.FindResource("PrimaryThemeColorBrush") as SolidColorBrush;
+            
+            return App.Current.FindResource("PrimaryBackgroundBrush") as SolidColorBrush;
+        }
+    }
+
+    
     protected virtual void OnPropertyChanged([CallerMemberName] string? propertyName = null)
     {
         PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
diff --git a/OpenLyricsClient/Frontend/Models/Pages/Settings/Providers/SettingsSpotifyViewModel.cs b/OpenLyricsClient/Frontend/Models/Pages/Settings/Providers/SettingsSpotifyViewModel.cs
index b044954..63d8079 100644
--- a/OpenLyricsClient/Frontend/Models/Pages/Settings/Providers/SettingsSpotifyViewModel.cs
+++ b/OpenLyricsClient/Frontend/Models/Pages/Settings/Providers/SettingsSpotifyViewModel.cs
@@ -63,10 +63,10 @@ private void SettingManagerOnSettingsChanged(object sender, SettingsChangedEvent
         if (settingschangedeventargs.Section != typeof(SpotifySection))
             return;
         
-        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("UserGreeting"));
-        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("UserFollower"));
-        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("UserPlan"));
-        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("IsConnected"));
+        OnPropertyChanged("UserGreeting");
+        OnPropertyChanged("UserFollower");
+        OnPropertyChanged("UserPlan");
+        OnPropertyChanged("IsConnected");
     }
 
     public string UserGreeting
diff --git a/OpenLyricsClient/Frontend/Models/Pages/SubPages/ScrollPreviewSubPageViewModel.cs b/OpenLyricsClient/Frontend/Models/Pages/SubPages/ScrollPreviewSubPageViewModel.cs
index e5568c0..d7f1a6f 100644
--- a/OpenLyricsClient/Frontend/Models/Pages/SubPages/ScrollPreviewSubPageViewModel.cs
+++ b/OpenLyricsClient/Frontend/Models/Pages/SubPages/ScrollPreviewSubPageViewModel.cs
@@ -27,11 +27,11 @@ public ScrollPreviewSubPageViewModel()
     
     public ObservableCollection<LyricPart> CurrentLyricParts
     {
-        get => _lyricParts;
+        get => this._lyricParts;
         set
         {
-            _lyricParts = value;
-            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("CurrentLyricParts"));
+            this._lyricParts = value;
+            OnPropertyChanged("CurrentLyricParts");
         }
     }
     
@@ -41,7 +41,7 @@ public LyricPart CurrentLyricPart
         set
         {
             _lyricPart = value;
-            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("CurrentLyricPart"));
+            OnPropertyChanged("CurrentLyricPart");
         }
     }
     
diff --git a/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml b/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml
index ae63dc2..04e3af7 100644
--- a/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml
+++ b/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml
@@ -11,7 +11,7 @@
         <custom:NewLyricsScrollerViewModel/>
     </UserControl.DataContext>
     
-    <Grid Background="{DynamicResource PrimaryThemeColorBrush}">
+    <Grid Background="{Binding UiBackground}">
         <custom:CustomScrollViewer Name="CTRL_Viewer">
             <Panel Name="CTRL_Container">
                 <ItemsRepeater Name="HIDDEN_CTRL_Repeater"
@@ -46,7 +46,8 @@
                     </ItemsRepeater.ItemTemplate>
                     <ItemsRepeater.Transitions>
                         <Transitions>
-                            <ThicknessTransition Property="Margin" Duration="0:0:3.0" Easing="LinearEasing"/>
+                            <DoubleTransition Property="Opacity" Duration="0:0:3.0" Easing="CircularEaseOut"/>
+                            <ThicknessTransition Property="Margin" Duration="0:0:1.0" Easing="CircularEaseOut"/>
                         </Transitions>
                     </ItemsRepeater.Transitions>
                 </ItemsRepeater>
diff --git a/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml.cs b/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml.cs
index 3019c4d..2628ef0 100644
--- a/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml.cs
+++ b/OpenLyricsClient/Frontend/View/Custom/NewLyricsScroller.axaml.cs
@@ -27,6 +27,10 @@ namespace OpenLyricsClient.Frontend.View.Custom;
 
 public partial class NewLyricsScroller : UserControl
 {
+    // Styled Properties
+    public static readonly StyledProperty<bool> IsSyncedProperty =
+        AvaloniaProperty.Register<LyricsScroller, bool>(nameof(IsSynced));
+    
     // Controls
     private CustomScrollViewer _customScrollViewer;
     private ItemsRepeater _repeater;
@@ -47,7 +51,6 @@ public partial class NewLyricsScroller : UserControl
     private double _nextScrollOffset;
     private double _frameRate;
     private double _speed;
-    private bool _isSynced;
     
     public NewLyricsScroller()
     {
@@ -59,8 +62,6 @@ public NewLyricsScroller()
 
         this._frameRate = 144;
 
-        this._isSynced = true;
-        
         this._viewModel = this.DataContext as NewLyricsScrollerViewModel;
         
         this._hiddenRepeater = this.Get<ItemsRepeater>(nameof(HIDDEN_CTRL_Repeater));
@@ -78,7 +79,10 @@ private void UiThreadRenderTimerOnTick(TimeSpan obj)
     {
         this._repeater.Margin = GetMargin();
 
-        if (this._isSynced)
+        if (DataValidator.ValidateData(this._viewModel.Lyrics))
+            this._repeater.Opacity = 1.0d;
+        
+        if (this.IsSynced)
         {
             double y = SmoothAnimator.Lerp(
                 this._currentScrollOffset,
@@ -100,14 +104,13 @@ private void SongHandlerOnSongChanged(object sender, SongChangedEventArgs songch
     
         Dispatcher.UIThread.InvokeAsync(() =>
         {
-            this._repeater.Margin = GetMargin() * 4;
-            
             /*this._repeater.Margin = 
                 new Thickness(0, 
                     this.GetIndexOfLyric(this._viewModel.Lyric, this._viewModel.Lyrics) == 
                     this._viewModel.Lyrics.Length ?
                         -3000 : 3000, 0, 0);*/
-            this._isSynced = false;
+            this.IsSynced = true;
+            this._repeater.Opacity = 0;
             this._customScrollViewer.Offset = new Vector(0, 0);
             this._customScrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
         });
@@ -117,7 +120,6 @@ private void LyricHandlerOnLyricsFound(object sender)
     {
         Dispatcher.UIThread.InvokeAsync(async () =>
         {
-            this._isSynced = true;
             this._customScrollViewer.VerticalScrollBarVisibility = ScrollBarVisibility.Auto;
         });
 
@@ -229,9 +231,9 @@ public float CalcSpeed()
         float highest = 0;
         int hSum = 0;
         
-        for (int i = 0; i < this._viewModel.Lyrics.Length; i++)
+        for (int i = 0; i < this._viewModel!.Lyrics.Length; i++)
         {
-            LyricPart currentPart = this._viewModel.Lyrics[i];
+            LyricPart currentPart = this._viewModel!.Lyrics[i];
             
             if (lastPart == null)
             {
@@ -271,7 +273,7 @@ protected override void OnPointerWheelChanged(PointerWheelEventArgs e)
     {
         if (e.Delta.Y != 0)
         {
-            this._isSynced = false;
+            this.IsSynced = false;
         }
 
         if (e.Delta.Y > 0)
@@ -296,6 +298,12 @@ protected override void OnPointerWheelChanged(PointerWheelEventArgs e)
     public void Resync()
     {
         this._currentScrollOffset = this._customScrollViewer.Offset.Y;
-        this._isSynced = true;
+        this.IsSynced = true;
+    }
+
+    public bool IsSynced
+    {
+        get => GetValue(IsSyncedProperty);
+        set => SetValue(IsSyncedProperty, value);
     }
 }
\ No newline at end of file
diff --git a/OpenLyricsClient/Frontend/View/Pages/LyricsPage.axaml b/OpenLyricsClient/Frontend/View/Pages/LyricsPage.axaml
index d973af3..ab7ae90 100644
--- a/OpenLyricsClient/Frontend/View/Pages/LyricsPage.axaml
+++ b/OpenLyricsClient/Frontend/View/Pages/LyricsPage.axaml
@@ -276,7 +276,7 @@
         <Button Name="BTN_SyncMode"
                 IsEnabled="{Binding ElementName=LRC_Display, Path=!IsSynced, Mode=OneWay}"
                 assists:ButtonAssist.CornerRadius="10"
-                assists:ShadowAssist.ShadowDepth="Depth5"
+                assists:ShadowAssist.ShadowDepth="Depth3"
                 UseLayoutRounding="True"
                 Width="45"
                 Height="45"