Lights

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/ActionBar.xaml

@@ -45,6 +45,14 @@
     </UserControl.Resources>
 
     <Grid Padding="8" ColumnSpacing="8">
+        <Grid.Background>
+            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
+                <!--  Inner core  -->
+                <GradientStop Offset="0" Color="#40ff6600" />
+                <!--  Outer fade  -->
+                <GradientStop Offset="1" Color="#00ff6600" />
+            </LinearGradientBrush>
+        </Grid.Background>
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="Auto" />
             <ColumnDefinition Width="Auto" />
@@ -56,7 +64,9 @@
             Width="20"
             Height="20"
             Margin="12,0,0,0"
-            Background="{ThemeResource AccentFillColorDefaultBrush}"
+            Background="#ff6600"
+            BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+            BorderThickness="1"
             CornerRadius="{StaticResource ControlCornerRadius}" />
 
         <TextBlock

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Lights/AmbLight.cs

@@ -0,0 +1,39 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media;
+
+namespace Microsoft.CmdPal.UI.Controls;
+
+internal sealed partial class AmbLight : XamlLight
+{
+    private static readonly string Id = typeof(AmbLight).FullName!;
+
+    protected override void OnConnected(UIElement newElement)
+    {
+        var compositor = CompositionTarget.GetCompositorForCurrentThread();
+
+        // Create AmbientLight and set its properties
+        var 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() => Id;
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/Controls/Lights/HoverLight.cs

@@ -0,0 +1,104 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System.Numerics;
+using Microsoft.UI;
+using Microsoft.UI.Composition;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Hosting;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+
+namespace Microsoft.CmdPal.UI.Controls;
+
+internal sealed partial class HoverLight : XamlLight
+{
+    private ExpressionAnimation? _lightPositionExpression;
+    private Vector3KeyFrameAnimation? _offsetAnimation;
+    private static readonly string Id = typeof(HoverLight).FullName!;
+
+    protected override void OnConnected(UIElement targetElement)
+    {
+        var compositor = CompositionTarget.GetCompositorForCurrentThread();
+
+        // Create SpotLight and set its properties
+        var spotLight = compositor.CreateSpotLight();
+        spotLight.InnerConeAngleInDegrees = 50f;
+        spotLight.InnerConeColor = Colors.FloralWhite;
+        spotLight.OuterConeColor = Colors.FloralWhite;
+        spotLight.OuterConeAngleInDegrees = 20f;
+        spotLight.ConstantAttenuation = 1f;
+        spotLight.LinearAttenuation = 0.253f;
+        spotLight.QuadraticAttenuation = 0.58f;
+
+        // Associate CompositionLight with XamlLight
+        CompositionLight = spotLight;
+
+        // Define resting position Animation
+        Vector3 restingPosition = new(200, 200, 400);
+        var cbEasing = compositor.CreateCubicBezierEasingFunction(new Vector2(0.3f, 0.7f), new Vector2(0.9f, 0.5f));
+        _offsetAnimation = compositor.CreateVector3KeyFrameAnimation();
+        _offsetAnimation.InsertKeyFrame(1, restingPosition, cbEasing);
+        _offsetAnimation.Duration = TimeSpan.FromSeconds(0.5f);
+
+        spotLight.Offset = restingPosition;
+
+        // Define expression animation that relates light's offset to pointer position
+        var hoverPosition = ElementCompositionPreview.GetPointerPositionPropertySet(targetElement);
+        _lightPositionExpression = compositor.CreateExpressionAnimation("Vector3(hover.Position.X, hover.Position.Y, height)");
+        _lightPositionExpression.SetReferenceParameter("hover", hoverPosition);
+        _lightPositionExpression.SetScalarParameter("height", 100.0f);
+
+        // Configure pointer entered/ exited events
+        targetElement.PointerMoved += TargetElement_PointerMoved;
+        targetElement.PointerExited += TargetElement_PointerExited;
+
+        // Add UIElement to the Light's Targets
+        AddTargetElement(GetId(), targetElement);
+    }
+
+    private void MoveToRestingPosition() =>
+
+        // Start animation on SpotLight's Offset
+        CompositionLight?.StartAnimation("Offset", _offsetAnimation);
+
+    private void TargetElement_PointerMoved(object sender, PointerRoutedEventArgs e)
+    {
+        if (CompositionLight != null)
+        {
+            // touch input is still UI thread-bound as of the Creator's Update
+            if (e.Pointer.PointerDeviceType == Microsoft.UI.Input.PointerDeviceType.Touch)
+            {
+                var offset = e.GetCurrentPoint((UIElement)sender).Position.ToVector2();
+
+                if (CompositionLight is SpotLight light)
+                {
+                    light.Offset = new Vector3(offset.X, offset.Y, 15);
+                }
+            }
+            else
+            {
+                // Get the pointer's current position from the property and bind the SpotLight's X-Y Offset
+                CompositionLight.StartAnimation("Offset", _lightPositionExpression);
+            }
+        }
+    }
+
+    private void TargetElement_PointerExited(object sender, PointerRoutedEventArgs e) =>
+
+        // Move to resting state when pointer leaves targeted UIElement
+        MoveToRestingPosition();
+
+    protected override void OnDisconnected(UIElement oldElement)
+    {
+        // Dispose Light and Composition resources when it is removed from the tree
+        RemoveTargetElement(GetId(), oldElement);
+        CompositionLight.Dispose();
+
+        _lightPositionExpression?.Dispose();
+        _offsetAnimation?.Dispose();
+    }
+
+    protected override string GetId() => Id;
+}

src/modules/cmdpal/Microsoft.CmdPal.UI/ShellPage.xaml

@@ -11,6 +11,7 @@
     mc:Ignorable="d">
 
     <Grid>
+
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
@@ -28,9 +29,15 @@
             BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
             BorderThickness="0,1,0,1">
             <Frame Name="RootFrame" IsNavigationStackEnabled="True" />
+
         </Grid>
 
 
-        <controls:ActionBar Grid.Row="2" VerticalAlignment="Top" />
+        <controls:ActionBar Grid.Row="2" VerticalAlignment="Top">
+            <controls:ActionBar.Lights>
+                <controls:HoverLight />
+                <controls:AmbLight />
+            </controls:ActionBar.Lights>
+        </controls:ActionBar>
     </Grid>
 </Page>