Attached Shadows (Composition and Win2D + Animations)

Microsoft.Toolkit.Uwp.SampleApp/Common/Vector3Converter.cs

@@ -0,0 +1,57 @@
+// Licensed to the .NET Foundation under one or more agreements.
+// The .NET Foundation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Linq;
+using System.Numerics;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Data;
+
+namespace Microsoft.Toolkit.Uwp.SampleApp.Common
+{
+    public class Vector3Converter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, string language)
+        {
+            if (value is string)
+            {
+                return value;
+            }
+
+            var thickness = (Vector3)value;
+
+            return thickness.ToString().TrimStart('<').Replace(" ", string.Empty).TrimEnd('>');
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            if (value is string vectorString)
+            {
+                var vectorTokens = vectorString.Split(',')
+                                                     .Where(tkn => !string.IsNullOrWhiteSpace(tkn))
+                                                     .ToArray();
+                switch (vectorTokens.Length)
+                {
+                    case 1:
+                        var vectorValue = float.Parse(vectorString);
+                        return new Vector3(vectorValue, vectorValue, vectorValue);
+                    case 2:
+                        var xValue = float.Parse(vectorTokens[0]);
+                        var yValue = float.Parse(vectorTokens[1]);
+
+                        return new Vector3(xValue, yValue, 0);
+                    case 3:
+                        return new Vector3(
+                            float.Parse(vectorTokens[0]),
+                            float.Parse(vectorTokens[1]),
+                            float.Parse(vectorTokens[2]));
+                    default:
+                        return default(Vector3);
+                }
+            }
+
+            return value.ToString();
+        }
+    }
+}

Microsoft.Toolkit.Uwp.SampleApp/Controls/PropertyControl.xaml.cs

@@ -179,6 +179,14 @@ private void PropertyControl_OnDataContextChanged(FrameworkElement sender, DataC
                             converter = new ThicknessConverter();
                             break;
 
+                        case PropertyKind.Vector3:
+                            var vectorTextBox = new TextBox { Text = (propertyDict[option.Name] as ValueHolder).Value.ToString() };
+
+                            controlToAdd = vectorTextBox;
+                            dependencyProperty = TextBox.TextProperty;
+                            converter = new Vector3Converter();
+                            break;
+
                         default:
                             var textBox = new TextBox { Text = (propertyDict[option.Name] as ValueHolder).Value.ToString() };
 

Microsoft.Toolkit.Uwp.SampleApp/Microsoft.Toolkit.Uwp.SampleApp.csproj

@@ -315,10 +315,10 @@
     <Content Include="SamplePages\FocusTracker\FocusTracker.png" />
     <Content Include="SamplePages\BladeView\BladeView.png" />
     <Content Include="SamplePages\Carousel\Carousel.png" />
-    <Content Include="SamplePages\DropShadowPanel\DropShadowPanel.png" />
+    <Content Include="SamplePages\Shadows\DropShadowPanel.png" />
     <Content Include="SamplePages\Expander\Expander.png" />
-    <Content Include="SamplePages\DropShadowPanel\Trex.png" />
-    <Content Include="SamplePages\DropShadowPanel\Unicorn.png" />
+    <Content Include="SamplePages\Shadows\Trex.png" />
+    <Content Include="SamplePages\Shadows\Unicorn.png" />
     <Content Include="SamplePages\GazeInteraction\GazeInteraction.png" />
     <Content Include="SamplePages\GazeTracing\GazeTracing.png" />
     <Content Include="SamplePages\GridSplitter\GridSplitter.png" />
@@ -397,7 +397,7 @@
     <Content Include="SamplePages\ImageCache\ImageCacheXaml.bind" />
     <Content Include="SamplePages\Incremental Loading Collection\IncrementalLoadingCollectionCode.bind" />
     <Content Include="SamplePages\ImageCache\ImageCacheCode.bind" />
-    <Content Include="SamplePages\DropShadowPanel\DropShadowPanelXaml.bind" />
+    <Content Include="SamplePages\Shadows\DropShadowPanelXaml.bind" />
     <Content Include="SamplePages\Object Storage\ObjectStorageCode.bind" />
     <Content Include="SamplePages\BackgroundTaskHelper\BackgroundTaskHelperCode.bind" />
     <Content Include="SamplePages\ListDetailsView\ListDetailsView.bind" />
@@ -488,6 +488,7 @@
     <Content Include="SamplePages\DataGrid\DataGridCode.bind" />
     <Content Include="SamplePages\ViewportBehavior\ViewportBehaviorCode.bind" />
     <Compile Include="Common\TextBlockHyperlinkBehavior.cs" />
+    <Compile Include="Common\Vector3Converter.cs" />
     <Compile Include="SamplePages\AutoFocusBehavior\AutoFocusBehaviorPage.xaml.cs">
       <DependentUpon>AutoFocusBehaviorPage.xaml</DependentUpon>
     </Compile>
@@ -506,6 +507,9 @@
     <Compile Include="SamplePages\MetadataControl\MetadataControlPage.xaml.cs">
       <DependentUpon>MetadataControlPage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="SamplePages\Shadows\AttachedDropShadowPage.xaml.cs">
+      <DependentUpon>AttachedDropShadowPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="SamplePages\TilesBrush\TilesBrushPage.xaml.cs">
       <DependentUpon>TilesBrushPage.xaml</DependentUpon>
     </Compile>
@@ -626,6 +630,9 @@
     <Content Include="SamplePages\Primitives\ConstrainedBox.bind">
       <SubType>Designer</SubType>
     </Content>
+    <Content Include="SamplePages\Shadows\AttachedShadowWin2DXaml.bind" />
+    <Content Include="SamplePages\Shadows\AttachedShadowCompositionXaml.bind" />
+    <Content Include="SamplePages\Animations\Shadows\AnimatedCardShadowXaml.bind" />
     <Content Include="SamplePages\KeyDownTriggerBehavior\KeyDownTriggerBehaviorXaml.bind" />
   </ItemGroup>
   <ItemGroup>
@@ -663,7 +670,6 @@
     <Compile Include="SamplePages\UniformGrid\UniformGridPage.xaml.cs">
       <DependentUpon>UniformGridPage.xaml</DependentUpon>
     </Compile>
-    <Compile Include="Models\PropertyDescriptor\ThicknessPropertyOptions.cs" />
     <Compile Include="Models\ThemeChangedArgs.cs" />
     <Compile Include="Pages\SampleController.xaml.cs">
       <DependentUpon>SampleController.xaml</DependentUpon>
@@ -809,9 +815,6 @@
     <Compile Include="SamplePages\DispatcherQueueHelper\DispatcherQueueHelperPage.xaml.cs">
       <DependentUpon>DispatcherQueueHelperPage.xaml</DependentUpon>
     </Compile>
-    <Compile Include="SamplePages\DropShadowPanel\DropShadowPanelPage.xaml.cs">
-      <DependentUpon>DropShadowPanelPage.xaml</DependentUpon>
-    </Compile>
     <Compile Include="SamplePages\Expander\ExpanderPage.xaml.cs">
       <DependentUpon>ExpanderPage.xaml</DependentUpon>
     </Compile>
@@ -986,6 +989,10 @@
     <Content Include="SamplePages\Primitives\SwitchPresenter.bind">
       <SubType>Designer</SubType>
     </Content>
+    <Page Include="SamplePages\Shadows\AttachedDropShadowPage.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="SamplePages\TilesBrush\TilesBrushPage.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -1269,10 +1276,6 @@
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
     </Page>
-    <Page Include="SamplePages\DropShadowPanel\DropShadowPanelPage.xaml">
-      <SubType>Designer</SubType>
-      <Generator>MSBuild:Compile</Generator>
-    </Page>
     <Page Include="SamplePages\GridSplitter\GridSplitterPage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -1541,4 +1544,4 @@
   </Target>
   <!-- No-op to avoid build error when packing solution from commandline -->
   <Target Name="Pack" />
-</Project>
+</Project>

Microsoft.Toolkit.Uwp.SampleApp/Models/PropertyDescriptor/PropertyKind.cs

@@ -13,6 +13,7 @@ public enum PropertyKind
         Bool,
         Brush,
         TimeSpan,
-        Thickness
+        Thickness,
+        Vector3,
     }
 }

