Merge pull request #6 from microsoft/niels9001/homepage-tweaks

[HomePage] Adding scrolling and visual improvements

AIDevGallery/AIDevGallery.csproj

@@ -114,6 +114,7 @@
     <None Remove="Assets\TileImages\DetectObjects.png" />
     <None Remove="Assets\TileImages\ImageSegmentation.png" />
     <None Remove="Assets\TileImages\SemanticSearch.png" />
+    <None Remove="Assets\TileImages\Speech.png" />
     <None Remove="Assets\TileImages\TextGeneration.png" />
     <None Remove="Assets\TileImages\TextSummarization.png" />
     <None Remove="Assets\TileImages\Transcription.png" />

AIDevGallery/Controls/HomePage/Header/HeaderCarousel.xaml

@@ -122,88 +122,68 @@
             x:Name="scrollViewer"
             Grid.Row="1"
             Margin="0,96,0,0"
-            HorizontalScrollBarVisibility="Hidden">
+            HorizontalScrollBarVisibility="Hidden"
+            VerticalScrollBarVisibility="Disabled"
+            VerticalScrollMode="Disabled">
             <StackPanel
                 x:Name="TilePanel"
                 Padding="64,0,64,0"
                 Orientation="Horizontal"
-                Spacing="16">
+                Spacing="-48">
                 <local:HeaderTile
-                    Width="200"
                     Description="Chat with a local language model"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Chat"
                     ImageUrl="ms-appx:///Assets/TileImages/Chat.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="chat" />
                 <local:HeaderTile
                     Description="Summarize text with a local language model"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Text Summarization"
                     ImageUrl="ms-appx:///Assets/TileImages/TextSummarization.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="summarize-text" />
                 <local:HeaderTile
-                    Width="160"
                     Description="Semantically search text with a local embeddings model"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Semantic Search"
                     ImageUrl="ms-appx:///Assets/TileImages/SemanticSearch.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="semantic-search" />
                 <local:HeaderTile
                     Description="Generate text with a local model"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Text Generation"
                     ImageUrl="ms-appx:///Assets/TileImages/TextGeneration.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="generate-text" />
                 <local:HeaderTile
                     Description="Classify the main object of a given photo"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Classify Image"
                     ImageUrl="ms-appx:///Assets/TileImages/ClassifyImage.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="classify-image" />
                 <local:HeaderTile
-                    Width="160"
                     Description="Simple audio translation to English"
                     Foreground="{StaticResource LightTextGradient}"
                     Header="Translate"
                     ImageUrl="ms-appx:///Assets/TileImages/Translation.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="translate-audio" />
                 <local:HeaderTile
                     Description="Detect items in a photo"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Detect Objects"
                     ImageUrl="ms-appx:///Assets/TileImages/DetectObjects.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="detect-objects" />
                 <local:HeaderTile
-                    Width="186"
                     Description="Segment an image"
                     Foreground="{StaticResource LightTextGradient}"
                     Header="Image Segmentation"
                     ImageUrl="ms-appx:///Assets/TileImages/ImageSegmentation.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
                     SampleID="segment-image" />
                 <local:HeaderTile
                     Description="Transcribe audio into text"
                     Foreground="{StaticResource DarkTextGradient}"
                     Header="Transcribe"
                     ImageUrl="ms-appx:///Assets/TileImages/Transcription.png"
-                    PointerEntered="Tile_PointerEntered"
-                    PointerExited="Tile_PointerExited"
-                    SampleID="transcribe" />
+                    SampleID="transcribe-audio" />
             </StackPanel>
         </ScrollViewer>
     </Grid>

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

@@ -28,12 +28,32 @@ public HeaderCarousel()
 
     private void UserControl_Loaded(object sender, RoutedEventArgs e)
     {
+        SubscribeToEvents();
         ResetAndShuffle();
         SelectNextTile();
         selectionTimer.Tick += SelectionTimer_Tick;
         selectionTimer.Start();
     }
 
