Make tiles animate on keyboard focus

microsoft · Jan 30, 2025 · 8b44222 · 8b44222
1 parent 1c0ae00
commit 8b44222
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 34 deletions.
diff --git a/AIDevGallery/Controls/HomePage/Header/HeaderCarousel.xaml b/AIDevGallery/Controls/HomePage/Header/HeaderCarousel.xaml
@@ -9,6 +9,7 @@
     xmlns:media="using:CommunityToolkit.WinUI.Media"
     xmlns:wuc="using:WinUICommunity"
     Loaded="UserControl_Loaded"
+    Unloaded="UserControl_Unloaded"
     mc:Ignorable="d">
     <UserControl.Resources>
         <ResourceDictionary>
@@ -68,12 +69,13 @@
                 <local:AnimatedImage
                     x:Name="BackDropImage"
                     ImageUrl="ms-appx:///Assets/TileImages/BackgroundBlur.png"
-                    Visibility="Visible" />
-                <Border Visibility="Visible">
-                    <Border.Background>
-                        <media:BackdropBlurBrush Amount="100.0" />
-                    </Border.Background>
-                </Border>
+                    Visibility="Visible">
+                    <media:UIElementExtensions.VisualFactory>
+                        <media:PipelineVisualFactory>
+                            <media:BlurEffect Amount="100.0" />
+                        </media:PipelineVisualFactory>
+                    </media:UIElementExtensions.VisualFactory>
+                </local:AnimatedImage>
             </Grid>
         </wuc:OpacityMaskView>
         <StackPanel

diff --git a/AIDevGallery/Controls/HomePage/Header/HeaderCarousel.xaml.cs b/AIDevGallery/Controls/HomePage/Header/HeaderCarousel.xaml.cs
@@ -28,23 +28,39 @@ public HeaderCarousel()
 
     private void UserControl_Loaded(object sender, RoutedEventArgs e)
     {
-        SubscribeToEvents();
         ResetAndShuffle();
         SelectNextTile();
-        selectionTimer.Tick += SelectionTimer_Tick;
-        selectionTimer.Start();
+        SubscribeToEvents();
     }
 
     private void SubscribeToEvents()
     {
+        selectionTimer.Tick += SelectionTimer_Tick;
+        selectionTimer.Start();
         foreach (HeaderTile tile in TilePanel.Children)
         {
             tile.PointerEntered += Tile_PointerEntered;
             tile.PointerExited += Tile_PointerExited;
+            tile.GotFocus += Tile_GotFocus;
+            tile.LostFocus += Tile_LostFocus;
             tile.Click += Tile_Click;
         }
     }
 
+    private void UnsubscribeToEvents()
+    {
+        selectionTimer.Tick -= SelectionTimer_Tick;
+        selectionTimer.Stop();
+        foreach (HeaderTile tile in TilePanel.Children)
+        {
+            tile.PointerEntered -= Tile_PointerEntered;
+            tile.PointerExited -= Tile_PointerExited;
+            tile.GotFocus -= Tile_GotFocus;
+            tile.LostFocus -= Tile_LostFocus;
+            tile.Click -= Tile_Click;
+        }
+    }
+
     private void Tile_Click(object sender, RoutedEventArgs e)
     {
         if (sender is HeaderTile tile)
@@ -113,31 +129,6 @@ private int GetNextUniqueRandom()
         return numbers[currentIndex++];
     }
 
-    private void Tile_PointerExited(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
-    {
-        ((HeaderTile)sender).IsSelected = false;
-        selectionTimer.Start();
-    }
-
-    private async void Tile_PointerEntered(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
-    {
-        selectedTile = (HeaderTile)sender;
-        selectionTimer.Stop();
-        deselectionTimer.Stop();
-
-        foreach (HeaderTile t in TilePanel.Children)
-        {
-            if (t != selectedTile && t.IsSelected)
-            {
-                t.IsSelected = false;
-            }
-        }
-
-        // Wait for the animation of a potential other tile to finish
-        await Task.Delay(360);
-        SetTileVisuals();
-    }
-
     private void SetTileVisuals()
     {
         if (selectedTile != null)
@@ -174,4 +165,59 @@ private void AnimateTitleGradient(LinearGradientBrush brush)
 
         storyboard.Begin();
     }
+
+    private void Tile_PointerExited(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+    {
+        ((HeaderTile)sender).IsSelected = false;
+        selectionTimer.Start();
+    }
+
+    private void Tile_PointerEntered(object sender, Microsoft.UI.Xaml.Input.PointerRoutedEventArgs e)
+    {
+        selectedTile = (HeaderTile)sender;
+        SelectTile();
+    }
+
+    private async void SelectTile()
+    {
+        await Task.Delay(100);
+        selectionTimer.Stop();
+        deselectionTimer.Stop();
+
+        foreach (HeaderTile t in TilePanel.Children)
+        {
+            t.IsSelected = false;
+        }
+
+        // Wait for the animation of a potential other tile to finish
+        await Task.Delay(360);
+        SetTileVisuals();
+    }
+    private void Tile_GotFocus(object sender, RoutedEventArgs e)
+    {
+        selectedTile = (HeaderTile)sender;
+        SelectTile();
+    }
+
+    private void Tile_LostFocus(object sender, RoutedEventArgs e)
+    {
+        ((HeaderTile)sender).IsSelected = false;
+        selectionTimer.Start();
+    }
+
+    private void UserControl_Unloaded(object sender, RoutedEventArgs e)
+    {
+        UnsubscribeToEvents();
+    }
+
+    private void Button_Click(object sender, RoutedEventArgs e)
+    {
+
+        foreach (HeaderTile t in TilePanel.Children)
+        {
+
+            t.IsSelected = false;
+
+        }
+    }
 }