feat(nativeelementhosting): Z-order support

src/SamplesApp/UITests.Shared/UITests.Shared.projitems

@@ -1819,6 +1819,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\ContentPresenter\ContentPresenter_NativeEmbedding_ZIndex.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\ContentPresenter\ContentPresenter_NativeEmbedding_Android_FillType.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -9812,6 +9816,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\ContentPresenter\ContentPresenter_NativeEmbedding.xaml.cs">
       <DependentUpon>ContentPresenter_NativeEmbedding.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\ContentPresenter\ContentPresenter_NativeEmbedding_ZIndex.xaml.cs">
+      <DependentUpon>ContentPresenter_NativeEmbedding_ZIndex.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Windows_UI_Xaml_Controls\ContentPresenter\ContentPresenter_NativeEmbedding_Android_FillType.xaml.cs">
       <DependentUpon>ContentPresenter_NativeEmbedding_Android_FillType.xaml</DependentUpon>
     </Compile>
@@ -10158,4 +10165,4 @@
     </Compile>
   </ItemGroup>
   <Import Project="ItemExclusions.props" />
-</Project>
+</Project>

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ContentPresenter/ContentPresenter_NativeEmbedding_ZIndex.xaml

@@ -0,0 +1,49 @@
+<UserControl x:Class="Uno.UI.Samples.Content.UITests.ContentPresenter.ContentPresenter_NativeEmbedding_ZIndex"
+			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+			 xmlns:local="using:Uno.UI.Samples.Content.UITests.ContentPresenter"
+			 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+			 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+			 xmlns:not_skia="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+			 xmlns:skia="http://uno.ui/skia"
+			 mc:Ignorable="d skia"
+			 d:DesignHeight="300"
+			 d:DesignWidth="400">
+
+	<UserControl.Resources>
+		<local:StateToVisibilityConverter x:Key="StateToVisibilityConverter" />
+		<local:StateToZIndexConverter x:Key="ZIndexConverter0" Modulus="3" Remainder="0" />
+		<local:StateToZIndexConverter x:Key="ZIndexConverter1" Modulus="3" Remainder="1" />
+		<local:StateToZIndexConverter x:Key="ZIndexConverter2" Modulus="3" Remainder="2" />
+	</UserControl.Resources>
+	<ScrollViewer  x:Name="sv">
+		<skia:StackPanel>
+			<TextBlock Text="Sample 1: Bottom right webview should go in and out of view but should always remain on top" />
+			<Grid Width="300" Height="300">
+				<WebView2 Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Source="https://platform.uno" />
+				<WebView2 Visibility="{Binding State, Converter={StaticResource StateToVisibilityConverter}}" Width="200" Height="200" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="https://google.com" />
+			</Grid>
+			<TextBlock Text="Sample 2: Top left webview should go in and out of view but should always remain at the back" />
+			<Grid Width="300" Height="300">
+				<WebView2 Visibility="{Binding State, Converter={StaticResource StateToVisibilityConverter}}" Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Source="https://platform.uno" />
+				<WebView2 Width="200" Height="200" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="https://google.com" />
+			</Grid>
+			<TextBlock Text="Sample 3: Top left webview should go in and out of view but should always remain on top" />
+			<Grid Width="300" Height="300">
+				<WebView2 Canvas.ZIndex="1" Visibility="{Binding State, Converter={StaticResource StateToVisibilityConverter}}" Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Source="https://platform.uno" />
+				<WebView2 Canvas.ZIndex="0" Width="200" Height="200" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="https://google.com" />
+			</Grid>
+			<TextBlock Text="Sample 4: Bottom right webview should go in and out of view but should always remain at the back" />
+			<Grid Width="300" Height="300">
+				<WebView2 Canvas.ZIndex="1" Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Source="https://platform.uno" />
+				<WebView2 Canvas.ZIndex="0" Visibility="{Binding State, Converter={StaticResource StateToVisibilityConverter}}" Width="200" Height="200" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="https://google.com" />
+			</Grid>
+			<TextBlock Text="Sample 5: The ZIndex should cycle, meaning the top left webview should be on top, then the one in the middle, and then the bottom right one, in a loop/" />
+			<Grid Width="400" Height="400">
+				<WebView2 Canvas.ZIndex="{Binding State, Converter={StaticResource ZIndexConverter0}}" Width="200" Height="200" HorizontalAlignment="Left" VerticalAlignment="Top" Source="https://platform.uno" />
+				<WebView2 Canvas.ZIndex="{Binding State, Converter={StaticResource ZIndexConverter1}}" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center" Source="https://microsoft.com" />
+				<WebView2 Canvas.ZIndex="{Binding State, Converter={StaticResource ZIndexConverter2}}" Width="200" Height="200" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="https://google.com" />
+			</Grid>
+		</skia:StackPanel>
+	</ScrollViewer>
+</UserControl>

