Implement Shadows in Android and iOS

Author: jsuarezruiz

src/Controls/samples/Controls.Sample/Pages/MainPage.cs

@@ -239,7 +239,7 @@ void SetupMauiLayout()
 			verticalStack.Add(new Entry { Placeholder = "This is a blue text box", BackgroundColor = Colors.CornflowerBlue });
 
 			verticalStack.Add(new GraphicsView { Drawable = new TestDrawable(), HeightRequest = 50, WidthRequest = 200 }); ;
-			
+
 			verticalStack.Add(new ProgressBar { Progress = 0.5 });
 			verticalStack.Add(new ProgressBar { Progress = 0.5, BackgroundColor = Colors.LightCoral });
 			verticalStack.Add(new ProgressBar { Progress = 0.5, ProgressColor = Colors.Purple });
@@ -307,6 +307,29 @@ void SetupMauiLayout()
 				ClipShape = new Microsoft.Maui.Controls.Shapes2.Ellipse()
 			});
 
+			verticalStack.Add(new Label { Text = "Shadow" });
+			verticalStack.Add(new Image
+			{
+				HeightRequest = 120,
+				WidthRequest = 120,
+				Source = new FontImageSource { FontFamily = "Ionicons", Glyph = "\uf2fe" },
+				BackgroundColor = Color.FromUint(0xFF512BD4),
+				Aspect = Aspect.Center,
+				Shadow = new Shadow { Offset = new Size(10, 10), Opacity = 0.9f, Color = Colors.Purple, Radius = 6 }
+			});
+
+			verticalStack.Add(new Label { Text = "Shadow + ClipShape" });
+			verticalStack.Add(new Image
+			{
+				HeightRequest = 120,
+				WidthRequest = 120,
+				Source = new FontImageSource { FontFamily = "Ionicons", Glyph = "\uf2fe" },
+				BackgroundColor = Color.FromUint(0xFF512BD4),
+				Aspect = Aspect.Center,
+				ClipShape = new Microsoft.Maui.Controls.Shapes2.Ellipse(),
+				Shadow = new Shadow { Offset = new Size(10, 10), Opacity = 0.9f, Color = Colors.Purple, Radius = 6 }
+			});
+
 			Content = new ScrollView
 			{
 				Content = verticalStack

src/Controls/src/Core/HandlerImpl/VisualElement.Impl.cs

@@ -36,6 +36,8 @@ Paint IFrameworkElement.Background
 
 		public IShape ClipShape { get; set; }
 
+		public Shadow Shadow { get; set; }
+
 		protected override void OnPropertyChanged([CallerMemberName] string propertyName = null)
 		{
 			base.OnPropertyChanged(propertyName);

src/Core/src/Core/IFrameworkElement.cs

@@ -39,6 +39,11 @@ public interface IFrameworkElement : ITransform
 		/// </summary>
 		IShape? ClipShape { get; }
 
+		/// <summary>
+		/// Paints a shadow around the target View.
+		/// </summary>
+		Shadow Shadow { get; set; }
+
 		/// <summary>
 		/// Gets a value indicating whether this FrameworkElement is enabled in the user interface. 
 		/// </summary>

src/Core/src/Handlers/View/ViewHandler.cs

@@ -19,6 +19,7 @@ public abstract partial class ViewHandler : IViewHandler
 		{
 			[nameof(IView.AutomationId)] = MapAutomationId,
 			[nameof(IView.ClipShape)] = MapClipShape,
+			[nameof(IView.Shadow)] = MapShadow,
 			[nameof(IView.Visibility)] = MapVisibility,
 			[nameof(IView.Background)] = MapBackground,
 			[nameof(IView.Width)] = MapWidth,
@@ -168,6 +169,26 @@ public static void MapClipShape(IViewHandler handler, IView view)
 			((WrapperView?)handler.ContainerView)?.UpdateClipShape(view);
 #endif
 		}
+		
+		public static void MapShadow(IViewHandler handler, IView view)
+		{
+			var shadow = view.Shadow;
+#if WINDOWS
+			((NativeView?)handler.ContainerView)?.UpdateShadow(view);
+#else
+			if (!shadow.IsEmpty)
+			{
+				handler.HasContainer = true;
+			}
+			else
+			{
+				if (handler is ViewHandler viewHandler)
+					handler.HasContainer = viewHandler.NeedsContainer;
+			}
+
+			((NativeView?)handler.ContainerView)?.UpdateShadow(view);
+#endif
+		}
 
 		static partial void MappingSemantics(ViewHandler handler, IView view);
 

src/Core/src/Platform/Android/NativeVersion.cs

@@ -29,5 +29,6 @@ public static class NativeApis
 		public const int PowerSaveMode = 21;
 		public const int BlendModeColorFilter = 29;
 		public const int SeekBarSetMin = 26;
+		public const int OutlineAmbientShadowColor = 28;
 	}
 }

