DYN-4252-Shadow-Under-Pointer

src/DynamoCoreWpf/UI/Converters.cs

@@ -3294,4 +3294,48 @@ public object ConvertBack(object value, Type targetType, object parameter, Cultu
             throw new NotImplementedException();
         }
     }
+
+    /// <summary>
+    /// Converts a PointColletion to a Geometry so the points can be drawn using a Path
+    /// </summary>
+    [ValueConversion(typeof(PointCollection), typeof(Geometry))]
+    public class PointsToPathConverter : IValueConverter
+    {
+        #region IValueConverter Members
+
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            if (value == null)
+                return null;
+
+            if (value.GetType() != typeof(PointCollection))
+                return null;
+
+            PointCollection points = (value as PointCollection);
+            if (points.Count > 0)
+            {
+                Point start = points[0];
+                List<LineSegment> segments = new List<LineSegment>();
+                for (int i = 1; i < points.Count; i++)
+                {
+                    segments.Add(new LineSegment(points[i], true));
+                }
+                PathFigure figure = new PathFigure(start, segments, false);
+                PathGeometry geometry = new PathGeometry();
+                geometry.Figures.Add(figure);
+                return geometry;
+            }
+            else
+            {
+                return null;
+            }
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+
+        #endregion
+    }
 }

src/DynamoCoreWpf/UI/GuidedTour/Step.cs

@@ -131,6 +131,11 @@ public enum PointerDirection { TOP_RIGHT, TOP_LEFT, BOTTOM_RIGHT, BOTTOM_LEFT, B
         /// </summary>
         public PointCollection TooltipPointerPoints { get; set; }
 
+        /// <summary>
+        /// This will contains the shadow direction in degrees that will be shown in the pointer
+        /// </summary>
+        public double ShadowTooltipDirection { get; set; }
+
         /// <summary>
         /// This property holds the DynamoViewModel that will be used when executing PreValidation functions
         /// </summary>

src/DynamoCoreWpf/UI/GuidedTour/Tooltip.cs

@@ -17,6 +17,7 @@ public class Tooltip : Step
         double PointerTooltipOverlap = 5;
         double PointerVerticalOffset;
         double PointerHorizontalOffset;
+        enum SHADOW_DIRECTION { LEFT = 180, RIGHT = 0, BOTTOM = 270, TOP = 90};
 
         /// <summary>
         /// The Tooltip constructor
@@ -71,6 +72,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = 0;
                 pointY3 = PointerHeight / 2 + PointerVerticalOffset;
+                //Left Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.LEFT;
 
             }
             else if (direction == PointerDirection.BOTTOM_LEFT)
@@ -83,6 +86,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = 0;
                 pointY3 = Height - PointerHeight / 2 - PointerVerticalOffset;
+                //Left Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.LEFT;
             }
             else if (direction == PointerDirection.TOP_RIGHT)
             {
@@ -94,6 +99,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = realWidth;
                 pointY3 = PointerHeight / 2 + PointerVerticalOffset;
+                //Right Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.RIGHT;
 
             }
             else if (direction == PointerDirection.BOTTOM_RIGHT)
@@ -106,6 +113,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = realWidth;
                 pointY3 = Height - PointerHeight / 2 - PointerVerticalOffset;
+                //Right Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.RIGHT;
             }
             else if (direction == PointerDirection.BOTTOM_DOWN)
             {
@@ -117,6 +126,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = PointerDownWidth / 2 + PointerHorizontalOffset;
                 pointY3 = realHeight - PointerHeight;
+                //Bottom Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.BOTTOM;
             }
 
             TooltipPointerPoints = new PointCollection(new[] { new Point(pointX1, pointY1),

src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml

@@ -4075,7 +4075,7 @@
         <Setter Property="Fill" Value="{StaticResource PopupWhiteColor}" />
     </Style>
 
-    <Style x:Key="PoupPolygonPointerStyle" TargetType="{x:Type Polygon}">
+    <Style x:Key="PoupPathPointerStyle" TargetType="{x:Type Path}">
         <Setter Property="Fill" Value="{StaticResource PopupWhiteColor}" />
     </Style>
 

src/DynamoCoreWpf/ViewModels/GuidedTour/PopupWindowViewModel.cs

@@ -41,6 +41,21 @@ public PointCollection TooltipPointerPoints
             }
         }
 
+        /// <summary>
+        /// This will contains the shadow direction in degrees that will be shown in the pointer
+        /// </summary>
+        public double ShadowTooltipDirection
+        { 
+            get
+            {
+                return Step.ShadowTooltipDirection;
+            }
+            set
+            {
+                Step.ShadowTooltipDirection = value;
+            } 
+        }
+
         /// <summary>
         /// Due that some popups doesn't need the pointer then this property hides or show the pointer
         /// </summary>

src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml

@@ -7,6 +7,7 @@
         xmlns:localui="clr-namespace:Dynamo.Wpf.UI.GuidedTour"
         xmlns:ui="clr-namespace:Dynamo.UI"
         xmlns:p="clr-namespace:Dynamo.Wpf.Properties;assembly=DynamoCoreWpf"
+       xmlns:controls="clr-namespace:Dynamo.Controls"
         mc:Ignorable="d"
         PopupAnimation="Fade"
         AllowsTransparency="True"
@@ -23,6 +24,7 @@
                 <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoModernDictionaryUri}" />
             </ResourceDictionary.MergedDictionaries>
             <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
+            <controls:PointsToPathConverter x:Key="PointsToPathConverter"/>
         </ResourceDictionary>
     </Popup.Resources>
 
@@ -61,19 +63,19 @@
             </Path.Effect>
         </Path>
 
-        <!--This Polygon will draw on the Canvas the pointer (a triangle) that will be available only for tooltips but for the Welcome popup will be hidden-->
-        <Polygon x:Name="TooltipPointer"
-                 Visibility="{Binding ShowPopupPointer, Converter={StaticResource BooleanToVisibilityConverter}}"
-                 Points="{Binding TooltipPointerPoints}" 
-                 Style="{StaticResource PoupPolygonPointerStyle}">
-            <Polygon.BitmapEffect>
-                <!--This effect will show a 4px shadow of 20% of tranparency with a angle of 315 grades by default-->
-                <DropShadowBitmapEffect Color="Black" 
-                                        Direction="135" 
-                                        ShadowDepth="4" 
-                                        Opacity="0.2" />
-            </Polygon.BitmapEffect>
-        </Polygon>
+        <!--This Path will draw on the Canvas the pointer (a triangle) that will be available only for tooltips but for the Welcome popup will be hidden-->
+        <Path  x:Name="TooltipPointer"
+               Visibility="{Binding ShowPopupPointer, Converter={StaticResource BooleanToVisibilityConverter}}"
+               Data="{Binding Path=TooltipPointerPoints, Converter={StaticResource PointsToPathConverter}}"
+               Style="{StaticResource PoupPathPointerStyle}">
+            <Path.Effect>
+                <DropShadowEffect Opacity="0.2" 
+                                  Color="Black"
+                                  ShadowDepth="4"
+                                  BlurRadius="4"
+                                  Direction="{Binding Path=ShadowTooltipDirection}"/>
+            </Path.Effect>
+        </Path>
 
         <Grid  x:Name="mainPopupGrid"
                Width="{Binding Width}"