src/SamplesApp/UITests.Shared/Windows_UI_Xaml_Controls/ContentPresenter/ContentPresenter_NativeEmbedding_ZIndex.xaml.cs

@@ -0,0 +1,72 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+using System.Runtime.CompilerServices;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml;
+using Windows.UI.Core;
+using Microsoft.UI.Xaml.Data;
+using Uno.UI.Samples.Controls;
+
+namespace Uno.UI.Samples.Content.UITests.ContentPresenter
+{
+	[Sample("ContentPresenter", IsManualTest = true)]
+	public sealed partial class ContentPresenter_NativeEmbedding_ZIndex : UserControl
+	{
+		public ContentPresenter_NativeEmbedding_ZIndex()
+		{
+			this.InitializeComponent();
+			var state = new ToggleableState();
+			sv.DataContext = state;
+			var timer = new DispatcherTimer();
+			timer.Interval = TimeSpan.FromSeconds(1);
+			timer.Tick += (s, e) =>
+			{
+				state.State++;
+			};
+			timer.Start();
+		}
+	}
+
+	public class ToggleableState : INotifyPropertyChanged
+	{
+		public event PropertyChangedEventHandler PropertyChanged;
+
+		protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
+		{
+			PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+		}
+
+		protected bool SetField<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
+		{
+			if (EqualityComparer<T>.Default.Equals(field, value)) return false;
+			field = value;
+			OnPropertyChanged(propertyName);
+			return true;
+		}
+
+		private int _state;
+		public int State { get => _state; set => SetField(ref _state, value); }
+	}
+
+	public class StateToVisibilityConverter : IValueConverter
+	{
+		public object Convert(object value, Type targetType, object parameter, string language)
+			=> ((int)value) % 2 == 0 ? Visibility.Visible : Visibility.Collapsed;
+
+		public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
+	}
+
+	public class StateToZIndexConverter : IValueConverter
+	{
+		private int _lastRet;
+		public int Modulus { get; set; }
+		public int Remainder { get; set; }
+		public object Convert(object value, Type targetType, object parameter, string language)
+		{
+			return ((int)value) % Modulus == Remainder ? _lastRet = ((int)value) : _lastRet;
+		}
+
+		public object ConvertBack(object value, Type targetType, object parameter, string language) => throw new NotImplementedException();
+	}
+}

src/Uno.UI.Composition/Composition/Visual.skia.cs

@@ -9,6 +9,7 @@
 using System.Numerics;
 using System.Runtime.CompilerServices;
 using System.Text;
+using Windows.Foundation;
 using Microsoft.CodeAnalysis.PooledObjects;
 using SkiaSharp;
 using Uno.Disposables;
@@ -481,7 +482,7 @@ static void RenderChildrenStep(Visual visual, PaintingSession session, bool appl
 		}
 	}
 