src/Core/src/Platform/Android/ShadowExtensions.cs

@@ -0,0 +1,54 @@
+using Android.Graphics;
+using Android.Views;
+using Android.Widget;
+using AndroidX.Core.Graphics;
+using AView = Android.Views.View;
+
+namespace Microsoft.Maui
+{
+	public static class ShadowExtensions
+    {
+        public static void SetShadow(this AView nativeView, Shadow shadow)
+        {
+            if (shadow.IsEmpty)
+                return;
+
+            var radius = shadow.Radius;
+
+            if (radius < 0)
+                return;
+
+            var opacity = shadow.Opacity;
+
+            if (opacity < 0)
+                return;
+
+            var color = shadow.Color.ToNative();
+            var alphaColor = new Color(ColorUtils.SetAlphaComponent(color, (int)opacity * 255));
+
+            if (nativeView is TextView textView)
+            {
+                var offsetX = (float)shadow.Offset.Width;
+                var offsetY = (float)shadow.Offset.Height;
+                textView.SetShadowLayer(radius, offsetX, offsetY, alphaColor);
+                return;
+            }
+
+            nativeView.OutlineProvider = ViewOutlineProvider.PaddedBounds;
+
+            if (nativeView.Context != null)
+                nativeView.Elevation = nativeView.Context.ToPixels(radius);
+
+            if (!NativeVersion.Supports(NativeApis.OutlineAmbientShadowColor))
+                return;
+
+            nativeView.SetOutlineAmbientShadowColor(alphaColor);
+            nativeView.SetOutlineSpotShadowColor(alphaColor);
+        }
+
+        public static void ClearShadow(this AView nativeView)
+        {
+            nativeView.OutlineProvider = null;
+        }
+    }
+}

src/Core/src/Platform/Android/ViewExtensions.cs

@@ -26,6 +26,26 @@ public static void UpdateClipShape(this WrapperView nativeView, IView view)
 			nativeView.ClipShape = view.ClipShape;
 		}
 
+		public static void UpdateShadow(this AView nativeView, IView view)
+		{
+			var shadow = view.Shadow;
+			var clipShape = view.ClipShape;
+
+			// If there is a clip shape, then the shadow should be applied to the clip layer, not the view layer
+			if (clipShape == null)
+			{
+				if (shadow.IsEmpty)
+					nativeView.ClearShadow();
+				else
+					nativeView.SetShadow(shadow);
+			}
+			else
+			{
+				if (nativeView is WrapperView wrapperView)
+					wrapperView.Shadow = view.Shadow;
+			}
+		}
+
 		public static ViewStates ToNativeVisibility(this Visibility visibility)
 		{
 			return visibility switch

src/Core/src/Platform/Android/WrapperView.cs

@@ -62,5 +62,16 @@ protected override void DispatchDraw(Canvas? canvas)
 
 			base.DispatchDraw(canvas);
 		}
+
+		partial void ShadowChanged()
+		{
+			if (Shadow == null)
+				return;
+
+			if (Shadow.Value.IsEmpty)
+				this.ClearShadow();
+			else
+				this.SetShadow(Shadow.Value);
+		}
 	}
 }

src/Core/src/Platform/Standard/ViewExtensions.cs

@@ -12,6 +12,8 @@ public static void UpdateAutomationId(this object nativeView, IView view) { }
 
 		public static void UpdateClipShape(this object nativeView, IView view) { }
 
+		public static void UpdateShadow(this object nativeView, IView view) { }
+
 		public static void UpdateOpacity(this object nativeView, IView view) { }
 
 		public static void UpdateSemantics(this object nativeView, IView view) { }

src/Core/src/Platform/Windows/ShadowExtensions.cs

@@ -0,0 +1,7 @@
+namespace Microsoft.Maui
+{
+	public static class ShadowExtensions
+	{
+
+	}
+}