+    private void SubscribeToEvents()
+    {
+        foreach (HeaderTile tile in TilePanel.Children)
+        {
+            tile.PointerEntered += Tile_PointerEntered;
+            tile.PointerExited += Tile_PointerExited;
+            tile.Click += Tile_Click;
+        }
+    }
+
+    private void Tile_Click(object sender, RoutedEventArgs e)
+    {
+        if (sender is HeaderTile tile)
+        {
+            tile.PointerExited -= Tile_PointerExited;
+            App.MainWindow.NavigateToPage(App.FindScenarioById(tile.SampleID));
+        }
+    }
+
     private void SelectionTimer_Tick(object? sender, object e)
     {
         SelectNextTile();
@@ -120,6 +140,8 @@ private async void Tile_PointerEntered(object sender, Microsoft.UI.Xaml.Input.Po
             await Task.Delay(1000);
         }
 
+        // Wait for the animation of a potential other tile to finish
+        await Task.Delay(500);
         SetTileVisuals();
     }
 

AIDevGallery/Controls/HomePage/Header/HeaderTile/HeaderTile.cs

@@ -5,7 +5,6 @@
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using System;
-using ScaleAnimation = CommunityToolkit.WinUI.Animations.ScaleAnimation;
 
 namespace AIDevGallery.Controls;
 
@@ -23,15 +22,15 @@ public string ImageUrl
         set => SetValue(ImageUrlProperty, value);
     }
 
-    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(nameof(Header), typeof(string), typeof(HeaderTile), new PropertyMetadata(defaultValue: string.Empty));
+    public static readonly DependencyProperty HeaderProperty = DependencyProperty.Register(nameof(Header), typeof(string), typeof(HeaderTile), new PropertyMetadata(defaultValue: null));
 
     public string Header
     {
         get => (string)GetValue(HeaderProperty);
         set => SetValue(HeaderProperty, value);
     }
 
