Grid View: Added a highlight animation to covers of games that are ru…

…nning. Enabled by default, can be enabled or disabled with ThemeModifier extension #26
darklinkpower · May 8, 2022 · 9f07eb5 · 9f07eb5
1 parent e886560
commit 9f07eb5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/source/Constants.xaml b/source/Constants.xaml
@@ -20,6 +20,7 @@
     <sys:Boolean x:Key="GridViewShowHltbDataGrid">True</sys:Boolean>
     <sys:Boolean x:Key="GridViewEnableCoverShineAnimation">False</sys:Boolean>
     <sys:Boolean x:Key="GridViewCoverDisplayLibraryBanner">False</sys:Boolean>
+    <sys:Boolean x:Key="GridViewEnablePlayingBorderAnimation">True</sys:Boolean>
     <sys:Double x:Key="GridViewCoverLibraryBannerOpacity">1.0</sys:Double>
     <!--region end-->
 

diff --git a/source/DerivedStyles/GridViewItemTemplate.xaml b/source/DerivedStyles/GridViewItemTemplate.xaml
@@ -454,6 +454,10 @@
                                                    HorizontalAlignment="Center" VerticalAlignment="Center"/>
                                     </Border>
                                     <Border Background="#AA000000" x:Name="BorderMouseOver" Visibility="Collapsed" />
+                                    <Border Name="AnimatedIsGamePlayingBorder" Tag="False"
+                                            Style="{DynamicResource PlayingBorderAnimation}" IsHitTestVisible="False" />
+                                    <TextBlock Name="EnablePlayingBorderAnimation" Visibility="Collapsed"
+                                               Tag="{DynamicResource GridViewEnablePlayingBorderAnimation}" />
                                     <Border Name="ShineBackground" Tag="False" IsHitTestVisible="False"
                                             Style="{DynamicResource AnimatedCoverShineBackground}" />
                                     <TextBlock Name="EnableHighlightAnimation" Visibility="Collapsed"
@@ -538,6 +542,14 @@
                             </MultiDataTrigger.Conditions>
                             <Setter Property="Tag" Value="True" TargetName="ShineBackground" />
                         </MultiDataTrigger>
+                        <MultiDataTrigger>
+                            <MultiDataTrigger.Conditions>
+                                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsVisible}" Value="True" />
+                                <Condition Binding="{Binding ElementName=EnablePlayingBorderAnimation, Path=Tag}" Value="True" />
+                                <Condition Binding="{Binding IsRunning}" Value="True" />
+                            </MultiDataTrigger.Conditions>
+                            <Setter Property="Tag" Value="True" TargetName="AnimatedIsGamePlayingBorder" />
+                        </MultiDataTrigger>
                         <DataTrigger Binding="{Settings ShowGridItemBackground}" Value="True">
                             <Setter Property="Padding" Value="2,5,2,5" TargetName="ShowGameName" />
                             <Setter Property="TextAlignment" Value="Center" TargetName="ShowGameName" />
@@ -577,6 +589,28 @@
         </Setter>
     </Style>
 
+    <Style x:Key="PlayingBorderAnimation" TargetType="Border">
+        <Setter Property="Opacity" Value="-0.10" />
+        <Setter Property="Visibility" Value="Collapsed" />
+        <Setter Property="Background" Value="#ffffff" />
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" Value="True">
+                <Setter Property="Visibility" Value="Visible" />
+                <DataTrigger.EnterActions>
+                    <BeginStoryboard x:Name="BorderStoryboard">
+                        <Storyboard RepeatBehavior="Forever">
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.25" Duration="0:00:1.60" AutoReverse="True"/>
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.EnterActions>
+                <DataTrigger.ExitActions>
+                    <StopStoryboard BeginStoryboardName="BorderStoryboard" />
+                </DataTrigger.ExitActions>
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+
     <Style x:Key="AnimatedCoverShineBackground" TargetType="Border">
         <Setter Property="Opacity" Value="0.00" />
         <Setter Property="Background">

diff --git a/source/thememodifier.yaml b/source/thememodifier.yaml
@@ -15,7 +15,8 @@ Constants:
     - GridViewAllowUseOfLogos: 'Allow use of Extra Metadata Loader logos'
     - GridViewShowHltbDataGrid: 'Show HowLongToBeat data grid'
     - GridViewLibraryGameShowFavorite: 'Show favorites icon on game covers'
-    - GridViewEnableCoverShineAnimation: 'Enable cover highlight animation'
+    - GridViewEnableCoverShineAnimation: 'Enable cover highlight animation on hover'
+    - GridViewEnablePlayingBorderAnimation: 'Enable cover animation of games that are running'
     - GridViewCoverSubtitleVisibility: 'Visibility of time played under game covers'
     - GridViewCoverDisplayLibraryBanner: 'Show game platforms and library banners on covers'
     - GridViewCoverLibraryBannerOpacity(0.5, 1.0): 'Opacity of library banner'