Carousel UX bugfixes

AIDevGallery/Controls/HomePage/Header/AnimatedImage.xaml

@@ -10,7 +10,13 @@
     mc:Ignorable="d">
 
     <Grid>
-        <Image x:Name="BottomImage" Stretch="UniformToFill" />
-        <Image x:Name="TopImage" Stretch="UniformToFill" />
+        <Image
+            x:Name="BottomImage"
+            Opacity="1"
+            Stretch="UniformToFill" />
+        <Image
+            x:Name="TopImage"
+            Opacity="0"
+            Stretch="UniformToFill" />
     </Grid>
 </UserControl>

AIDevGallery/Controls/HomePage/Header/AnimatedImage.xaml.cs

@@ -35,7 +35,7 @@ protected virtual void IsImageChanged(Uri oldValue, Uri newValue)
     private void OnIsImageChanged()
     {
         BottomImage.Source = new BitmapImage(this.ImageUrl);
-        AnimationSet selectAnimation = [new OpacityAnimation() { From = 1, To = 0, Duration = TimeSpan.FromMilliseconds(1000) }];
+        AnimationSet selectAnimation = [new OpacityAnimation() { From = 1, To = 0, Duration = TimeSpan.FromMilliseconds(800) }];
         selectAnimation.Completed += (s, e) =>
         {
             TopImage.Source = new BitmapImage(this.ImageUrl);

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

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,49 @@ 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();
+    }
 }