Change the display method of Popup Overlay on Windows (#1485)

* Change the display method of Windows Popup Overlay * Invert overlay colors * Change popup overlay color * Change the transparency of Popup overlay * Update src/CommunityToolkit.Maui.Core/Views/Popup/PopupOverlay.windows.cs Co-authored-by: Vladislav Antonyuk <[email protected]> * Add Null Check, Create `AddOverlayToWindow` * Update src/CommunityToolkit.Maui.Core/Handlers/Popup/PopUpHandler.windows.cs * Update src/CommunityToolkit.Maui.Core/Views/Popup/PopupOverlay.windows.cs * Update formatting --------- Co-authored-by: Vladislav Antonyuk <[email protected]> Co-authored-by: Brandon Minnick <[email protected]>
CommunityToolkit · Nov 2, 2023 · 40a3e38 · 40a3e38
1 parent 5a4f7ea
commit 40a3e38
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/src/CommunityToolkit.Maui.Core/Handlers/Popup/PopUpHandler.windows.cs b/src/CommunityToolkit.Maui.Core/Handlers/Popup/PopUpHandler.windows.cs
@@ -1,9 +1,11 @@
-using CommunityToolkit.Maui.Core.Views;
+using CommunityToolkit.Maui.Core.Extensions;
+using CommunityToolkit.Maui.Core.Views;
 using Microsoft.Maui.Handlers;
 using Microsoft.Maui.Platform;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
 using Microsoft.UI.Xaml.Controls.Primitives;
+using Windows.UI.ViewManagement;
 
 namespace CommunityToolkit.Maui.Core.Handlers;
 
@@ -17,6 +19,12 @@ public partial class PopupHandler : ElementHandler<IPopup, Popup>
 	/// <param name="result">The result that should return from this Popup.</param>
 	public static void MapOnClosed(PopupHandler handler, IPopup view, object? result)
 	{
+		var window = view.GetWindow();
+		if (window.Overlays.FirstOrDefault() is IWindowOverlay popupOverlay)
+		{
+			window.RemoveOverlay(popupOverlay);
+		}
+
 		view.HandlerCompleteTCS.TrySetResult();
 		handler.DisconnectHandler(handler.PlatformView);
 	}
@@ -31,14 +39,20 @@ public static void MapOnOpened(PopupHandler handler, IPopup view, object? result
 	{
 		ArgumentNullException.ThrowIfNull(view.Parent);
 		ArgumentNullException.ThrowIfNull(handler.MauiContext);
+
 		var parent = view.Parent.ToPlatform(handler.MauiContext);
+
 		parent.IsHitTestVisible = false;
 		handler.PlatformView.XamlRoot = parent.XamlRoot;
 		handler.PlatformView.IsHitTestVisible = true;
 		handler.PlatformView.IsOpen = true;
+
+		AddOverlayToWindow(view.GetWindow());
+
 		view.OnOpened();
 	}
 
+
 	/// <summary>
 	/// Action that's triggered when the Popup is dismissed by tapping outside of the Popup.
 	/// </summary>
@@ -69,7 +83,7 @@ public static void MapAnchor(PopupHandler handler, IPopup view)
 	public static void MapCanBeDismissedByTappingOutsideOfPopup(PopupHandler handler, IPopup view)
 	{
 		handler.PlatformView.IsLightDismissEnabled = view.CanBeDismissedByTappingOutsideOfPopup;
-		handler.PlatformView.LightDismissOverlayMode = view.CanBeDismissedByTappingOutsideOfPopup ? LightDismissOverlayMode.On : LightDismissOverlayMode.Off;
+		handler.PlatformView.LightDismissOverlayMode = LightDismissOverlayMode.Off;
 	}
 
 	/// <summary>
@@ -130,6 +144,15 @@ protected override void ConnectHandler(Popup platformView)
 		base.ConnectHandler(platformView);
 	}
 
+	static void AddOverlayToWindow(IWindow window)
+	{
+		var uiSetting = new UISettings();
+		var backgroundColor = uiSetting.GetColorValue(UIColorType.Background).ToColor();
+		window.AddOverlay(new PopupOverlay(window, backgroundColor.IsDark()
+													? Color.FromRgba(0, 0, 0, 153)
+													: Color.FromRgba(255, 255, 255, 153))); // 60% Opacity
+	}
+
 	void OnClosed(object? sender, object e)
 	{
 		if (!PlatformView.IsOpen && VirtualView.CanBeDismissedByTappingOutsideOfPopup)

diff --git a/src/CommunityToolkit.Maui.Core/Views/Popup/PopupOverlay.windows.cs b/src/CommunityToolkit.Maui.Core/Views/Popup/PopupOverlay.windows.cs
@@ -0,0 +1,52 @@
+namespace CommunityToolkit.Maui.Core.Views;
+
+/// <summary>
+/// Displays Overlay in the Popup background.
+/// </summary>
+class PopupOverlay : WindowOverlay
+{
+	readonly IWindowOverlayElement popupOverlayElement;
+
+	/// <summary>
+	/// Instantiates a new instance of <see cref="PopupOverlay"/>.
+	/// </summary>
+	/// <param name="window">An instance of <see cref="IWindow"/>.</param>
+	/// <param name="overlayColor">Popup overlay color</param>
+	public PopupOverlay(IWindow window, Color? overlayColor = null) : base(window)
+	{
+		popupOverlayElement = new PopupOverlayElement(this, overlayColor);
+
+		AddWindowElement(popupOverlayElement);
+
+		EnableDrawableTouchHandling = true;
+	}
+
+	class PopupOverlayElement : IWindowOverlayElement
+	{
+		readonly IWindowOverlay overlay;
+		readonly Color overlayColor = Color.FromRgba(255, 255, 255, 153); // 60% Opacity 
+
+		RectF overlayRect = new();
+
+		public PopupOverlayElement(IWindowOverlay overlay, Color? overlayColor = null)
+		{
+			this.overlay = overlay;
+			if (overlayColor is not null)
+			{
+				this.overlayColor = overlayColor;
+			}
+		}
+
+		public bool Contains(Point point)
+		{
+			return overlayRect.Contains(new Point(point.X / overlay.Density, point.Y / overlay.Density));
+		}
+
+		public void Draw(ICanvas canvas, RectF dirtyRect)
+		{
+			overlayRect = dirtyRect;
+			canvas.FillColor = overlayColor;
+			canvas.FillRectangle(dirtyRect.X, dirtyRect.Y, dirtyRect.Width, dirtyRect.Height);
+		}
+	}
+}