Microsoft.Toolkit.Uwp.SampleApp/Models/Sample.cs

@@ -418,8 +418,12 @@ public string UpdatedXamlCode
                 {
                     if (proxy[option.Name] is ValueHolder value)
                     {
-                        var newString = value.Value is Windows.UI.Xaml.Media.SolidColorBrush brush ?
-                                            brush.Color.ToString() : value.Value.ToString();
+                        var newString = value.Value switch
+                        {
+                            Windows.UI.Xaml.Media.SolidColorBrush brush => brush.Color.ToString(),
+                            System.Numerics.Vector3 vector => vector.ToString().TrimStart('<').Replace(" ", string.Empty).TrimEnd('>'),
+                            _ => value.Value.ToString()
+                        };
 
                         result = result.Replace(option.OriginalString, newString);
                         result = result.Replace("@[" + option.Label + "]@", newString);
@@ -630,12 +634,27 @@ public async Task PreparePropertyDescriptorAsync()
                                 case PropertyKind.Thickness:
                                     try
                                     {
-                                        var thicknessOptions = new ThicknessPropertyOptions { DefaultValue = value };
+                                        var thicknessOptions = new PropertyOptions { DefaultValue = value };
                                         options = thicknessOptions;
                                     }
                                     catch (Exception ex)
                                     {
-                                        Debug.WriteLine($"Unable to extract slider info from {value}({ex.Message})");
+                                        Debug.WriteLine($"Unable to extract thickness info from {value}({ex.Message})");
+                                        TrackingManager.TrackException(ex);
+                                        continue;
+                                    }
+
+                                    break;
+
+                                case PropertyKind.Vector3:
+                                    try
+                                    {
+                                        var vector3Options = new PropertyOptions { DefaultValue = value };
+                                        options = vector3Options;
+                                    }
+                                    catch (Exception ex)
+                                    {
+                                        Debug.WriteLine($"Unable to extract vector3 info from {value}({ex.Message})");
                                         TrackingManager.TrackException(ex);
                                         continue;
                                     }

Microsoft.Toolkit.Uwp.SampleApp/Models/Samples.cs

@@ -60,7 +60,8 @@ public static async Task<List<SampleCategory>> GetCategoriesAsync()
                 {
                     allCategories = await JsonSerializer.DeserializeAsync<List<SampleCategory>>(jsonStream.AsStream(), new JsonSerializerOptions
                     {
-                        ReadCommentHandling = JsonCommentHandling.Skip
+                        ReadCommentHandling = JsonCommentHandling.Skip,
+                        AllowTrailingCommas = true,
                     });
                 }
 

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Effects/FadeBehaviorXaml.bind

@@ -7,7 +7,6 @@
     xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
     xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
     xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
-    xmlns:core="using:Microsoft.Xaml.Interactions.Core"
     mc:Ignorable="d">
 
   <Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Animations/Shadows/AnimatedCardShadowXaml.bind

@@ -0,0 +1,75 @@
+<Page
+  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+  xmlns:ui="using:Microsoft.Toolkit.Uwp.UI"
+  xmlns:media="using:Microsoft.Toolkit.Uwp.UI.Media"
+  xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
+  xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
+  xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
+  xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
+  mc:Ignorable="d">
+
+  <Page.Resources>
+    <media:AttachedCardShadow x:Key="CommonShadow" Offset="4" CornerRadius="0"/>
+
+    <ani:AnimationSet x:Key="ShadowEnterAnimation">
+      <ani:OffsetDropShadowAnimation To="12"/>
+    </ani:AnimationSet>
+
+    <ani:AnimationSet x:Key="ShadowExitAnimation">
+      <ani:OffsetDropShadowAnimation To="4"/>
+    </ani:AnimationSet>
+
+    <ani:AnimationSet x:Key="ShadowPopAnimation" IsSequential="True">
+      <ani:TranslationAnimation To="-8" Duration="0:0:1"/>
+      <ani:OffsetDropShadowAnimation To="16" Duration="0:0:2" Target="{StaticResource CommonShadow}"/>
+      <ani:OffsetDropShadowAnimation To="4" Delay="0:0:0.5" Duration="0:0:2" Target="{StaticResource CommonShadow}"/>
+      <ani:TranslationAnimation To="0" Duration="0:0:1"/>
+    </ani:AnimationSet>
+  </Page.Resources>
+
+  <Grid>
+    <Grid.RowDefinitions>
+      <RowDefinition/>
+      <RowDefinition/>
+    </Grid.RowDefinitions>
+    <Grid.ColumnDefinitions>
+      <ColumnDefinition/>
+      <ColumnDefinition/>
+    </Grid.ColumnDefinitions>
+    <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
+           Height="100" Width="100"
+           Source="ms-appx:///Assets/Photos/Owl.jpg">
+      <interactivity:Interaction.Behaviors>
+        <interactions:EventTriggerBehavior EventName="PointerEntered">
+          <behaviors:StartAnimationAction Animation="{StaticResource ShadowEnterAnimation}"/>
+        </interactions:EventTriggerBehavior>
+        <interactions:EventTriggerBehavior EventName="PointerExited">
+          <behaviors:StartAnimationAction Animation="{StaticResource ShadowExitAnimation}"/>
+        </interactions:EventTriggerBehavior>
+      </interactivity:Interaction.Behaviors>
+    </Image>
+    <Image ui:Effects.Shadow="{StaticResource CommonShadow}"
+           Height="100" Width="100"
+           Grid.Column="1"
+           Source="ms-appx:///Assets/Photos/Owl.jpg">
+      <interactivity:Interaction.Behaviors>
+        <interactions:EventTriggerBehavior EventName="PointerEntered">
+          <behaviors:StartAnimationAction Animation="{StaticResource ShadowEnterAnimation}"/>
+        </interactions:EventTriggerBehavior>
+        <interactions:EventTriggerBehavior EventName="PointerExited">
+          <behaviors:StartAnimationAction Animation="{StaticResource ShadowExitAnimation}"/>
+        </interactions:EventTriggerBehavior>
+      </interactivity:Interaction.Behaviors>
+    </Image>
+    <Button Grid.Row="1" Grid.ColumnSpan="2" HorizontalAlignment="Center" VerticalAlignment="Top" Content="Click Me">
+      <interactivity:Interaction.Behaviors>
+        <interactions:EventTriggerBehavior EventName="Click">
+          <behaviors:StartAnimationAction Animation="{StaticResource ShadowPopAnimation}"/>
+        </interactions:EventTriggerBehavior>
+      </interactivity:Interaction.Behaviors>
+    </Button>
+  </Grid>
+</Page>

Microsoft.Toolkit.Uwp.SampleApp/SamplePages/Shadows/AttachedDropShadowPage.xaml

@@ -0,0 +1,9 @@
+<Page x:Class="Microsoft.Toolkit.Uwp.SampleApp.SamplePages.AttachedDropShadowPage"
+      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+      mc:Ignorable="d">
+
+    <!--  Shallow Copy in XamlOnlyPage  -->
+</Page>