-    public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(nameof(Description), typeof(string), typeof(HeaderTile), new PropertyMetadata(defaultValue: string.Empty));
+    public static readonly DependencyProperty DescriptionProperty = DependencyProperty.Register(nameof(Description), typeof(string), typeof(HeaderTile), new PropertyMetadata(defaultValue: null));
 
     public string Description
     {
@@ -62,14 +61,7 @@ public HeaderTile()
 
     protected override void OnApplyTemplate()
     {
-        Click -= HeaderTile_Click;
         base.OnApplyTemplate();
-        Click += HeaderTile_Click;
-    }
-
-    private void HeaderTile_Click(object sender, RoutedEventArgs e)
-    {
-        App.MainWindow.NavigateToPage(App.FindScenarioById(SampleID));
     }
 
     protected virtual void IsSelectedChanged(object oldValue, object newValue)
@@ -83,13 +75,13 @@ private void OnIsSelectedChanged()
         {
             Canvas.SetZIndex(this, 10);
             VisualStateManager.GoToState(this, "Selected", true);
-            AnimationSet selectAnimation = [new ScaleAnimation() { To = "1.4", Duration = TimeSpan.FromMilliseconds(600) }, new OpacityDropShadowAnimation() { To = 0.4 }, new BlurRadiusDropShadowAnimation() { To = 24 }];
+            AnimationSet selectAnimation = [new ScaleAnimation() { To = "1.0", Duration = TimeSpan.FromMilliseconds(600) }, new OpacityDropShadowAnimation() { To = 0.4 }, new BlurRadiusDropShadowAnimation() { To = 24 }];
             selectAnimation.Start(this);
         }
         else
         {
             VisualStateManager.GoToState(this, "NotSelected", true);
-            AnimationSet deselectAnimation = [new ScaleAnimation() { To = "1.0", Duration = TimeSpan.FromMilliseconds(600) }, new OpacityDropShadowAnimation() { To = 0.2 }, new BlurRadiusDropShadowAnimation() { To = 12 }];
+            AnimationSet deselectAnimation = [new ScaleAnimation() { To = "0.8", Duration = TimeSpan.FromMilliseconds(350) }, new OpacityDropShadowAnimation() { To = 0.2 }, new BlurRadiusDropShadowAnimation() { To = 12 }];
             deselectAnimation.Completed += (s, e) =>
             {
                 Canvas.SetZIndex(this, 0);

AIDevGallery/Controls/HomePage/Header/HeaderTile/HeaderTile.xaml

@@ -17,11 +17,12 @@
 
     <Style BasedOn="{StaticResource DefaultHeaderTileStyle}" TargetType="local:HeaderTile" />
     <Style x:Key="DefaultHeaderTileStyle" TargetType="local:HeaderTile">
-        <Setter Property="Width" Value="300" />
+        <Setter Property="Width" Value="360" />
         <Setter Property="UseSystemFocusVisuals" Value="True" />
         <Setter Property="UseLayoutRounding" Value="True" />
-        <Setter Property="Height" Value="160" />
+        <Setter Property="Height" Value="208" />
         <Setter Property="CornerRadius" Value="8" />
+        <Setter Property="ui:VisualExtensions.Scale" Value="0.8" />
         <Setter Property="ui:VisualExtensions.NormalizedCenterPoint" Value="0.5, 0.5" />
         <Setter Property="ui:Effects.Shadow">
             <Setter.Value>
@@ -33,20 +34,17 @@
                     Color="#000000" />
             </Setter.Value>
         </Setter>
-        <!--<Setter Property="animations:Implicit.Animations">
-            <Setter.Value>
-                <animations:ImplicitAnimationSet>
-                    <animations:ScaleAnimation Duration="0:0:0.6" />
-                </animations:ImplicitAnimationSet>
-            </Setter.Value>
-        </Setter>-->
         <Setter Property="Template">
             <Setter.Value>
                 <ControlTemplate TargetType="local:HeaderTile">
                     <Grid
                         Padding="0"
                         AutomationProperties.Name="{TemplateBinding Header}"
                         CornerRadius="{TemplateBinding CornerRadius}">
+                        <Grid.Lights>
+                            <local:HoverLight />
+                            <local:AmbLight />
+                        </Grid.Lights>
                         <Image
                             HorizontalAlignment="Stretch"
                             VerticalAlignment="Stretch"
@@ -74,21 +72,18 @@
                                 <animations:OpacityAnimation
                                     From="1.0"
                                     To="0"
-                                    Duration="0:0:0.2" />
+                                    Duration="0:0:0.35" />
                                 <animations:TranslationAnimation
                                     From="0"
                                     To="0,200,0"
                                     Duration="0:0:0.6" />
                             </animations:Implicit.HideAnimations>
                             <TextBlock
-                                FontSize="12"
                                 FontWeight="SemiBold"
                                 Foreground="{ThemeResource TextFillColorPrimaryBrush}"
                                 Text="{TemplateBinding Header}" />
                             <TextBlock
-                                FontSize="10"
                                 Foreground="{ThemeResource TextFillColorSecondaryBrush}"
-                                Style="{StaticResource CaptionTextBlockStyle}"
                                 Text="{TemplateBinding Description}"
                                 TextTrimming="CharacterEllipsis" />
                         </StackPanel>

AIDevGallery/Controls/HomePage/Header/Lights/AmbLight.cs

@@ -0,0 +1,41 @@
+// Copyright (c) Microsoft Corporation. All rights reserved.
+// Licensed under the MIT License.
+
+using Microsoft.UI;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media;
+
+namespace AIDevGallery.Controls;
+
+internal partial class AmbLight : XamlLight
+{
+    private static readonly string Id = typeof(AmbLight).FullName!;
+
+    protected override void OnConnected(UIElement newElement)
+    {
+        Compositor compositor = CompositionTarget.GetCompositorForCurrentThread();
+
+        // Create AmbientLight and set its properties
+        AmbientLight ambientLight = compositor.CreateAmbientLight();
+        ambientLight.Color = Colors.White;
+
+        // Associate CompositionLight with XamlLight
+        CompositionLight = ambientLight;
+
+        // Add UIElement to the Light's Targets
+        AddTargetElement(GetId(), newElement);
+    }
+
+    protected override void OnDisconnected(UIElement oldElement)
+    {
+        // Dispose Light when it is removed from the tree
+        RemoveTargetElement(GetId(), oldElement);
+        CompositionLight.Dispose();
+    }
+
+    protected override string GetId()
+    {
+        return Id;
+    }
+}