-	internal void GetNativeViewPath(SKPath clipFromParent, SKPath outPath)
+	internal void GetNativeViewPathAndZOrder(SKPath clipFromParent, SKPath outPath, List<Visual> nativeVisualsInZOrder)
 	{
 		if (this is { Opacity: 0 } or { IsVisible: false } || clipFromParent.IsEmpty)
 		{
@@ -508,14 +509,19 @@ internal void GetNativeViewPath(SKPath clipFromParent, SKPath outPath)
 			outPath.Op(localClipCombinedByClipFromParent, IsNativeHostVisual ? SKPathOp.Union : SKPathOp.Difference, outPath);
 		}
 
+		if (IsNativeHostVisual && !localClipCombinedByClipFromParent.IsEmpty)
+		{
+			nativeVisualsInZOrder.Add(this);
+		}
+
 		if (GetPostPaintingClipping() is { } postClip)
 		{
 			postClip.Transform(TotalMatrix.ToSKMatrix(), postClip);
 			localClipCombinedByClipFromParent.Op(postClip, SKPathOp.Intersect, localClipCombinedByClipFromParent);
 		}
 		foreach (var child in GetChildrenInRenderOrder())
 		{
-			child.GetNativeViewPath(localClipCombinedByClipFromParent, outPath);
+			child.GetNativeViewPathAndZOrder(localClipCombinedByClipFromParent, outPath, nativeVisualsInZOrder);
 		}
 	}
 

src/Uno.UI.Runtime.Skia.Android/Native/AndroidSkiaNativeElementHostingExtension.cs

@@ -18,7 +18,7 @@ public AndroidSkiaNativeElementHostingExtension(ContentPresenter owner)
 		_owner = owner;
 	}
 
-	public void ArrangeNativeElement(object content, Rect arrangeRect, Rect clipRect)
+	public void ArrangeNativeElement(object content, Rect arrangeRect)
 	{
 		if (content is View view)
 		{
@@ -77,14 +77,6 @@ public void ChangeNativeElementOpacity(object content, double opacity)
 		}
 	}
 
-	public void ChangeNativeElementVisibility(object content, bool visible)
-	{
-		if (content is View view)
-		{
-			view.Visibility = visible ? ViewStates.Visible : ViewStates.Invisible;
-		}
-	}
-
 	public object? CreateSampleComponent(string text)
 	{
 		if (ApplicationActivity.NativeLayerHost is not { } host)

src/Uno.UI.Runtime.Skia.AppleUIKit/Native/UIKitNativeElementHostingExtension.cs

@@ -20,7 +20,7 @@ public UIKitNativeElementHostingExtension(ContentPresenter presenter)
 
 	private UIView? OverlayLayer => _presenter.XamlRoot is { } xamlRoot ? (XamlRootMap.GetHostForRoot(xamlRoot) as IAppleUIKitXamlRootHost)?.NativeOverlayLayer : null;
 
-	public void ArrangeNativeElement(object content, Rect arrangeRect, Rect clipRect)
+	public void ArrangeNativeElement(object content, Rect arrangeRect)
 	{
 		if (content is UIView view)
 		{
@@ -72,14 +72,6 @@ public void ChangeNativeElementOpacity(object content, double opacity)
 		}
 	}
 
-	public void ChangeNativeElementVisibility(object content, bool visible)
-	{
-		if (content is UIView view)
-		{
-			view.Opaque = visible;
-		}
-	}
-
 	public object? CreateSampleComponent(string text)
 	{
 		if (OverlayLayer is null)

src/Uno.UI.Runtime.Skia.MacOS/Native/MacOSNativeElementHostingExtension.cs

@@ -29,7 +29,7 @@ private MacOSNativeElementHostingExtension(ContentPresenter contentPresenter)
 
 	public static void Register() => ApiExtensibility.Register<ContentPresenter>(typeof(ContentPresenter.INativeElementHostingExtension), o => new MacOSNativeElementHostingExtension(o));
 
-	public void ArrangeNativeElement(object content, Rect arrangeRect, Rect clipRect)
+	public void ArrangeNativeElement(object content, Rect arrangeRect)
 	{
 		if (content is MacOSNativeElement element)
 		{
@@ -39,7 +39,7 @@ public void ArrangeNativeElement(object content, Rect arrangeRect, Rect clipRect
 			}
 			else
 			{
-				NativeUno.uno_native_arrange(element.NativeHandle, arrangeRect.Left, arrangeRect.Top, arrangeRect.Width, arrangeRect.Height, clipRect.Left, clipRect.Top, clipRect.Width, clipRect.Height);
+				NativeUno.uno_native_arrange(element.NativeHandle, arrangeRect.Left, arrangeRect.Top, arrangeRect.Width, arrangeRect.Height);
 			}
 		}
 		else if (this.Log().IsEnabled(LogLevel.Debug))
@@ -74,19 +74,6 @@ public void ChangeNativeElementOpacity(object content, double opacity)
 		}
 	}
 
-	public void ChangeNativeElementVisibility(object content, bool visible)
-	{
-		if (content is MacOSNativeElement element)
-		{
-			// https://developer.apple.com/documentation/appkit/nsview/1483369-hidden?language=objc
-			NativeUno.uno_native_set_visibility(element.NativeHandle, visible);
-		}
-		else if (this.Log().IsEnabled(LogLevel.Debug))
-		{
-			this.Log().Debug($"Object `{nameof(content)}` is a {content.GetType().FullName} and not a MacOSNativeElement subclass.");
-		}
-	}
-
 	public object? CreateSampleComponent(string text)
 	{
 		if (_window is null)

src/Uno.UI.Runtime.Skia.MacOS/Native/NativeUno.cs

@@ -342,7 +342,7 @@ internal static unsafe partial void uno_set_window_close_callbacks(
 	internal static partial nint uno_native_create_sample(nint window, string text);
 
 	[LibraryImport("libUnoNativeMac.dylib")]
-	internal static partial void uno_native_arrange(nint element, double arrangeLeft, double arrangeTop, double arrangeWidth, double arrangeHeight, double clipLeft, double clipTop, double clipWidth, double clipHeight);
+	internal static partial void uno_native_arrange(nint element, double arrangeLeft, double arrangeTop, double arrangeWidth, double arrangeHeight);
 
 	[LibraryImport("libUnoNativeMac.dylib")]
 	internal static partial void uno_native_attach(nint element);

src/Uno.UI.Runtime.Skia.MacOS/UnoNativeMac/UnoNativeMac/UNONative.h

@@ -23,7 +23,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 NSView* uno_native_create_sample(NSWindow *window, const char* _Nullable text);
 
-void uno_native_arrange(NSView *element, double arrangeLeft, double arrangeTop, double arrangeWidth, double arrangeHeight, double clipLeft, double clipTop, double clipWidth, double clipHeight);
+void uno_native_arrange(NSView *element, double arrangeLeft, double arrangeTop, double arrangeWidth, double arrangeHeight);
 
 void uno_native_attach(NSView* element);
 

src/Uno.UI.Runtime.Skia.MacOS/UnoNativeMac/UnoNativeMac/UNONative.m

@@ -47,14 +47,13 @@ - (void)detach {
     return sample;
 }
 
-void uno_native_arrange(NSView<UNONativeElement> *element, double arrangeLeft, double arrangeTop, double arrangeWidth, double arrangeHeight, double clipLeft, double clipTop, double clipWidth, double clipHeight)
+void uno_native_arrange(NSView<UNONativeElement> *element, double arrangeLeft, double arrangeTop, double arrangeWidth, double arrangeHeight)
 {
     NSRect arrange = NSMakeRect(arrangeLeft, arrangeTop, arrangeWidth, arrangeHeight);
     element.frame = arrange;
 #if DEBUG
-    NSLog(@"uno_native_arrange %p arrange(%g,%g,%g,%g) clip(%g,%g,%g,%g)", element,
-          arrangeLeft, arrangeTop, arrangeWidth, arrangeHeight,
-          clipLeft, clipTop, clipWidth, clipHeight);
+    NSLog(@"uno_native_arrange %p arrange(%g,%g,%g,%g)", element,
+          arrangeLeft, arrangeTop, arrangeWidth, arrangeHeight);
 #endif
 }
 

src/Uno.UI.Runtime.Skia.WebAssembly.Browser/Native/BrowserNativeElementHostingExtension.cs

@@ -33,17 +33,12 @@ public void DetachNativeElement(object content)
 		NativeMethods.DetachNativeElement(((BrowserHtmlElement)content).ElementId);
 	}
 
-	public void ArrangeNativeElement(object content, Windows.Foundation.Rect arrangeRect, Windows.Foundation.Rect clipRect)
+	public void ArrangeNativeElement(object content, Windows.Foundation.Rect arrangeRect)
 	{
 		Debug.Assert(content is BrowserHtmlElement);
 		NativeMethods.ArrangeNativeElement(((BrowserHtmlElement)content).ElementId, arrangeRect.X, arrangeRect.Y, arrangeRect.Width, arrangeRect.Height);
 	}
 
-	public void ChangeNativeElementVisibility(object content, bool visible)
-	{
-		// no need to do anything here, airspace clipping logic will take care of it automatically
-	}
-
 	public void ChangeNativeElementOpacity(object content, double opacity)
 	{
 		Debug.Assert(content is BrowserHtmlElement);

src/Uno.UI.Runtime.Skia.Win32/Native/Win32NativeElementHostingExtension.cs

@@ -286,7 +286,7 @@ public void DetachNativeElement(object content)
 		((Win32WindowWrapper)XamlRootMap.GetHostForRoot(_presenter.XamlRoot!)!).RenderingNegativePathReevaluated -= OnRenderingNegativePathReevaluated;
 	}
 
-	public void ArrangeNativeElement(object content, Rect arrangeRect, Rect clipRect)
+	public void ArrangeNativeElement(object content, Rect arrangeRect)
 	{
 		if (content is not Win32NativeWindow window)
 		{
@@ -347,11 +347,6 @@ public unsafe object CreateSampleComponent(string text)
 		return new Win32NativeWindow(hwnd);
 	}
 
-	public void ChangeNativeElementVisibility(object content, bool visible)
-	{
-		// no need to do anything here, airspace clipping logic will take care of it automatically
-	}
-
 	public void ChangeNativeElementOpacity(object content, double opacity)
 	{
 		if (content is not Win32NativeWindow window)

src/Uno.UI.Runtime.Skia.Wpf/Extensions/WpfNativeElementHostingExtension.cs

@@ -60,14 +60,6 @@ public void DetachNativeElement(object content)
 		}
 	}
 
-	public void ChangeNativeElementVisibility(object content, bool visible)
-	{
-		if (content is System.Windows.UIElement contentAsUIElement)
-		{
-			contentAsUIElement.Visibility = visible ? System.Windows.Visibility.Visible : System.Windows.Visibility.Collapsed;
-		}
-	}
-
 	public void ChangeNativeElementOpacity(object content, double opacity)
 	{
 		if (content is System.Windows.UIElement contentAsUIElement)
@@ -76,7 +68,7 @@ public void ChangeNativeElementOpacity(object content, double opacity)
 		}
 	}
 
-	public void ArrangeNativeElement(object content, Windows.Foundation.Rect arrangeRect, Windows.Foundation.Rect clipRect)
+	public void ArrangeNativeElement(object content, Windows.Foundation.Rect arrangeRect)
 	{
 		if (content is System.Windows.UIElement contentAsUIElement)
 		{