diff --git a/.editorconfig b/.editorconfig
index ffea95249..42915aaf2 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -43,4 +43,10 @@ csharp_space_around_binary_operators=before_and_after
 csharp_preserve_single_line_blocks=true
 csharp_preserve_single_line_statements=true
 
-dotnet_diagnostic.CA1848.severity = none
+dotnet_diagnostic.CS0162.severity = none; CS0162: Unreachable code detected
+dotnet_diagnostic.CS0169.severity = none; CS0169: The field '{0}' is never used
+dotnet_diagnostic.CS0414.severity = none; CS0414: The field '{0}' is assigned but its value is never used
+dotnet_diagnostic.CS8321.severity = none; CS8321: The local function '{0}' is declared but never used
+dotnet_diagnostic.CA1822.severity = none; CA1822: Mark members as static
+dotnet_diagnostic.CA1823.severity = none; CA1823: Unused field '{0}'
+dotnet_diagnostic.CA1848.severity = none; CA1848: Use the LoggerMessage delegates
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.Navigation.cs b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.Navigation.cs
index 3804b5fb1..ec50a19d4 100644
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.Navigation.cs
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/App.xaml.Navigation.cs
@@ -90,15 +90,16 @@ private Shell BuildShell()
 			AddNavigationItems(nv);
 
 			// landing navigation
-			ShellNavigateTo<NavigationBarSamplePage>(
-#if WINDOWS_UWP
-				// note: on uwp, NavigationView.SelectedItem MUST be set on launch to avoid entering compact-mode
-				trySynchronizeCurrentItem: true
-#else
-				// workaround for uno#5069: setting NavView.SelectedItem at launch bricks it
-				trySynchronizeCurrentItem: false
-#endif
-			);
+//			ShellNavigateTo<NavigationBarSamplePage>(
+//#if WINDOWS_UWP
+//				// note: on uwp, NavigationView.SelectedItem MUST be set on launch to avoid entering compact-mode
+//				trySynchronizeCurrentItem: true
+//#else
+//				// workaround for uno#5069: setting NavView.SelectedItem at launch bricks it
+//				trySynchronizeCurrentItem: false
+//#endif
+//			);
+			_shell.NavigationView.Content = new DockControl_NestedPage();
 
 			// navigation + setting handler
 			nv.ItemInvoked += OnNavigationItemInvoked;
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DockControlSamplePage.xaml b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DockControlSamplePage.xaml
new file mode 100644
index 000000000..65be17c5e
--- /dev/null
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DockControlSamplePage.xaml
@@ -0,0 +1,24 @@
+<Page x:Class="Uno.Toolkit.Samples.Content.Controls.DockControlSamplePage"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Toolkit.Samples.Content.Controls"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  xmlns:sample="using:Uno.Toolkit.Samples"
+	  xmlns:utu="using:Uno.Toolkit.UI"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+
+	<Grid Background="{ThemeResource SurfaceBrush}">
+		<sample:SamplePageLayout x:Name="SamplePageLayout" IsDesignAgnostic="True">
+			<sample:SamplePageLayout.DesignAgnosticTemplate>
+				<DataTemplate>
+					<Grid Height="500">
+						<utu:DockControl />
+					</Grid>
+				</DataTemplate>
+			</sample:SamplePageLayout.DesignAgnosticTemplate>
+		</sample:SamplePageLayout>
+	</Grid>
+</Page>
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DockControlSamplePage.xaml.cs b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DockControlSamplePage.xaml.cs
new file mode 100644
index 000000000..cb45818b2
--- /dev/null
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DockControlSamplePage.xaml.cs
@@ -0,0 +1,37 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using Uno.Toolkit.Samples.Entities;
+using Uno.Toolkit.UI;
+
+#if IS_WINUI
+using Microsoft.UI;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+#else
+using Windows.UI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+#endif
+
+namespace Uno.Toolkit.Samples.Content.Controls;
+
+[SamplePage(SampleCategory.Controls, nameof(DockControl))]
+public sealed partial class DockControlSamplePage : Page
+{
+	public DockControlSamplePage()
+	{
+		this.InitializeComponent();
+	}
+}
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/NestedSamples/DockControl_NestedPage.xaml b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/NestedSamples/DockControl_NestedPage.xaml
new file mode 100644
index 000000000..2bb601149
--- /dev/null
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/NestedSamples/DockControl_NestedPage.xaml
@@ -0,0 +1,22 @@
+<Page x:Class="Uno.Toolkit.Samples.Content.NestedSamples.DockControl_NestedPage"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Toolkit.Samples.Content.Controls"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  xmlns:sample="using:Uno.Toolkit.Samples"
+	  xmlns:utu="using:Uno.Toolkit.UI"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid>
+		<utu:DockControl x:Name="SUT" />
+
+		<StackPanel HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="50" Background="Pink">
+			<Button Content="AddDocument" Click="AddDocument" Foreground="White" />
+			<Button Content="AddTool" Click="AddTool" Foreground="White" />
+			<Button Content="RefreshTV" Click="RefreshTV" Background="Green" Foreground="White" />
+			<Button Content="ResetPanes" Click="ResetPanes" Background="Red" Foreground="White" />
+		</StackPanel>
+	</Grid>
+</Page>
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/NestedSamples/DockControl_NestedPage.xaml.cs b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/NestedSamples/DockControl_NestedPage.xaml.cs
new file mode 100644
index 000000000..89b281adc
--- /dev/null
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/NestedSamples/DockControl_NestedPage.xaml.cs
@@ -0,0 +1,71 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using Uno.Toolkit.Samples.Entities;
+using Uno.Toolkit.UI;
+using Uno.Extensions;
+
+
+#if IS_WINUI
+using Microsoft.UI;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Controls.Primitives;
+using Microsoft.UI.Xaml.Data;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Navigation;
+#else
+using Windows.UI;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+#endif
+
+namespace Uno.Toolkit.Samples.Content.NestedSamples;
+
+public sealed partial class DockControl_NestedPage : Page
+{
+	private int _itemCounter = 0;
+	public DockControl_NestedPage()
+	{
+		this.InitializeComponent();
+	}
+
+	private void AddDocument(object sender, RoutedEventArgs e)
+	{
+		_itemCounter++;
+
+		SUT.AddItem(new DocumentItem
+		{
+			Header = $"Document {_itemCounter}.txt",
+			Title = $"title: Document {_itemCounter}.txt", // should be unused
+			Content = $"contnet: asdasd {_itemCounter}",
+		});
+	}
+
+	private void AddTool(object sender, RoutedEventArgs e)
+	{
+		_itemCounter++;
+
+		SUT.AddItem(new ToolItem
+		{
+			Header = $"Tool {_itemCounter}",
+			Title = $"title: Tool Window {_itemCounter}",
+			Content = $"content: Tool {_itemCounter}",
+		});
+	}
+	private void RefreshTV(object sender, RoutedEventArgs e)
+	{
+		SUT.RefreshTabViews();
+	}
+	private void ResetPanes(object sender, RoutedEventArgs e)
+	{
+		SUT.ResetPanes();
+	}
+}
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Shell.xaml.cs b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Shell.xaml.cs
index 36a6cb023..36c980730 100644
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Shell.xaml.cs
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Shell.xaml.cs
@@ -15,11 +15,12 @@
 using Uno.Toolkit.Samples.Content.NestedSamples;
 using Uno.Toolkit.Samples.Helpers;
 using Uno.Toolkit.UI;
+using System.Collections;
+using System.Collections.Generic;
 
 #if __IOS__
 using Foundation;
 #endif
-
 #if IS_WINUI
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Controls;
@@ -247,11 +248,13 @@ object FindViewOfInterest()
 			var target = FindViewOfInterest();
 			var targetTree = (target as DependencyObject)?.TreeGraph();
 
+			var dcLogicalTree = (target as DependencyObject)?.GetFirstDescendant<DockControl>()?.LogicalTreeGraph();
+
 			// note: you can also tag element with unique x:Name to inspect here
 			//var sut = this.GetFirstDescendant<Chip>(x => x.Name == "SUT");
 			//var tree = sut?.TreeGraph();
 
-#if WINDOWS || WINDOWS_UWP
+#if WINDOWS || WINDOWS_UWP || HAS_UNO_SKIA
 			var data = new DataPackage();
 			data.SetText(targetTree ?? tree);
 
diff --git a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems
index da7b64a5a..42c6488b7 100644
--- a/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems
+++ b/samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems
@@ -19,6 +19,9 @@
       <DependentUpon>App.xaml</DependentUpon>
     </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)App.xaml.Navigation.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\DockControlSamplePage.xaml.cs">
+      <DependentUpon>DockControlSamplePage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\ItemsRepeaterExtensionsIncrementalLoadingSamplePage.xaml.cs">
       <DependentUpon>ItemsRepeaterExtensionsIncrementalLoadingSamplePage.xaml</DependentUpon>
     </Compile>
@@ -83,6 +86,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Content\Helpers\ResponsiveExtensionsSamplePage.xaml.cs">
       <DependentUpon>ResponsiveExtensionsSamplePage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\DockControl_NestedPage.xaml.cs">
+      <DependentUpon>DockControl_NestedPage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage1.xaml.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage2.xaml.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage3.xaml.cs">
@@ -239,6 +245,10 @@
     <PRIResource Include="$(MSBuildThisFileDirectory)Strings\en\Resources.resw" />
   </ItemGroup>
   <ItemGroup>
+    <Page Include="$(MSBuildThisFileDirectory)Content\Controls\DockControlSamplePage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Content\Controls\ItemsRepeaterExtensionsIncrementalLoadingSamplePage.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -339,6 +349,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Content\NestedSamples\DockControl_NestedPage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Content\NestedSamples\FluentNavigationBarSampleNestedPage1.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.Enums.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.Enums.cs
new file mode 100644
index 000000000..5cc6253ea
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.Enums.cs
@@ -0,0 +1,15 @@
+namespace Uno.Toolkit.UI;
+
+public enum DockDirection
+{
+	None,
+	Left, Top, Right, Bottom, // to split relative to the target pane
+	OuterLeft, OuterTop, OuterRight, OuterBottom, // to split relative to a Editor/DocumentPane, as a ToolPane instead of a split DocumentPane
+	EdgeLeft, EdgeTop, EdgeRight, EdgeBottom,
+}
+
+public enum DockPaneClosingBehavior
+{
+	CloseItem,
+	ClosePane,
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.cs
new file mode 100644
index 000000000..09e4facc2
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.cs
@@ -0,0 +1,555 @@
+using System;
+using System.Collections.Generic;
+using System.Diagnostics;
+using System.Linq;
+using Windows.ApplicationModel.DataTransfer;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+public partial class DockControl : Control
+{
+	internal class PropertyKeys
+	{
+		public const string Container = nameof(Container);
+		public const string Item = nameof(Item);
+	}
+
+	#region DependencyProperty: PaneClosingBehavior = CloseItem
+
+	public static DependencyProperty PaneClosingBehaviorProperty { get; } = DependencyProperty.Register(
+		nameof(PaneClosingBehavior),
+		typeof(DockPaneClosingBehavior),
+		typeof(DockControl),
+		new PropertyMetadata(DockPaneClosingBehavior.CloseItem));
+
+	public DockPaneClosingBehavior PaneClosingBehavior
+	{
+		get => (DockPaneClosingBehavior)GetValue(PaneClosingBehaviorProperty);
+		set => SetValue(PaneClosingBehaviorProperty, value);
+	}
+
+	#endregion
+
+	private RootPane? _rootPane;
+	private DockingDiamond? _dockingDiamond;
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		_rootPane = GetTemplateChild("RootPane") as RootPane;
+		_dockingDiamond = GetTemplateChild("DockingDiamond") as DockingDiamond;
+	}
+
+	public void AddItem(DockItem item) => AddItem(item, null, null);
+	public void AddItem(DockItem item, ElementPane? pane, DockDirection? direction)
+	{
+		if (pane is { })
+		{
+			//if (!IsNested(pane)) throw;
+
+			pane.Add(item);
+		}
+		else
+		{
+			FindPane<DocumentPane>()?.Add(item);
+		}
+	}
+
+	public TPane? FindPane<TPane>() where TPane : DockPane => FindPane<TPane>(x => true);
+	public TPane? FindPane<TPane>(Func<TPane, bool> predicate) where TPane : DockPane
+	{
+		if (_rootPane is null) return null;
+
+		TPane? Walk(DockPane pane)
+		{
+			if (pane is TPane tpane && predicate(tpane)) return tpane;
+
+			foreach (var nested in (pane as LayoutPane)?.NestedPanes ?? Enumerable.Empty<DockPane>())
+			{
+				if (Walk(nested) is { } result) return result;
+			}
+
+			return null;
+		}
+
+		return Walk(_rootPane);
+	}
+
+#if DEBUG
+	internal void RefreshTabViews()
+	{
+		foreach (var pane in Hierarchy.Walk<DockPane>(_rootPane, x => (x as LayoutPane)?.NestedPanes).OfType<ElementPane>())
+		{
+			pane.RepairTabView();
+		}
+	}
+	internal void ResetPanes()
+	{
+		_rootPane?.PopulateNestedPanes();
+	}
+#endif
+}
+public partial class DockControl // handlers, forwarded handlers
+{
+	internal void OnPaneCloseRequested(ElementPane pane, RoutedEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnPaneCloseRequested");
+
+		if (pane is DocumentPane) return; // n/a
+
+		if (pane is ToolPane)
+		{
+			if (PaneClosingBehavior is DockPaneClosingBehavior.CloseItem)
+			{
+				if ((pane.SelectedItem ?? pane.Items.LastOrDefault()) is { } item)
+				{
+					pane.Remove(item);
+				}
+			}
+			else
+			{
+				pane.ClearItems();
+			}
+			TryCloseEmptyPane(pane);
+		}
+	}
+	internal void OnPaneDragStarting(ElementPane pane, DragStartingEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockPanel::OnPaneDragStarting");
+
+		e.Data.Properties[PropertyKeys.Container] = pane;
+	}
+	internal void OnPaneDropCompleted(ElementPane pane, DropCompletedEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockPanel::OnPaneDragStarting");
+	}
+	internal void OnPaneDropEnter(ElementPane pane, DragEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnPaneDropEnter");
+
+		var (container, item) = ExtractDragInfo(e.DataView);
+		if (container is null) return;
+
+		if (item is { })
+		{
+			if (pane.CanAcceptDrop(item))
+			{
+				e.AcceptedOperation = DataPackageOperation.Move;
+				_dockingDiamond?.ShowAt(pane, item);
+			}
+			else
+			{
+				e.AcceptedOperation = DataPackageOperation.None;
+				_dockingDiamond?.Hide();
+			}
+		}
+		else
+		{
+			if (container != pane)
+			{
+				e.AcceptedOperation = DataPackageOperation.Move;
+				_dockingDiamond?.ShowAt(pane, null);
+			}
+			else
+			{
+				e.AcceptedOperation = DataPackageOperation.None;
+				_dockingDiamond?.Hide();
+			}
+		}
+	}
+	internal void OnPaneDropLeave(ElementPane pane, DragEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnPaneDropLeave");
+
+		e.AcceptedOperation = DataPackageOperation.None;
+		_dockingDiamond?.Hide();
+	}
+	internal void OnPaneDrop(ElementPane pane, DragEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnPaneDrop: {pane.GetType().Name}, {_dockingDiamond?.Direction}");
+
+		_dockingDiamond?.Hide();
+
+		var (container, item) = ExtractDragInfo(e.DataView);
+		if (container is null) return;
+
+		// fixme@xy: sometimes we fail to reduce all unnecessary LayoutPane, repro?
+		// todo@xy: merge both branches below
+
+		if (item is { }) // dragging single DockItem
+		{
+			if (!pane.CanAcceptDrop(item)) return;
+
+			var direction = _dockingDiamond?.Direction ?? DockDirection.None;
+			var dirInfo = direction.Explode();
+			if (direction is DockDirection.None)
+			{
+				if (container == pane) return;
+
+				if (container.Remove(item))
+				{
+					pane.Add(item);
+					pane.RepairTabView();
+
+					TryCloseEmptyPane(container);
+				}
+			}
+			else if (dirInfo.IsEdge)
+			{
+				throw new NotImplementedException(direction.ToString());
+			}
+			else if (pane is DocumentPane { ParentPane: EditorPane editorPane })
+			{
+				if (dirInfo.IsInner)
+				{
+					if (pane.ParentPane is not { } parentPane) return;
+					if (!(parentPane.NestedPanes.IndexOf(pane) is var index && index != -1)) return;
+
+					// For document pane, if we previously had splited, then only allow split in the same orientation (horizontally/vertically).
+					// If not, any direction is okay. If the document panes were to be reduced back to a single one again, remove the orientation restriction.
+					if (!editorPane.IsOrientationLocked && direction.ToOrientation() is { } orientation)
+					{
+						editorPane.Orientation = orientation;
+					}
+
+					if (editorPane.Orientation == direction.ToOrientation() &&
+						container.Remove(item))
+					{
+						var newPane = new DocumentPane();
+
+						parentPane.NestedPanes.Insert(index + (direction.IsLeading() ? 0 : 1), newPane);
+
+						newPane.Add(item);
+
+						TryCloseEmptyPane(container);
+					}
+				}
+				else if (dirInfo.IsOuter && item is ToolItem)
+				{
+					// refactor@xy: this block is mostly the same as `else if (item is ToolItem)` extract the logics into: TryInsertParallelPane(refPane, item, orientation)
+					if (editorPane.ParentPane is not { } parentPane) return;
+					if (!(parentPane.NestedPanes.IndexOf(editorPane) is var index && index != -1)) return;
+
+					if (container.Remove(item))
+					{
+						// if the direction is parallel to the parent layout, just insert the new pane before/after the target pane
+						if (parentPane.Orientation == direction.ToOrientation())
+						{
+							var newPane = new ToolPane();
+
+							parentPane.NestedPanes.Insert(index + direction is DockDirection.Left or DockDirection.Top ? 0 : 1, newPane);
+
+							newPane.Add(item);
+						}
+						// if the direction is perpendicular to the parent layout,
+						// remove the target pane from its parent, insert a new layout pane at its place,
+						// add the target pane and the new pane.
+						else
+						{
+							var newLayoutPane = new LayoutPane { Orientation = parentPane.Orientation.ToOpposite() };
+							var newPane = new ToolPane();
+
+							parentPane.NestedPanes.Remove(editorPane);
+							if (direction.IsLeading())
+							{
+								newLayoutPane.NestedPanes.Add(newPane);
+								newLayoutPane.NestedPanes.Add(editorPane);
+							}
+							else
+							{
+								newLayoutPane.NestedPanes.Add(editorPane);
+								newLayoutPane.NestedPanes.Add(newPane);
+							}
+							parentPane.NestedPanes.Insert(index, newLayoutPane);
+
+							newPane.Add(item);
+						}
+
+						TryCloseEmptyPane(container);
+					}
+				}
+				else
+				{
+					// This case should be prevented by the DockingDiamond logics.
+					throw new InvalidOperationException();
+				}
+			}
+			else if (item is ToolItem)
+			{
+				if (!dirInfo.IsInner && !dirInfo.IsEdge) throw new ArgumentOutOfRangeException(direction.ToString());
+
+				if (pane.ParentPane is not { } parentPane) return;
+				if (!(parentPane.NestedPanes.IndexOf(pane) is var index && index != -1)) return;
+
+				if (container.Remove(item))
+				{
+					// if the direction is parallel to the parent layout, just insert the new pane before/after the target pane
+					if (parentPane.Orientation == direction.ToOrientation())
+					{
+						var newPane = new ToolPane();
+
+						parentPane.NestedPanes.Insert(index + direction is DockDirection.Left or DockDirection.Top ? 0 : 1, newPane);
+
+						newPane.Add(item);
+					}
+					// if the direction is perpendicular to the parent layout,
+					// remove the target pane from its parent, insert a new layout pane at its place,
+					// add the target pane and the new pane.
+					else
+					{
+						var newLayoutPane = new LayoutPane { Orientation = pane.ParentPane.Orientation.ToOpposite() };
+						var newPane = new ToolPane();
+
+						parentPane.NestedPanes.Remove(pane);
+						if (direction.IsLeading())
+						{
+							newLayoutPane.NestedPanes.Add(newPane);
+							newLayoutPane.NestedPanes.Add(pane);
+						}
+						else
+						{
+							newLayoutPane.NestedPanes.Add(pane);
+							newLayoutPane.NestedPanes.Add(newPane);
+						}
+						parentPane.NestedPanes.Insert(index, newLayoutPane);
+
+						pane.RepairTabView();
+
+						newPane.Add(item);
+					}
+
+					TryCloseEmptyPane(container);
+				}
+			}
+			else
+			{
+				throw new NotImplementedException($"DockControl::OnItemDropCompleted: {direction}");
+			}
+		}
+		else // dragging entire DockPane
+		{
+			if (container is not ToolPane) return;
+
+			var direction = _dockingDiamond?.Direction ?? DockDirection.None;
+			if (direction is DockDirection.None)
+			{
+				if (container == pane) return;
+
+				var items = container.Items.ToArray();
+
+				container.ClearItems();
+				foreach (var item2 in items)
+				{
+					pane.Add(item2);
+				}
+				TryCloseEmptyPane(container);
+			}
+			else if (pane is DocumentPane { ParentPane: EditorPane editorPane })
+			{
+				if (pane.ParentPane is not { } parentPane) return;
+				if (!(parentPane.NestedPanes.IndexOf(pane) is var index && index != -1)) return;
+
+				// For document pane, if we previously had splited, then only allow split in the same orientation (horizontally/vertically).
+				// If not, any direction is okay. If the document panes were to be reduced back to a single one again, remove the orientation restriction.
+				if (!editorPane.IsOrientationLocked && direction.ToOrientation() is { } orientation)
+				{
+					editorPane.Orientation = orientation;
+				}
+
+				if (editorPane.Orientation == direction.ToOrientation())
+				{
+					var newPane = new DocumentPane();
+
+					parentPane.NestedPanes.Insert(index + direction is DockDirection.Left or DockDirection.Top ? 0 : 1, newPane);
+
+					var items = container.Items.ToArray();
+					container.ClearItems();
+					foreach (var item2 in items)
+					{
+						newPane.Add(item2);
+					}
+
+					TryCloseEmptyPane(container);
+				}
+				else
+				{
+					// This case should be prevented by the DockingDiamond logics.
+					throw new InvalidOperationException();
+				}
+			}
+			else if (container is ToolPane)
+			{
+				if (container == pane) return; // can't move relative to itself
+				if (pane.ParentPane is not { } parentPane) return;
+				if (!(parentPane.NestedPanes.IndexOf(pane) is var index && index != -1)) return;
+
+				var items = container.Items.ToArray();
+				container.ClearItems();
+
+				// if the direction is parallel to the parent layout, just insert the new pane before/after the target pane
+				if (parentPane.Orientation == direction.ToOrientation())
+				{
+					var newPane = new ToolPane();
+
+					parentPane.NestedPanes.Insert(index + direction is DockDirection.Left or DockDirection.Top ? 0 : 1, newPane);
+
+					newPane.AddRange(items);
+				}
+				// if the direction is perpendicular to the parent layout,
+				// remove the target pane from its parent, insert a new layout pane at its place,
+				// add the target pane and the new pane.
+				else
+				{
+					var newLayoutPane = new LayoutPane { Orientation = pane.ParentPane.Orientation.ToOpposite() };
+					var newPane = new ToolPane();
+
+					parentPane.NestedPanes.Remove(pane);
+					if (direction is DockDirection.Left or DockDirection.Top)
+					{
+						newLayoutPane.NestedPanes.Add(newPane);
+						newLayoutPane.NestedPanes.Add(pane);
+					}
+					else
+					{
+						newLayoutPane.NestedPanes.Add(pane);
+						newLayoutPane.NestedPanes.Add(newPane);
+					}
+					parentPane.NestedPanes.Insert(index, newLayoutPane);
+
+					pane.RepairTabView();
+
+					newPane.AddRange(items);
+				}
+
+				TryCloseEmptyPane(container);
+			}
+			else
+			{
+				throw new NotImplementedException($"DockControl::OnItemDropCompleted: {direction}");
+			}
+		}
+	}
+
+	internal void OnItemCloseRequested(ElementPane pane, TabViewTabCloseRequestedEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnItemCloseRequested");
+
+		if (e.Item is DockItem item)
+		{
+			pane.Remove(item);
+
+			if (pane is ToolPane)
+			{
+				TryCloseEmptyPane(pane);
+			}
+			else if (pane is DocumentPane { ParentPane: EditorPane { NestedPanes.Count: > 1 } })
+			{
+				// we shouldn't close down the EditorPane's last nested pane
+				TryCloseEmptyPane(pane);
+			}
+		}
+	}
+	internal void OnItemDragStarting(ElementPane pane, TabViewTabDragStartingEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnItemDragStarting");
+
+		e.Data.Properties[PropertyKeys.Container] = pane;
+		e.Data.Properties[PropertyKeys.Item] = e.Item;
+
+		e.Data.RequestedOperation = DataPackageOperation.Move;
+	}
+	internal void OnItemDropCompleted(ElementPane pane, TabViewTabDragCompletedEventArgs e)
+	{
+		Debug.WriteLine($"@xy DockControl::OnItemDropCompleted");
+
+		_dockingDiamond?.Hide();
+	}
+	internal void OnItemDroppedOutside(ElementPane pane, TabViewTabDroppedOutsideEventArgs e)
+	{
+		//Debug.WriteLine($"@xy DockControl::OnItemDroppedOutside");
+	}
+}
+public partial class DockControl // helpers
+{
+	private void TryCloseEmptyPane(ElementPane pane)
+	{
+		if (pane is { ParentPane: { } parent, ElementCount: 0 })
+		{
+			if (parent.NestedPanes.Remove(pane))
+			{
+				ReduceEmptyPaneRecursively(parent);
+			}
+		}
+	}
+	private void ReduceEmptyPaneRecursively(LayoutPane? pane)
+	{
+		if (pane?.NestedPanes.Count == 0 &&
+			pane.ParentPane?.NestedPanes is { } parentNestedPanes &&
+			parentNestedPanes.Remove(pane) &&
+			parentNestedPanes.Count == 0)
+		{
+			ReduceEmptyPaneRecursively(pane);
+		}
+	}
+
+	private (ElementPane? Container, DockItem? Item) ExtractDragInfo(DataPackageView view)
+	{
+		if (ExtractValue<ElementPane>(view.Properties, PropertyKeys.Container, out var container))
+		{
+			if (ExtractValue<DockItem>(view.Properties, PropertyKeys.Item, out var item))
+			{
+				return (container, item);
+			}
+			return (container, null);
+		}
+		return (null, null);
+
+		static bool ExtractValue<T>(IReadOnlyDictionary<string, object> dict, string key, out T? value) where T : class
+		{
+			value = dict.TryGetValue(key, out var result)
+				? result as T
+				: null;
+			return value is { };
+		}
+	}
+}
+public partial class DockControl // debug
+{
+#if DEBUG
+	internal string? LogicalTreeGraph() => LogicalTreeGraph(this);
+
+	internal static string? LogicalTreeGraph(object? x)
+	{
+		return (x as DependencyObject)?.TreeGraph(Describe, GetMembers);
+
+		IEnumerable<string> Describe(object x)
+		{
+			if (x is DockControl dc) return dc.GetDebugDescriptions();
+			if (x is DockPane pane) return pane.GetDebugDescriptions();
+			if (x is DockItem item) return [$"Header={item.Header}"];
+
+			return [];
+		}
+		IEnumerable<object> GetMembers(object x, IEnumerable<object> members)
+		{
+			if (x is DockControl dc) return dc.GetLogicalMembers().TrimNull();
+			if (x is DockPane pane) return pane.GetLogicalMembers().TrimNull();
+
+			return [];
+		}
+	}
+
+	internal object?[] GetLogicalMembers() => [_rootPane, _dockingDiamond];
+
+	internal IEnumerable<string> GetDebugDescriptions() => [];
+#endif
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.xaml b/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.xaml
new file mode 100644
index 000000000..0df8a708f
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockControl.xaml
@@ -0,0 +1,519 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+					xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+					xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+					xmlns:utu="using:Uno.Toolkit.UI"
+					xmlns:void="There is no mistake so great that it cannot be undone."
+					mc:Ignorable="void">
+
+	<void:String x:Key="DockLeftPathData">M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 18H9V6H20Z</void:String>
+	<void:String x:Key="DockTopPathData">M4 20H20C21 20 22 19 22 18V6C22 5 21 4 20 4H4C3 4 2 5 2 6V18C2 19 3 20 4 20M4 11H20V18H4V11Z</void:String>
+	<void:String x:Key="DockRightPathData">M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z</void:String>
+	<void:String x:Key="DockBottomPathData">M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M20 13H4V6H20Z</void:String>
+	<void:String x:Key="DockPathData">M20 4H4A2 2 0 002 6V18A2 2 0 004 20H20A2 2 0 0022 18V6A2 2 0 0020 4Z</void:String>
+
+	<x:String x:Key="DockCenterPathData">M2 2H22V22H2V2M3 4V21H21V4Z</x:String>
+	<x:String x:Key="DockVSplitPathData">M2 2H22V22H2V2M3 4V21H21V4ZM11.5 5h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1zm0 2h1v1h-1z</x:String>
+	<x:String x:Key="DockHSplitPathData">M2 2H22V22H2V2M3 4V21H21V4ZM4.5 12h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1zm2 0h1v1h-1z</x:String>
+	<x:String x:Key="DockSplitLeftPathData">M2 2H12V22H2ZM3 4V21h8V4Zm19 4-4 4 4 4Z</x:String>
+	<x:String x:Key="DockSplitTopPathData">M2 2H22V12H2ZM3 4v7H21V4ZM8 22l4-4 4 4Z</x:String>
+	<x:String x:Key="DockSplitRightPathData">M12 2H22V22H12Zm1 2V21h8V4ZM2 8l4 4-4 4Z</x:String>
+	<x:String x:Key="DockSplitBottomPathData">M2 12H22V22H2Zm1 2v7H21V14ZM8 2l4 4 4-4Z</x:String>
+
+	<x:String x:Key="ClosePathData">M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z</x:String>
+
+	<Style x:Key="IconButtonStyle" TargetType="Button">
+		<Setter Property="Background" Value="Transparent" />
+		<Setter Property="Foreground" Value="LightGray" />
+		<Setter Property="Margin" Value="0" />
+		<Setter Property="Padding" Value="2" />
+		<Setter Property="Width" Value="16" />
+		<Setter Property="Height" Value="16" />
+
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="Button">
+					<Grid Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
+						<Path Data="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}"
+							  Fill="{TemplateBinding Foreground}"
+							  Stretch="Fill"
+							  IsHitTestVisible="False" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<Style TargetType="utu:DockControl">
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:DockControl">
+					<Grid>
+						<utu:RootPane x:Name="RootPane" />
+						<utu:DockingDiamond x:Name="DockingDiamond" Visibility="Collapsed" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+	<Style TargetType="utu:RootPane">
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:RootPane">
+					<Grid>
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="Auto" />
+							<ColumnDefinition Width="*" />
+							<ColumnDefinition Width="Auto" />
+						</Grid.ColumnDefinitions>
+						<Grid.RowDefinitions>
+							<RowDefinition Height="Auto" />
+							<RowDefinition Height="*" />
+							<RowDefinition Height="Auto" />
+						</Grid.RowDefinitions>
+
+						<ItemsControl x:Name="NestedPanesHost"
+									  ItemsSource="{TemplateBinding NestedPanes}"
+									  Grid.RowSpan="3"
+									  Grid.ColumnSpan="3">
+							<ItemsControl.ItemsPanel>
+								<ItemsPanelTemplate>
+									<utu:DockPaneItemsGrid x:Name="ItemsGrid" />
+								</ItemsPanelTemplate>
+							</ItemsControl.ItemsPanel>
+						</ItemsControl>
+
+						<utu:AnchoredPane x:Name="LeftAnchoredPane"
+										  Grid.Row="0"
+										  Grid.RowSpan="3"
+										  Grid.Column="0"
+										  Direction="Left" />
+						<utu:AnchoredPane x:Name="TopAnchoredPane"
+										  Grid.Row="0"
+										  Grid.Column="0"
+										  Grid.ColumnSpan="3"
+										  Direction="Top" />
+						<utu:AnchoredPane x:Name="RightAnchoredPane"
+										  Grid.Row="0"
+										  Grid.RowSpan="3"
+										  Grid.Column="2"
+										  Direction="Right" />
+						<utu:AnchoredPane x:Name="BottomAnchoredPane"
+										  Grid.Row="2"
+										  Grid.Column="0"
+										  Grid.ColumnSpan="3"
+										  Direction="Bottom" />
+
+						<Border x:Name="ResizePreview"
+								Background="Black"
+								HorizontalAlignment="Left"
+								VerticalAlignment="Top"
+								Opacity="0.5"
+								Visibility="Collapsed" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+
+	</Style>
+	<Style TargetType="utu:AnchoredPane">
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:AnchoredPane">
+					<Grid>
+						<!--<utu:DockTabListView />-->
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+	<Style TargetType="utu:LayoutPane">
+		<Setter Property="Background" Value="Transparent" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:LayoutPane">
+					<Grid BorderBrush="{TemplateBinding BorderBrush}"
+						  BorderThickness="{TemplateBinding BorderThickness}"
+						  CornerRadius="{TemplateBinding CornerRadius}"
+						  Background="{TemplateBinding Background}">
+						<ItemsControl x:Name="NestedPanesHost" ItemsSource="{TemplateBinding NestedPanes}">
+							<ItemsControl.ItemsPanel>
+								<ItemsPanelTemplate>
+									<utu:DockPaneItemsGrid x:Name="ItemsGrid" Background="Transparent" />
+								</ItemsPanelTemplate>
+							</ItemsControl.ItemsPanel>
+						</ItemsControl>
+						<Border x:Name="ResizePreview"
+								Background="Black"
+								HorizontalAlignment="Left"
+								VerticalAlignment="Top"
+								Opacity="0.5"
+								Visibility="Collapsed" />
+
+						<TextBlock Text="LayoutPane"
+								   FontSize="35"
+								   HorizontalAlignment="Center"
+								   VerticalAlignment="Center"
+								   IsHitTestVisible="False"
+								   Opacity="0.35"
+								   RenderTransformOrigin="0.5,0.5">
+							<TextBlock.RenderTransform>
+								<RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
+							</TextBlock.RenderTransform>
+						</TextBlock>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<Style TargetType="utu:EditorPane">
+		<Setter Property="Background" Value="Transparent" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:EditorPane">
+					<Grid BorderBrush="{TemplateBinding BorderBrush}"
+						  BorderThickness="{TemplateBinding BorderThickness}"
+						  CornerRadius="{TemplateBinding CornerRadius}"
+						  Background="{TemplateBinding Background}">
+						<ItemsControl x:Name="NestedPanesHost" ItemsSource="{TemplateBinding NestedPanes}">
+							<ItemsControl.ItemsPanel>
+								<ItemsPanelTemplate>
+									<utu:DockPaneItemsGrid x:Name="ItemsGrid" Background="Transparent" />
+								</ItemsPanelTemplate>
+							</ItemsControl.ItemsPanel>
+						</ItemsControl>
+						<Border x:Name="ResizePreview"
+								Background="Black"
+								HorizontalAlignment="Left"
+								VerticalAlignment="Top"
+								Opacity="0.5"
+								Visibility="Collapsed" />
+
+						<TextBlock Text="EditorPane"
+								   FontSize="35"
+								   HorizontalAlignment="Center"
+								   VerticalAlignment="Center"
+								   IsHitTestVisible="False"
+								   Opacity="0.35"
+								   RenderTransformOrigin="0.5,0.5">
+							<TextBlock.RenderTransform>
+								<RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
+							</TextBlock.RenderTransform>
+						</TextBlock>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+	<Style TargetType="utu:DocumentPane">
+		<Setter Property="Background" Value="Transparent" />
+		<Setter Property="BorderBrush" Value="Gray" />
+		<Setter Property="BorderThickness" Value="1" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:DocumentPane">
+					<Grid BorderBrush="{TemplateBinding BorderBrush}"
+						  BorderThickness="{TemplateBinding BorderThickness}"
+						  CornerRadius="{TemplateBinding CornerRadius}"
+						  Background="{TemplateBinding Background}">
+						<TabView x:Name="TabView"
+								 IsAddTabButtonVisible="False"
+								 CanReorderTabs="True"
+								 void:TabWidthMode="SizeToContent"
+								 HorizontalAlignment="Stretch"
+								 VerticalAlignment="Stretch">
+							<TabView.Resources>
+								<Style TargetType="TabViewItem">
+									<Setter Property="HeaderTemplate">
+										<Setter.Value>
+											<DataTemplate>
+												<TextBlock Text="{Binding Header}" />
+											</DataTemplate>
+										</Setter.Value>
+									</Setter>
+								</Style>
+							</TabView.Resources>
+							<TabView.TabItemTemplate>
+								<DataTemplate>
+									<TextBlock Text="{Binding Content}" />
+								</DataTemplate>
+							</TabView.TabItemTemplate>
+						</TabView>
+
+						<TextBlock Text="DocumentPane"
+								   FontSize="35"
+								   HorizontalAlignment="Center"
+								   VerticalAlignment="Center"
+								   IsHitTestVisible="False"
+								   Opacity="0.35"
+								   RenderTransformOrigin="0.5,0.5">
+							<TextBlock.RenderTransform>
+								<RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
+							</TextBlock.RenderTransform>
+						</TextBlock>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+	<Style TargetType="utu:ToolPane">
+		<Setter Property="Background" Value="Transparent" />
+		<Setter Property="BorderBrush" Value="Gray" />
+		<Setter Property="BorderThickness" Value="1" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:ToolPane">
+					<Grid BorderBrush="{TemplateBinding BorderBrush}"
+						  BorderThickness="{TemplateBinding BorderThickness}"
+						  CornerRadius="{TemplateBinding CornerRadius}"
+						  Background="{TemplateBinding Background}">
+						<Grid.RowDefinitions>
+							<RowDefinition Height="Auto" />
+							<RowDefinition Height="*" />
+							<RowDefinition Height="Auto" />
+						</Grid.RowDefinitions>
+
+						<Grid x:Name="TitleBarContainer"
+							  Grid.Row="0"
+							  Background="Transparent">
+							<Grid.ColumnDefinitions>
+								<ColumnDefinition Width="Auto" />
+								<ColumnDefinition Width="*" />
+								<ColumnDefinition Width="Auto" />
+							</Grid.ColumnDefinitions>
+
+							<ContentControl Grid.Column="0"
+											Content="{Binding ElementName=TabView, Path=SelectedItem}"
+											VerticalAlignment="Center">
+								<ContentControl.ContentTemplate>
+									<DataTemplate>
+										<TextBlock Text="{Binding Title}" />
+									</DataTemplate>
+								</ContentControl.ContentTemplate>
+							</ContentControl>
+							<Border Grid.Column="1"
+									Background="Gray"
+									Margin="8,6"
+									VerticalAlignment="Stretch" />
+							<StackPanel Grid.Column="2"
+										Orientation="Horizontal"
+										VerticalAlignment="Center">
+								<Button x:Name="ClosePaneButton"
+										Content="{StaticResource ClosePathData}"
+										Style="{StaticResource IconButtonStyle}" />
+							</StackPanel>
+						</Grid>
+						<TabView x:Name="TabView"
+								 Grid.Row="1"
+								 IsAddTabButtonVisible="False"
+								 CanReorderTabs="True"
+								 void:TabWidthMode="SizeToContent"
+								 HorizontalAlignment="Stretch"
+								 VerticalAlignment="Stretch">
+							<TabView.Resources>
+								<Style TargetType="TabViewItem">
+									<Setter Property="HeaderTemplate">
+										<Setter.Value>
+											<DataTemplate>
+												<TextBlock Text="{Binding Header}" />
+											</DataTemplate>
+										</Setter.Value>
+									</Setter>
+								</Style>
+							</TabView.Resources>
+							<TabView.TabItemTemplate>
+								<DataTemplate>
+									<TextBlock Text="{Binding Content}" />
+								</DataTemplate>
+							</TabView.TabItemTemplate>
+						</TabView>
+
+						<TextBlock Grid.RowSpan="3"
+								   Text="ToolPane"
+								   FontSize="35"
+								   HorizontalAlignment="Center"
+								   VerticalAlignment="Center"
+								   IsHitTestVisible="False"
+								   Opacity="0.35"
+								   RenderTransformOrigin="0.5,0.5">
+							<TextBlock.RenderTransform>
+								<RotateTransform Angle="-45" CenterX="0.5" CenterY="0.5" />
+							</TextBlock.RenderTransform>
+						</TextBlock>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<Style TargetType="utu:DockDiamondIndicator">
+		<Setter Property="Foreground" Value="LightGray" />
+		<Setter Property="BorderBrush" Value="Gray" />
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:DockDiamondIndicator">
+					<Grid BorderBrush="{TemplateBinding BorderBrush}"
+						  BorderThickness="1"
+						  CornerRadius="2"
+						  Padding="3"
+						  Background="Transparent">
+						<Path Data="{TemplateBinding Data}"
+							  Fill="{TemplateBinding Foreground}"
+							  Width="33"
+							  Height="33"
+							  Stretch="Fill"
+							  IsHitTestVisible="False" />
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+	<Style TargetType="utu:DockingDiamond">
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:DockingDiamond">
+					<Grid x:Name="RootGrid">
+						<VisualStateManager.VisualStateGroups>
+							<VisualStateGroup x:Name="OuterStates">
+								<VisualState x:Name="OuterNonAvailableState" />
+								<VisualState x:Name="OuterAvailableState">
+									<VisualState.Setters>
+										<Setter Target="DockOuterLeftIndicator.Visibility" Value="Visible" />
+										<Setter Target="DockOuterTopIndicator.Visibility" Value="Visible" />
+										<Setter Target="DockOuterRightIndicator.Visibility" Value="Visible" />
+										<Setter Target="DockOuterBottomIndicator.Visibility" Value="Visible" />
+									</VisualState.Setters>
+								</VisualState>
+							</VisualStateGroup>
+							<VisualStateGroup x:Name="DirectionalStates">
+								<VisualState x:Name="Omnidirectional" />
+								<VisualState x:Name="HBidirectional">
+									<VisualState.Setters>
+										<Setter Target="DockTopIndicator.Visibility" Value="Collapsed" />
+										<Setter Target="DockBottomIndicator.Visibility" Value="Collapsed" />
+									</VisualState.Setters>
+								</VisualState>
+								<VisualState x:Name="VBidirectional">
+									<VisualState.Setters>
+										<Setter Target="DockLeftIndicator.Visibility" Value="Collapsed" />
+										<Setter Target="DockRightIndicator.Visibility" Value="Collapsed" />
+									</VisualState.Setters>
+								</VisualState>
+							</VisualStateGroup>
+						</VisualStateManager.VisualStateGroups>
+
+						<Grid.ColumnDefinitions>
+							<ColumnDefinition Width="Auto" />
+							<ColumnDefinition Width="Auto" />
+							<ColumnDefinition Width="*" />
+						</Grid.ColumnDefinitions>
+						<Grid.RowDefinitions>
+							<RowDefinition Height="Auto" />
+							<RowDefinition Height="Auto" />
+							<RowDefinition Height="*" />
+						</Grid.RowDefinitions>
+
+						<Border x:Name="OverlayBorder"
+								Grid.Row="1"
+								Grid.Column="1"
+								Background="SkyBlue"
+								Opacity="0.4" />
+						<Grid Grid.Row="1"
+							  Grid.Column="1"
+							  RowSpacing="5"
+							  ColumnSpacing="5"
+							  HorizontalAlignment="Center"
+							  VerticalAlignment="Center">
+							<Grid.ColumnDefinitions>
+								<ColumnDefinition Width="Auto" />
+								<ColumnDefinition Width="Auto" />
+								<ColumnDefinition Width="Auto" />
+								<ColumnDefinition Width="Auto" />
+								<ColumnDefinition Width="Auto" />
+							</Grid.ColumnDefinitions>
+							<Grid.RowDefinitions>
+								<RowDefinition Height="Auto" />
+								<RowDefinition Height="Auto" />
+								<RowDefinition Height="Auto" />
+								<RowDefinition Height="Auto" />
+								<RowDefinition Height="Auto" />
+							</Grid.RowDefinitions>
+
+							<utu:DockDiamondIndicator x:Name="DockCenterIndicator"
+													  Grid.Row="2"
+													  Grid.Column="2"
+													  Data="{StaticResource DockCenterPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockLeftIndicator"
+													  Grid.Row="2"
+													  Grid.Column="1"
+													  Data="{StaticResource DockVSplitPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockTopIndicator"
+													  Grid.Row="1"
+													  Grid.Column="2"
+													  Data="{StaticResource DockHSplitPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockRightIndicator"
+													  Grid.Row="2"
+													  Grid.Column="3"
+													  Data="{StaticResource DockVSplitPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockBottomIndicator"
+													  Grid.Row="3"
+													  Grid.Column="2"
+													  Data="{StaticResource DockHSplitPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockOuterLeftIndicator"
+													  Grid.Row="2"
+													  Grid.Column="0"
+													  Data="{StaticResource DockSplitLeftPathData}"
+													  Visibility="Collapsed" />
+							<utu:DockDiamondIndicator x:Name="DockOuterTopIndicator"
+													  Grid.Row="0"
+													  Grid.Column="2"
+													  Data="{StaticResource DockSplitTopPathData}"
+													  Visibility="Collapsed" />
+							<utu:DockDiamondIndicator x:Name="DockOuterRightIndicator"
+													  Grid.Row="2"
+													  Grid.Column="4"
+													  Data="{StaticResource DockSplitRightPathData}"
+													  Visibility="Collapsed" />
+							<utu:DockDiamondIndicator x:Name="DockOuterBottomIndicator"
+													  Grid.Row="4"
+													  Grid.Column="2"
+													  Data="{StaticResource DockSplitBottomPathData}"
+													  Visibility="Collapsed" />
+						</Grid>
+						<void:Grid Grid.RowSpan="3"
+								   Grid.ColumnSpan="3"
+								   Padding="5">
+							<utu:DockDiamondIndicator x:Name="DockEdgeLeftIndicator"
+													  HorizontalAlignment="Left"
+													  VerticalAlignment="Center"
+													  Data="{StaticResource DockSplitLeftPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockEdgeTopIndicator"
+													  HorizontalAlignment="Center"
+													  VerticalAlignment="Top"
+													  Data="{StaticResource DockSplitTopPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockEdgeRightIndicator"
+													  HorizontalAlignment="Right"
+													  VerticalAlignment="Center"
+													  Data="{StaticResource DockSplitRightPathData}" />
+							<utu:DockDiamondIndicator x:Name="DockEdgeBottomIndicator"
+													  HorizontalAlignment="Center"
+													  VerticalAlignment="Bottom"
+													  Data="{StaticResource DockSplitBottomPathData}" />
+						</void:Grid>
+					</Grid>
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+	<Style TargetType="utu:DockTabView">
+		<Setter Property="Template">
+			<Setter.Value>
+				<ControlTemplate TargetType="utu:DockTabView">
+					<Grid />
+				</ControlTemplate>
+			</Setter.Value>
+		</Setter>
+	</Style>
+
+</ResourceDictionary>
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockGridPanel.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockGridPanel.cs
new file mode 100644
index 000000000..09e16da14
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockGridPanel.cs
@@ -0,0 +1,33 @@
+using System;
+using System.Collections.Specialized;
+using System.Diagnostics;
+using Microsoft.UI.Xaml.Input;
+using Windows.Foundation;
+using Uno.UI.Extensions;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+public partial class DockPaneItemsGrid : Grid
+{
+	internal LayoutPane? Owner { get; private set; }
+
+	public DockPaneItemsGrid()
+	{
+		Loaded += (s, e) =>
+		{
+			Owner = this.FindFirstAncestor<LayoutPane>();
+			Owner?.OnItemsPanelPrepared(this);
+		};
+
+		//todo@xy: extract to template and dp (from DockControl to here)
+		RowSpacing = ColumnSpacing = 10;
+	}
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockHelper.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockHelper.cs
new file mode 100644
index 000000000..7ab6b6c4e
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockHelper.cs
@@ -0,0 +1,94 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Uno.Toolkit.UI;
+
+internal static class DockHelper
+{
+	public static Orientation? ToOrientation(this DockDirection direction)
+	{
+		return direction switch
+		{
+			DockDirection.None => null,
+
+			DockDirection.Left => Orientation.Horizontal,
+			DockDirection.Top => Orientation.Vertical,
+			DockDirection.Right => Orientation.Horizontal,
+			DockDirection.Bottom => Orientation.Vertical,
+
+			DockDirection.OuterLeft => Orientation.Horizontal,
+			DockDirection.OuterTop => Orientation.Vertical,
+			DockDirection.OuterRight => Orientation.Horizontal,
+			DockDirection.OuterBottom => Orientation.Vertical,
+
+			DockDirection.EdgeLeft => Orientation.Horizontal,
+			DockDirection.EdgeTop => Orientation.Vertical,
+			DockDirection.EdgeRight => Orientation.Horizontal,
+			DockDirection.EdgeBottom => Orientation.Vertical,
+
+			_ => throw new ArgumentNullException(direction.ToString()),
+		};
+	}
+	public static (bool IsOriented, bool IsInner, bool IsOuter, bool IsEdge) Explode(this DockDirection direction)
+	{
+		return direction switch
+		{
+			DockDirection.None => (false, true, false, false),
+
+			DockDirection.Left => (true, true, false, false),
+			DockDirection.Top => (true, true, false, false),
+			DockDirection.Right => (true, true, false, false),
+			DockDirection.Bottom => (true, true, false, false),
+
+			DockDirection.OuterLeft => (true, false, true, false),
+			DockDirection.OuterTop => (true, false, true, false),
+			DockDirection.OuterRight => (true, false, true, false),
+			DockDirection.OuterBottom => (true, false, true, false),
+
+			DockDirection.EdgeLeft => (true, false, false, true),
+			DockDirection.EdgeTop => (true, false, false, true),
+			DockDirection.EdgeRight => (true, false, false, true),
+			DockDirection.EdgeBottom => (true, false, false, true),
+
+			_ => throw new ArgumentNullException(direction.ToString()),
+		};
+	}
+
+	// here leading/trailing refer to the relative insert position
+	public static bool IsLeading(this DockDirection direction)
+	{
+		return direction switch
+		{
+			DockDirection.None => false,
+
+			DockDirection.Left => true,
+			DockDirection.Top => true,
+			DockDirection.Right => false,
+			DockDirection.Bottom => false,
+
+			DockDirection.OuterLeft => true,
+			DockDirection.OuterTop => true,
+			DockDirection.OuterRight => false,
+			DockDirection.OuterBottom => false,
+
+			DockDirection.EdgeLeft => true,
+			DockDirection.EdgeTop => true,
+			DockDirection.EdgeRight => false,
+			DockDirection.EdgeBottom => false,
+
+			_ => throw new ArgumentNullException(direction.ToString()),
+		};
+	}
+
+	public static Orientation ToOpposite(this Orientation orientation) => orientation switch
+	{
+		Orientation.Horizontal => Orientation.Vertical,
+		Orientation.Vertical => Orientation.Horizontal,
+
+		_ => throw new ArgumentOutOfRangeException(orientation.ToString()),
+	};
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockItem.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockItem.cs
new file mode 100644
index 000000000..48c6294d6
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockItem.cs
@@ -0,0 +1,59 @@
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+#else
+using Windows.UI.Xaml;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+public partial class DockItem : DependencyObject
+{
+	#region DependencyProperty: Header
+
+	public static DependencyProperty HeaderProperty { get; } = DependencyProperty.Register(
+		nameof(Header),
+		typeof(object),
+		typeof(DockItem),
+		new PropertyMetadata(default(object)));
+
+	public object Header
+	{
+		get => (object)GetValue(HeaderProperty);
+		set => SetValue(HeaderProperty, value);
+	}
+
+	#endregion
+	#region DependencyProperty: Title
+
+	public static DependencyProperty TitleProperty { get; } = DependencyProperty.Register(
+		nameof(Title),
+		typeof(object),
+		typeof(DockItem),
+		new PropertyMetadata(default(object)));
+
+	public object Title
+	{
+		get => (object)GetValue(TitleProperty);
+		set => SetValue(TitleProperty, value);
+	}
+
+	#endregion
+	#region DependencyProperty: Content
+
+	public static DependencyProperty ContentProperty { get; } = DependencyProperty.Register(
+		nameof(Content),
+		typeof(object),
+		typeof(DockItem),
+		new PropertyMetadata(default(object)));
+
+	public object Content
+	{
+		get => (object)GetValue(ContentProperty);
+		set => SetValue(ContentProperty, value);
+	}
+
+	#endregion
+}
+
+public partial class DocumentItem : DockItem{ }
+public partial class ToolItem : DockItem { }
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockPane.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockPane.cs
new file mode 100644
index 000000000..de8b23ffe
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockPane.cs
@@ -0,0 +1,754 @@
+#if HAS_UNO
+#define MANIPULATION_ABSOLUTE_COORD_ISSUE // https://github.com/unoplatform/uno/issues/6964
+#endif
+
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+using System.Collections;
+using System.ComponentModel;
+using System.Diagnostics;
+using System.Linq;
+using System.Reflection;
+using Uno.UI.Extensions;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+using Microsoft.UI;
+using Microsoft.UI.Xaml.Documents;
+using Microsoft.UI.Input;
+using Windows.Foundation;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Windows.UI.Core;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+// todo@xy: split into multiple files
+
+public partial class DockPane : Control
+{
+	protected DockControl? DockControl => this.FindFirstAncestor<DockControl>();
+
+	internal LayoutPane? ParentPane { get; set; }
+
+	internal LayoutPane? FindAncestor(Func<LayoutPane, bool> predicate)
+	{
+		return Hierarchy.Find(ParentPane, x => x.ParentPane, predicate);
+	}
+
+#if DEBUG
+	internal virtual object?[] GetLogicalMembers() => [];
+	internal virtual IEnumerable<string> GetDebugDescriptions()
+	{
+		if (this is not RootPane && Parent is Grid)
+		{
+			int c = Grid.GetColumn(this), cspan = Grid.GetColumnSpan(this),
+				r = Grid.GetRow(this), rspan = Grid.GetRowSpan(this);
+
+			yield return $"R{FormatRange(r, rspan)}C{FormatRange(c, cspan)}";
+			string FormatRange(int x, int span) => span > 1 ? $"{x}-{x + span - 1}" : $"{x}";
+		}
+
+		yield return $"ParentPane={ParentPane?.GetType().Name}";
+	}
+#endif
+}
+
+public partial class LayoutPane : DockPane, IEnumerable
+{
+	private record class CapturedManipulation(
+		int Lane, // Index of left/top-side pane.
+		Rect Rect, // Offset and Size for the handle area
+		Point StartingPosition // Starting position for this manipulation.
+	);
+
+	#region DependencyProperty: Orientation
+
+	public static DependencyProperty OrientationProperty { get; } = DependencyProperty.Register(
+		nameof(Orientation),
+		typeof(Orientation),
+		typeof(LayoutPane),
+		new PropertyMetadata(default(Orientation), OnOrientationChanged));
+
+	public Orientation Orientation
+	{
+		get => (Orientation)GetValue(OrientationProperty);
+		set => SetValue(OrientationProperty, value);
+	}
+
+	private static void OnOrientationChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) => (sender as LayoutPane)?.OnOrientationChanged(e);
+
+	#endregion
+
+	#region DependencyProperty: NestedPanes
+
+	public static DependencyProperty NestedPanesProperty { get; } = DependencyProperty.Register(
+		nameof(NestedPanes),
+		typeof(IList<DockPane>),
+		typeof(LayoutPane),
+		new PropertyMetadata(default(IList<DockPane>)));
+
+	public IList<DockPane> NestedPanes
+	{
+		get => (IList<DockPane>)GetValue(NestedPanesProperty);
+		set => SetValue(NestedPanesProperty, value);
+	}
+
+	#endregion
+
+	private ItemsControl? _nestedPanesHost;
+	private Border? _resizePreview;
+	private DockPaneItemsGrid? _itemsPanel;
+
+	private CapturedManipulation? _capturedManipulation;
+	private Point? _lastPointerPosition;
+
+	public LayoutPane()
+	{
+		var panes = new ObservableCollection<DockPane>();
+		panes.CollectionChanged += OnNestedPanesCollectionChanged;
+
+		NestedPanes = panes;
+	}
+	public LayoutPane(Orientation orientation) : this()
+	{
+		Orientation = orientation;
+	}
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		_nestedPanesHost = GetTemplateChild("NestedPanesHost") as ItemsControl;
+		_resizePreview = GetTemplateChild("ResizePreview") as Border;
+
+		if (_resizePreview is { })
+		{
+			_resizePreview.IsHitTestVisible = false;
+		}
+	}
+
+	public void OnItemsPanelPrepared(DockPaneItemsGrid panel)
+	{
+		Debug.WriteLine($"OnItemsPanelPrepared // {GetType().Name}");
+		if (_itemsPanel == panel)
+		{
+			// OnItemsPanelPrepared will be called twice from .Loaded.
+			// This avoid an unnecessary call, and duplicated event registration.
+			return;
+		}
+
+		_itemsPanel = panel;
+		if (_itemsPanel is { })
+		{
+			if (_itemsPanel.Background is null)
+			{
+				// ensure there is a background, so we can receive the manipulation events.
+				_itemsPanel.Background = new SolidColorBrush(Colors.Transparent);
+			}
+
+			_itemsPanel.PointerPressed += OnItemsPanelPointerPressed;
+			_itemsPanel.ManipulationStarted += OnItemsPanelManipulationStarted;
+			_itemsPanel.ManipulationDelta += OnItemsPanelManipulationDelta;
+			_itemsPanel.ManipulationCompleted += OnItemsPanelManipulationCompleted;
+		}
+
+		UpdateManipulationMode();
+		UpdateChildrenLayout();
+	}
+
+	private void OnNestedPanesCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+	{
+		Debug.WriteLine($"OnNestedPanesCollectionChanged: {e.Action}");
+
+		UpdateParentPane();
+		UpdateInpactedChildrenLayout();
+
+		void UpdateParentPane()
+		{
+			if (e.NewItems is { })
+			{
+				foreach (var item in e.NewItems)
+				{
+					if (item is DockPane pane)
+					{
+						if (pane.ParentPane is not null)
+						{
+							throw new InvalidOperationException("DockPane is added under another LayoutPane, before being removed from previous parent.");
+						}
+						pane.ParentPane = this;
+					}
+				}
+			}
+			if (e.OldItems is { })
+			{
+				foreach (var item in e.OldItems)
+				{
+					if (item is DockPane pane)
+					{
+						pane.ParentPane = null;
+					}
+				}
+			}
+		}
+		void UpdateInpactedChildrenLayout()
+		{
+			if (_itemsPanel is null) return;
+
+			var oneStar = new GridLength(1, GridUnitType.Star);
+			if (e.Action is NotifyCollectionChangedAction.Add)
+			{
+				for (int i = 0; i < e.NewItems!.Count; i++)
+				{
+					if (e.NewItems[i] is not DockPane pane) throw new InvalidOperationException($"Non DockPane child inserted: {e.NewItems[i]?.GetType().Name}");
+
+					if (Orientation is Orientation.Horizontal)
+					{
+						_itemsPanel.ColumnDefinitions.Insert(e.NewStartingIndex + i, new ColumnDefinition { Width = oneStar });
+						Grid.SetColumn(pane, e.NewStartingIndex + i);
+					}
+					else
+					{
+						_itemsPanel.RowDefinitions.Insert(e.NewStartingIndex + i, new RowDefinition { Height = oneStar });
+						Grid.SetRow(pane, e.NewStartingIndex + i);
+					}
+				}
+				RepairTailIndex(e.NewStartingIndex + e.NewItems.Count);
+			}
+			else if (e.Action is NotifyCollectionChangedAction.Remove)
+			{
+				for (int i = 0; i < e.OldItems!.Count; i++)
+				{
+					if (e.OldItems[i] is not DockPane pane) throw new InvalidOperationException($"Non DockPane child inserted: {e.OldItems[i]?.GetType().Name}");
+
+					if (Orientation is Orientation.Horizontal)
+					{
+						_itemsPanel.ColumnDefinitions.RemoveAt(e.OldStartingIndex + i);
+						Grid.SetColumn(pane, 0);
+					}
+					else
+					{
+						_itemsPanel.RowDefinitions.RemoveAt(e.OldStartingIndex + i);
+						Grid.SetRow(pane, 0);
+					}
+				}
+				RepairTailIndex(e.OldStartingIndex); // dont add Count here
+			}
+			else if (e.Action is NotifyCollectionChangedAction.Reset)
+			{
+				UpdateChildrenLayout();
+			}
+			else
+			{
+				throw new NotImplementedException($"OnNestedPanesCollectionChanged: {e.Action}");
+			}
+		}
+		void RepairTailIndex(int start)
+		{
+			for (int i = start; i < NestedPanes.Count; i++)
+			{
+				if (Orientation is Orientation.Horizontal)
+				{
+					Grid.SetColumn(NestedPanes[i], i);
+				}
+				else
+				{
+					Grid.SetRow(NestedPanes[i], i);
+				}
+			}
+		}
+	}
+
+	private void OnOrientationChanged(DependencyPropertyChangedEventArgs e)
+	{
+		UpdateManipulationMode();
+		UpdateChildrenLayout();
+	}
+
+
+	private void OnItemsPanelPointerPressed(object sender, PointerRoutedEventArgs e)
+	{
+		_lastPointerPosition = e.GetCurrentPoint(this).Position;
+	}
+	protected void OnItemsPanelManipulationStarted(object? sender, ManipulationStartedRoutedEventArgs e)
+	{
+		//Debug.WriteLine($"OnManipulationStarted: hash={e.GetHashCode():X8}, Container={e.Container.GetType().Name}, Source={e.OriginalSource.GetType().Name} // {GetType().Name}");
+		_capturedManipulation = null;
+
+		if (_itemsPanel == null) return;
+		if (sender is not DockPaneItemsGrid panel) return;
+
+		// 1. ManipulationStarted: Block bubbling with `e.Handled = true`. This is so that, in step-2, we don't complete LayoutPane-B event from LayoutPane-A.
+		e.Handled = true;
+		if (panel != _itemsPanel) return;
+
+		var p = CoreWindow.GetForCurrentThread()?.PointerPosition;
+
+		// for all manipulation events: // tested for Manipulation(Started|Delta|Completed)
+		// - uno: Source=[top level UIElement CURRENTLY under cursor)], Container=[always ItemsPanel]
+		//		^ live, based from cursor placement when the event is raised, not locked to starting location
+		// - win: Source=[always ItemsPanel], Container=**ERRATIC**[based on STARTING click: ItemsPanel if clicked on UIElement above ItemsPanel, otherwise null]
+		//		^ for the entire event chain, the properties stay the same from where the starting click happens.
+		// ^ It would be easier to extract from the pointer position... Plus, we will need to calculate rect of "GridSplitter" anyways.
+
+		// There are some descrepencies between with the Manipulate events' e.Position:
+		// - win: cursor position in sender's coordinate space
+		//		^ alternate between sender-relative coords and app-absolute coords somehow, despite everything...
+		// - uno: cursor position in the app's coordinate space (same as skia, except app always sits at 0.0)
+		// - uno-skia: cursor position in the combined screens' coordinate space (absolute of absolute)
+		// So, we are using the last recorded pointer position from PointerPressed, since that one is consistent AND always in local coords.
+
+		var position = _lastPointerPosition ?? e.Position;
+		var capture = CaptureManipulation(position);
+		//Debug.WriteLine($"OnManipulationStarted: position={position}, capture={capture} // {GetType().Name}");
+		if (capture is { })
+		{
+			_capturedManipulation = capture;
+
+			if (_resizePreview is { })
+			{
+				_resizePreview.Margin = new Thickness(
+					_capturedManipulation.Rect.X,
+					_capturedManipulation.Rect.Y,
+					0,
+					0
+				);
+				_resizePreview.Width = capture.Rect.Width;
+				_resizePreview.Height = capture.Rect.Height;
+				_resizePreview.Visibility = Visibility.Visible;
+			}
+		}
+		else
+		{
+			// 2. ManipulationStarted: Prematurely `e.Complete()` events that doesn't start in the Grid row/column-spacing.
+			// On Uno, OriginalSource and Container are always re-calculated from current cursor location.
+			// Unlike, on windows, where they are locked to the starting click.
+			// Because of this, ManipulationStarted is the only place where we can determine the starting point...
+			e.Complete();
+		}
+		//Debug.WriteLine(capture is { } ? "accepted" : "refused");
+	}
+	protected void OnItemsPanelManipulationDelta(object? sender, ManipulationDeltaRoutedEventArgs e)
+	{
+		if (_itemsPanel == null) return;
+
+		e.Handled = true;
+		if (sender as DockPaneItemsGrid != _itemsPanel) return;
+		if (_capturedManipulation is null) return;
+
+		//Debug.WriteLine($"OnManipulationDelta: Container={e.Container?.GetType().Name}, Source={e.OriginalSource?.GetType().Name} // {GetType().Name}");
+		//Debug.WriteLine($"OnManipulationDelta: p0={e.Position.Subtract(e.Cumulative.Translation)}, et={e.Cumulative.Translation}, dt={e.Delta.Translation} // {GetType().Name}");
+		//Debug.WriteLine($"OnManipulationDelta: et={e.Cumulative.Translation}, p={CorrectManipulationPosition(e.Position)} // {GetType().Name}");
+
+		if (_resizePreview is { })
+		{
+			_resizePreview.Margin = new Thickness(
+				_capturedManipulation.Rect.X + e.Cumulative.Translation.X,
+				_capturedManipulation.Rect.Y + e.Cumulative.Translation.Y,
+				0,
+				0
+			);
+			_resizePreview.Visibility = Visibility.Visible;
+		}
+	}
+	protected void OnItemsPanelManipulationCompleted(object? sender, ManipulationCompletedRoutedEventArgs e)
+	{
+		if (_itemsPanel == null) return;
+
+		e.Handled = true;
+		if (sender as DockPaneItemsGrid != _itemsPanel) return;
+		if (_capturedManipulation is null) return;
+
+		//Debug.WriteLine($"OnItemsPanelManipulationCompleted: Container={e.Container?.GetType().Name}, Source={e.OriginalSource?.GetType().Name} // {GetType().Name}");
+		//Debug.WriteLine($"OnManipulationCompleted: et={e.Cumulative.Translation}, p={CorrectManipulationPosition(e.Position)} // {GetType().Name}");
+
+		// todo@xy: add safeguard against column mutation since ManipulationStarted
+
+		if (Orientation is Orientation.Horizontal)
+		{
+			var left = _itemsPanel.ColumnDefinitions[_capturedManipulation.Lane];
+			var right = _itemsPanel.ColumnDefinitions[_capturedManipulation.Lane + 1];
+
+			if (left.Width.IsAuto || left.Width.IsAbsolute) throw new NotImplementedException();
+			if (right.Width.IsAuto || right.Width.IsAbsolute) throw new NotImplementedException();
+
+			var targetLeftWidth = Math.Clamp(left.ActualWidth + e.Cumulative.Translation.X, 0, left.ActualWidth + right.ActualWidth);
+			var totalWidth = left.ActualWidth + right.ActualWidth;
+			var totalStarValue = left.Width.Value + right.Width.Value;
+
+			var targetLeftStarValue = targetLeftWidth / totalWidth * totalStarValue;
+			var targetRightStarValue = totalStarValue - targetLeftStarValue;
+
+			left.Width = new GridLength(targetLeftStarValue, GridUnitType.Star);
+			right.Width = new GridLength(targetRightStarValue, GridUnitType.Star);
+		}
+		else
+		{
+			var up = _itemsPanel.RowDefinitions[_capturedManipulation.Lane];
+			var down = _itemsPanel.RowDefinitions[_capturedManipulation.Lane + 1];
+
+			if (up.Height.IsAuto || up.Height.IsAbsolute) throw new NotImplementedException();
+			if (down.Height.IsAuto || down.Height.IsAbsolute) throw new NotImplementedException();
+
+			var targetLeftHeight = Math.Clamp(up.ActualHeight + e.Cumulative.Translation.Y, 0, up.ActualHeight + down.ActualHeight);
+			var totalHeight = up.ActualHeight + down.ActualHeight;
+			var totalStarValue = up.Height.Value + down.Height.Value;
+
+			var targetUpStarValue = targetLeftHeight / totalHeight * totalStarValue;
+			var targetDownStarValue = totalStarValue - targetUpStarValue;
+
+			up.Height = new GridLength(targetUpStarValue, GridUnitType.Star);
+			down.Height = new GridLength(targetDownStarValue, GridUnitType.Star);
+		}
+
+		if (_resizePreview is { })
+		{
+			_resizePreview.Margin = default;
+			_resizePreview.Width = 0;
+			_resizePreview.Height = 0;
+			_resizePreview.Visibility = Visibility.Collapsed;
+		}
+	}
+
+	private void UpdateChildrenLayout()
+	{
+		if (_itemsPanel is null) return;
+
+		_itemsPanel.RowDefinitions.Clear();
+		_itemsPanel.ColumnDefinitions.Clear();
+
+		var oneStar = new GridLength(1, GridUnitType.Star);
+		foreach (var item in NestedPanes)
+		{
+			if (Orientation is Orientation.Horizontal)
+			{
+				_itemsPanel.ColumnDefinitions.Add(new ColumnDefinition { Width = oneStar });
+				Grid.SetColumn(item, _itemsPanel.ColumnDefinitions.Count - 1);
+			}
+			else
+			{
+				_itemsPanel.RowDefinitions.Add(new RowDefinition { Height = oneStar });
+				Grid.SetRow(item, _itemsPanel.RowDefinitions.Count - 1);
+			}
+		}
+	}
+	private void UpdateManipulationMode()
+	{
+		if (_itemsPanel is null) return;
+
+		_itemsPanel.ManipulationMode = Orientation == Orientation.Horizontal
+			? ManipulationModes.TranslateX | ManipulationModes.TranslateRailsX
+			: ManipulationModes.TranslateY | ManipulationModes.TranslateRailsY;
+	}
+
+	public void Add(DockPane pane)
+	{
+		NestedPanes.Add(pane);
+	}
+
+	private CapturedManipulation? CaptureManipulation(Point position)
+	{
+		if (_itemsPanel is null) return null;
+		if (NestedPanes.Count < 1) return null;
+
+		var lanes = NestedPanes
+			.ZipSkipOne((a, b) => Orientation == Orientation.Horizontal
+				? RectExtensions.FromLTRB(
+					a.ActualOffset.X + a.ActualWidth,
+					a.ActualOffset.Y,
+					b.ActualOffset.X,
+					b.ActualOffset.Y + b.ActualHeight)
+				: RectExtensions.FromLTRB(
+					a.ActualOffset.X,
+					a.ActualOffset.Y + a.ActualHeight,
+					b.ActualOffset.X + b.ActualWidth,
+					b.ActualOffset.Y)
+			)
+			.Select((x, i) => new { Index = i, Rect = x, IsMatch = x.Contains(position) });
+		if (lanes.FirstOrDefault(x => x.IsMatch) is not { } matched) return null;
+
+		return new CapturedManipulation(matched.Index, matched.Rect, position);
+	}
+
+	IEnumerator IEnumerable.GetEnumerator() => NestedPanes.GetEnumerator();
+
+#if DEBUG
+	internal override IEnumerable<string> GetDebugDescriptions()
+	{
+		foreach (var line in base.GetDebugDescriptions())
+		{
+			yield return line;
+		}
+
+		yield return $"Orientation={Orientation}";
+		if (_itemsPanel is { } g)
+		{
+			if (g.ColumnDefinitions is { Count: > 0 } columns)
+			{
+				yield return $"Columns={string.Join(',', columns.Select(PrettyPrint.FormatGridDefinition))}";
+			}
+			if (g.RowDefinitions is { Count: > 0 } rows)
+			{
+				yield return $"Rows={string.Join(',', rows.Select(PrettyPrint.FormatGridDefinition))}";
+			}
+		}
+	}
+	internal override object?[] GetLogicalMembers() => NestedPanes.ToArray();
+#endif
+}
+public partial class RootPane : LayoutPane // todo@xy: should we merge this into DockControl?
+{
+	private AnchoredPane? _leftAnchoredPane;
+	private AnchoredPane? _topAnchoredPane;
+	private AnchoredPane? _rightAnchoredPane;
+	private AnchoredPane? _bottomAnchoredPane;
+
+	public RootPane()
+	{
+		Orientation = Orientation.Vertical;
+
+		PopulateNestedPanes();
+	}
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		_leftAnchoredPane = GetTemplateChild("LeftAnchoredPane") as AnchoredPane;
+		_topAnchoredPane = GetTemplateChild("TopAnchoredPane") as AnchoredPane;
+		_rightAnchoredPane = GetTemplateChild("RightAnchoredPane") as AnchoredPane;
+		_bottomAnchoredPane = GetTemplateChild("BottomAnchoredPane") as AnchoredPane;
+
+		//PopulateNestedPanes();
+	}
+	internal /*private*/ void PopulateNestedPanes()
+	{
+
+		NestedPanes.Clear();
+		NestedPanes.Add(new EditorPane()
+		{
+			new DocumentPane()
+			{
+				CreateDocumentItem(1),
+				CreateDocumentItem(2),
+				CreateDocumentItem(3),
+				CreateToolItem(4),
+			}
+		});
+		NestedPanes.Add(new LayoutPane(Orientation.Horizontal)
+		{
+			new ToolPane()
+			{
+				CreateToolItem(5),
+			},
+			new ToolPane()
+			{
+				CreateToolItem(6),
+			},
+		});
+
+		DocumentItem CreateDocumentItem(int i) => new DocumentItem { Header = $"asd-{i}.cs", Content = $"content: asdasd-{i}" };
+		ToolItem CreateToolItem(int i) => new ToolItem { Header = $"tool-{i}", Title = $"Tool-{i} Window", Content = $"content: tool-{i}" };
+	}
+
+#if DEBUG
+	internal override object?[] GetLogicalMembers() => NestedPanes.Concat([_leftAnchoredPane, _topAnchoredPane, _rightAnchoredPane, _bottomAnchoredPane]).ToArray();
+#endif
+}
+public partial class EditorPane : LayoutPane
+{
+	public bool IsOrientationLocked => NestedPanes.Count > 1;
+}
+
+public partial class AnchoredPane : DockPane // non-pinned pane, once pinned it should convert to tool pane
+{
+	#region DependencyProperty: Direction
+
+	public static DependencyProperty DirectionProperty { get; } = DependencyProperty.Register(
+		nameof(Direction),
+		typeof(DockDirection),
+		typeof(AnchoredPane),
+		new PropertyMetadata(DockDirection.Left, OnDirectionChanged));
+
+	public DockDirection Direction
+	{
+		get => (DockDirection)GetValue(DirectionProperty);
+		set => SetValue(DirectionProperty, value);
+	}
+
+	#endregion
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		OnDirectionChanged();
+	}
+
+	private static void OnDirectionChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) => (sender as AnchoredPane)?.OnDirectionChanged();
+	private void OnDirectionChanged()
+	{
+		return;
+		if (Direction is DockDirection.Top or DockDirection.Bottom)
+		{
+			Width = double.NaN;
+			Height = 5;
+		}
+		else
+		{
+			Width = 5;
+			Height = double.NaN;
+		}
+	}
+}
+public partial class PreviewPane : DockPane { }
+public abstract partial class ElementPane : DockPane, IEnumerable
+{
+	public DockItem? SelectedItem  => _tabView?.SelectedItem as DockItem;
+	public IEnumerable<DockItem> Items => _items;
+
+	public int ElementCount => _items.Count;
+
+	private TabView? _tabView;
+
+	private ObservableCollection<DockItem> _items;
+
+	public ElementPane()
+	{
+		_items = new ObservableCollection<DockItem>();
+
+		AllowDrop = true;
+	}
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		_tabView = GetTemplateChild("TabView") as TabView;
+		if (_tabView is { })
+		{
+			_tabView.TabCloseRequested += (s, e) => DockControl?.OnItemCloseRequested(this, e);
+			_tabView.TabDragStarting += (s, e) => DockControl?.OnItemDragStarting(this, e);
+			_tabView.TabDragCompleted += (s, e) => DockControl?.OnItemDropCompleted(this, e);
+			_tabView.TabDroppedOutside += (s, e) => DockControl?.OnItemDroppedOutside(this, e);
+
+			_tabView.CanReorderTabs = true;
+			_tabView.CanDragTabs = true;
+			_tabView.TabItemsSource = _items;
+		}
+	}
+
+	protected override void OnDragEnter(DragEventArgs e)
+	{
+		base.OnDragEnter(e);
+		DockControl?.OnPaneDropEnter(this, e);
+	}
+	protected override void OnDragLeave(DragEventArgs e)
+	{
+		base.OnDragLeave(e);
+		DockControl?.OnPaneDropLeave(this, e);
+	}
+	protected override void OnDrop(DragEventArgs e)
+	{
+		base.OnDrop(e);
+		DockControl?.OnPaneDrop(this, e);
+	}
+
+	public void Add(DockItem item)
+	{
+		_items.Add(item);
+		if (_tabView is { })
+		{
+			_tabView.SelectedItem = item;
+		}
+	}
+	public void AddRange(IEnumerable<DockItem> items)
+	{
+		foreach (var item in items)
+		{
+			_items.Add(item);
+		}
+		if (_tabView is { })
+		{
+			_tabView.SelectedItem = _items[^1];
+		}
+	}
+	public bool Remove(DockItem item)
+	{
+		if (!_items.Remove(item)) return false;
+
+		if (_tabView is { } && _items.LastOrDefault() is { } last)
+		{
+			_tabView.SelectedItem = last;
+		}
+
+		return true;
+	}
+	public void ClearItems()
+	{
+		_items.Clear();
+	}
+
+	protected internal abstract bool CanAcceptDrop(object data);
+
+	internal void RepairTabView()
+	{
+		if (_tabView is null) return;
+
+		var index = _tabView.SelectedIndex;
+
+		_tabView.TabItemsSource = null;
+		_tabView.TabItemsSource = _items;
+
+		_tabView.SelectedIndex = index;
+	}
+	
+	IEnumerator IEnumerable.GetEnumerator() => _items.GetEnumerator();
+
+#if DEBUG
+	internal override object?[] GetLogicalMembers() => _items.ToArray();
+#endif
+}
+
+public partial class DocumentPane : ElementPane
+{
+	protected internal override bool CanAcceptDrop(object data)
+	{
+		return data is DocumentItem or ToolItem;
+	}
+}
+public partial class ToolPane : ElementPane
+{
+	private Grid? _titleBarContainer;
+	private Button? _closePaneButton;
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		_titleBarContainer = GetTemplateChild("TitleBarContainer") as Grid;
+		_closePaneButton = GetTemplateChild("ClosePaneButton") as Button;
+
+		if (_titleBarContainer is { })
+		{
+			_titleBarContainer.CanDrag = true;
+			_titleBarContainer.DragStarting += (s, e) => DockControl?.OnPaneDragStarting(this, e);
+			_titleBarContainer.DropCompleted += (s, e) => DockControl?.OnPaneDropCompleted(this, e);
+		}
+		if (_closePaneButton is { })
+		{
+			_closePaneButton.Click += (s, e) => DockControl?.OnPaneCloseRequested(this, e);
+		}
+	}
+
+	protected internal override bool CanAcceptDrop(object data)
+	{
+		return data is ToolItem;
+	}
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockTabListView.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockTabListView.cs
new file mode 100644
index 000000000..df0b81b2e
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockTabListView.cs
@@ -0,0 +1,19 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+public partial class DockTabListView : ListView
+{
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockTabView.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockTabView.cs
new file mode 100644
index 000000000..ab4e80c31
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockTabView.cs
@@ -0,0 +1,55 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+public enum DockTabDirection
+{
+	Left, Top, Right, Bottom,
+}
+
+public partial class DockTabView : TabView
+{
+
+	#region DependencyProperty: TabDirection
+
+	public static DependencyProperty TabDirectionProperty { get; } = DependencyProperty.Register(
+		nameof(TabDirection),
+		typeof(DockTabDirection),
+		typeof(DockTabView),
+		new PropertyMetadata(default(DockTabDirection), OnTabDirectionChanged));
+
+	public DockTabDirection TabDirection
+	{
+		get => (DockTabDirection)GetValue(TabDirectionProperty);
+		set => SetValue(TabDirectionProperty, value);
+	}
+
+	private static void OnTabDirectionChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e) => (sender as DockTabView)?.OnTabDirectionChanged(e);
+	#endregion
+
+	private void OnTabDirectionChanged(DependencyPropertyChangedEventArgs e)
+	{
+		UpdateTabDirection();
+	}
+
+	private void UpdateTabDirection()
+	{
+		var state = TabDirection switch
+		{
+			_ => "",
+		};
+		VisualStateManager.GoToState(this, state, useTransitions: IsLoaded);
+	}
+}
diff --git a/src/Uno.Toolkit.UI/Controls/DockControl/DockingDiamond.cs b/src/Uno.Toolkit.UI/Controls/DockControl/DockingDiamond.cs
new file mode 100644
index 000000000..ffd6ba191
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Controls/DockControl/DockingDiamond.cs
@@ -0,0 +1,197 @@
+using System;
+using Windows.Foundation;
+using Uno.UI.Extensions;
+using System.Diagnostics;
+
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Input;
+using Microsoft.UI.Xaml.Media;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+#endif
+
+namespace Uno.Toolkit.UI;
+
+public partial class DockingDiamond : Control
+{
+	private static class OuterStates
+	{
+		public const string OuterNonAvailableState = nameof(OuterNonAvailableState);
+		public const string OuterAvailableState = nameof(OuterAvailableState);
+	}
+	private static class DirectionalStates
+	{
+		public const string Omnidirectional = nameof(Omnidirectional);
+		public const string HBidirectional = nameof(HBidirectional);
+		public const string VBidirectional = nameof(VBidirectional);
+	}
+
+	protected DockControl? DockControl => this.FindFirstAncestor<DockControl>();
+
+	private Grid? _rootGrid;
+	private Border? _overlayBorder;
+
+	private DockDiamondIndicator? _centerIndicator;
+	private DockDiamondIndicator? _leftIndicator, _topIndicator, _rightIndicator, _bottomIndicator;
+	private DockDiamondIndicator? _outerLeftIndicator, _outerTopIndicator, _outerRightIndicator, _outerBottomIndicator;
+	//private DockDiamondIndicator? _edgeLeftIndicator, _edgeTopIndicator, _edgeRightIndicator, _edgeBottomIndicator;
+
+	private Rect? _lastPlacementRect;
+	internal DockDirection Direction { get; private set; }
+
+	protected override void OnApplyTemplate()
+	{
+		base.OnApplyTemplate();
+
+		_rootGrid = GetTemplateChild("RootGrid") as Grid;
+		_overlayBorder = GetTemplateChild("OverlayBorder") as Border;
+
+		ResolveAndRegisterIndicator(ref _centerIndicator, "DockCenterIndicator", DockDirection.None);
+
+		ResolveAndRegisterIndicator(ref _leftIndicator, "DockLeftIndicator", DockDirection.Left);
+		ResolveAndRegisterIndicator(ref _topIndicator, "DockTopIndicator", DockDirection.Top);
+		ResolveAndRegisterIndicator(ref _rightIndicator, "DockRightIndicator", DockDirection.Right);
+		ResolveAndRegisterIndicator(ref _bottomIndicator, "DockBottomIndicator", DockDirection.Bottom);
+
+		ResolveAndRegisterIndicator(ref _outerLeftIndicator, "DockOuterLeftIndicator", DockDirection.OuterLeft);
+		ResolveAndRegisterIndicator(ref _outerTopIndicator, "DockOuterTopIndicator", DockDirection.OuterTop);
+		ResolveAndRegisterIndicator(ref _outerRightIndicator, "DockOuterRightIndicator", DockDirection.OuterRight);
+		ResolveAndRegisterIndicator(ref _outerBottomIndicator, "DockOuterBottomIndicator", DockDirection.OuterBottom);
+
+		//ResolveAndRegisterIndicator(ref _edgeLeftIndicator, "DockEdgeLeftIndicator", DockDirection.EdgeLeft);
+		//ResolveAndRegisterIndicator(ref _edgeTopIndicator, "DockEdgeTopIndicator", DockDirection.EdgeTop);
+		//ResolveAndRegisterIndicator(ref _edgeRightIndicator, "DockEdgeRightIndicator", DockDirection.EdgeRight);
+		//ResolveAndRegisterIndicator(ref _edgeBottomIndicator, "DockEdgeBottomIndicator", DockDirection.EdgeBottom);
+
+		void ResolveAndRegisterIndicator(ref DockDiamondIndicator? indicator, string partName, DockDirection direction)
+		{
+			indicator = GetTemplateChild(partName) as DockDiamondIndicator;
+			if (indicator is { })
+			{
+				indicator.Tag = direction;
+
+				// note: avoid using drag events here, since that would cause DragLeave on the DockPane.
+				// We can get by with just pointer events here.
+				indicator.PointerEntered += OnIndicatorPointerEntered;
+				indicator.PointerExited += OnIndicatorPointerExited;
+			}
+		}
+	}
+
+	private void OnIndicatorPointerEntered(object sender, PointerRoutedEventArgs e)
+	{
+		if (_lastPlacementRect is { } rect)
+		{
+			var direction = (sender as DockDiamondIndicator)?.Tag as DockDirection? ?? DockDirection.None;
+
+			ShowAt(rect, direction);
+		}
+	}
+
+	private void OnIndicatorPointerExited(object sender, PointerRoutedEventArgs e)
+	{
+		if (_lastPlacementRect is { } rect)
+		{
+			ShowAt(rect, DockDirection.None);
+		}
+	}
+
+	public void ShowAt(ElementPane pane, DockItem? item)
+	{
+		Visibility = Visibility.Visible;
+
+		var offset = pane.TransformToVisual(this).TransformPoint(default);
+		var size = pane.GetActualSize();
+		_lastPlacementRect = new Rect(offset, size);
+
+		var directionalState = pane.ParentPane switch
+		{
+			EditorPane { IsOrientationLocked: true, Orientation: Orientation.Horizontal } => DirectionalStates.HBidirectional,
+			EditorPane { IsOrientationLocked: true, Orientation: Orientation.Vertical } => DirectionalStates.VBidirectional,
+
+			_ => DirectionalStates.Omnidirectional,
+		};
+		var outerState = pane is DocumentPane && item is ToolItem
+			? OuterStates.OuterAvailableState
+			: OuterStates.OuterNonAvailableState;
+
+		VisualStateManager.GoToState(this, directionalState, useTransitions: IsLoaded);
+		VisualStateManager.GoToState(this, outerState, useTransitions: IsLoaded);
+
+		ShowAt(_lastPlacementRect.Value, DockDirection.None);
+	}
+	private void ShowAt(Rect rect, DockDirection direction)
+	{
+		Direction = direction;
+		Debug.WriteLine($"{direction}");
+
+		if (_rootGrid is null) return;
+		if (_overlayBorder is null) return;
+
+		_rootGrid.ColumnDefinitions[0].Width = new(rect.X);
+		_rootGrid.ColumnDefinitions[1].Width = new(rect.Width);
+		_rootGrid.RowDefinitions[0].Height = new(rect.Y);
+		_rootGrid.RowDefinitions[1].Height = new(rect.Height);
+
+		var overlayRect = ((HorizontalAlignment HAlign, VerticalAlignment VAlign, double Width, double Height))(direction switch
+		{
+			DockDirection.None => (HorizontalAlignment.Stretch, VerticalAlignment.Stretch, double.NaN, double.NaN),
+
+			DockDirection.Left => (HorizontalAlignment.Left, VerticalAlignment.Stretch, rect.Width / 2, double.NaN),
+			DockDirection.Right => (HorizontalAlignment.Right, VerticalAlignment.Stretch, rect.Width / 2, double.NaN),
+			DockDirection.Top => (HorizontalAlignment.Stretch, VerticalAlignment.Top, double.NaN, rect.Height / 2),
+			DockDirection.Bottom => (HorizontalAlignment.Stretch, VerticalAlignment.Bottom, double.NaN, rect.Height / 2),
+
+			DockDirection.OuterLeft => (HorizontalAlignment.Left, VerticalAlignment.Stretch, rect.Width / 2, double.NaN),
+			DockDirection.OuterRight => (HorizontalAlignment.Right, VerticalAlignment.Stretch, rect.Width / 2, double.NaN),
+			DockDirection.OuterTop => (HorizontalAlignment.Stretch, VerticalAlignment.Top, double.NaN, rect.Height / 2),
+			DockDirection.OuterBottom => (HorizontalAlignment.Stretch, VerticalAlignment.Bottom, double.NaN, rect.Height / 2),
+
+#if DEBUG
+			_ => throw new ArgumentOutOfRangeException($"DockDirection: {direction}"),
+#else
+			_ => (HorizontalAlignment.Stretch, VerticalAlignment.Stretch, double.NaN, double.NaN),
+#endif
+		});
+
+		_overlayBorder.HorizontalAlignment = overlayRect.HAlign;
+		_overlayBorder.VerticalAlignment = overlayRect.VAlign;
+		_overlayBorder.Width = overlayRect.Width;
+		_overlayBorder.Height = overlayRect.Height;
+	}
+
+	public void Hide()
+	{
+		Visibility = Visibility.Collapsed;
+
+		_lastPlacementRect = null;
+	}
+}
+public partial class DockDiamondIndicator : Control
+{
+	#region DependencyProperty: Data
+
+	public static DependencyProperty DataProperty { get; } = DependencyProperty.Register(
+		nameof(Data),
+		typeof(Geometry),
+		typeof(DockDiamondIndicator),
+		new PropertyMetadata(default(Geometry)));
+
+	public Geometry Data
+	{
+		get => (Geometry)GetValue(DataProperty);
+		set => SetValue(DataProperty, value);
+	}
+
+	#endregion
+
+	public DockDiamondIndicator()
+	{
+	}
+}
diff --git a/src/Uno.Toolkit.UI/Extensions/EnumerableExtensions.cs b/src/Uno.Toolkit.UI/Extensions/EnumerableExtensions.cs
index 6c479fb11..cf909c1c7 100644
--- a/src/Uno.Toolkit.UI/Extensions/EnumerableExtensions.cs
+++ b/src/Uno.Toolkit.UI/Extensions/EnumerableExtensions.cs
@@ -22,6 +22,18 @@ internal static class EnumerableExtensions
 			previous = etor.Current;
 		}
 	}
+	public static IEnumerable<TResult> ZipSkipOne<T, TResult>(this IEnumerable<T> source, Func<T, T, TResult> resultSelector)
+	{
+		var etor = source.GetEnumerator();
+		etor.MoveNext();
+
+		var previous = etor.Current;
+		while (etor.MoveNext())
+		{
+			yield return resultSelector(previous, etor.Current);
+			previous = etor.Current;
+		}
+	}
 
 	/// <summary>
 	/// Functionally the same as <seealso cref="Enumerable.FirstOrDefault{TSource}(IEnumerable{TSource})"/>,
@@ -92,4 +104,9 @@ public static Dictionary<TKey, TValue> ToDictionarySafe<T, TKey, TValue>(this IE
 
 		return dict;
 	}
+
+	public static IEnumerable<T> TrimNull<T>(this IEnumerable<T?> source) where T : notnull
+	{
+		return source.OfType<T>();
+	}
 }
diff --git a/src/Uno.Toolkit.UI/Extensions/FrameworkElementExtensions.cs b/src/Uno.Toolkit.UI/Extensions/FrameworkElementExtensions.cs
index 776d1f03d..c3c933cbf 100644
--- a/src/Uno.Toolkit.UI/Extensions/FrameworkElementExtensions.cs
+++ b/src/Uno.Toolkit.UI/Extensions/FrameworkElementExtensions.cs
@@ -3,6 +3,9 @@
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using Windows.Foundation;
+using Uno.UI.Extensions;
+
 
 #if IS_WINUI
 using Microsoft.UI.Xaml;
@@ -25,5 +28,24 @@ public static void InheritDataContextFrom(this FrameworkElement fe, FrameworkEle
 				Mode = BindingMode.OneWay,
 			});
 		}
+
+		public static Size GetActualSize(this FrameworkElement fe) => new Size(fe.ActualWidth, fe.ActualHeight);
+
+		public static void WhenLoaded(this FrameworkElement fe, Action action)
+		{
+			if (fe.IsLoaded)
+			{
+				action();
+			}
+			else
+			{
+				fe.Loaded += OnLoaded;
+				void OnLoaded(object sender, RoutedEventArgs e)
+				{
+					action();
+					fe.Loaded -= OnLoaded;
+				}
+			}
+		}
 	}
 }
diff --git a/src/Uno.Toolkit.UI/Extensions/RectExtensions.cs b/src/Uno.Toolkit.UI/Extensions/RectExtensions.cs
index ece1dd628..55c304e79 100644
--- a/src/Uno.Toolkit.UI/Extensions/RectExtensions.cs
+++ b/src/Uno.Toolkit.UI/Extensions/RectExtensions.cs
@@ -25,5 +25,11 @@ internal static class RectExtensions
 			x.Width + (value.Left + value.Right),
 			x.Height + (value.Top + value.Bottom)
 		);
+
+		public static Rect FromLTRB(double left, double top, double right, double bottom) => new Rect(left, top, right - left, bottom - top);
+
+		public static bool Contains(this Rect rect, Point p) =>
+			rect.Left <= p.X && p.X <= rect.Right &&
+			rect.Top <= p.Y && p.Y <= rect.Bottom;
 	}
 }
diff --git a/src/Uno.Toolkit.UI/Helpers/Hierarchy.cs b/src/Uno.Toolkit.UI/Helpers/Hierarchy.cs
new file mode 100644
index 000000000..090b79e3f
--- /dev/null
+++ b/src/Uno.Toolkit.UI/Helpers/Hierarchy.cs
@@ -0,0 +1,34 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Uno.Toolkit.UI;
+
+internal static class Hierarchy
+{
+	public static IEnumerable<T> Walk<T>(T? current, Func<T, T?> walk)
+	{
+		for (; current != null; current = walk(current))
+			yield return current;
+	}
+	public static IEnumerable<T> Walk<T>(T? current, Func<T, IEnumerable<T>?> walk)
+	{
+		if (current == null) yield break;
+
+		yield return current;
+		foreach (var child in walk(current) ?? Enumerable.Empty<T>())
+		{
+			foreach (var item in Walk(child, walk))
+			{
+				yield return item;
+			}
+		}
+	}
+
+	public static T? Find<T>(T? current, Func<T, T?> walk, Func<T, bool> predicate)
+	{
+		return Walk(current, walk).FirstOrDefault(predicate);
+	}
+}
diff --git a/src/Uno.Toolkit.UI/Helpers/PrettyPrint.cs b/src/Uno.Toolkit.UI/Helpers/PrettyPrint.cs
index 268cc0ff6..e5a1201d8 100644
--- a/src/Uno.Toolkit.UI/Helpers/PrettyPrint.cs
+++ b/src/Uno.Toolkit.UI/Helpers/PrettyPrint.cs
@@ -13,6 +13,10 @@
 using Microsoft.UI;
 using Microsoft.UI.Xaml;
 using Microsoft.UI.Xaml.Media;
+using Microsoft.UI.Xaml.Controls;
+using Microsoft.UI.Xaml.Data;
+
+
 #else
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Media;
@@ -53,6 +57,7 @@ internal static string FormatViewRect(Android.Views.View x)
 	}
 #endif
 	internal static string FormatSize(Size size) => $"{size.Width:0.#}x{size.Height:0.#}";
+	internal static string FormatSize(double width, double height) => $"{width:0.#}x{height:0.#}";
 	internal static string FormatBrush(Brush b)
 	{
 		if (b is SolidColorBrush scb) return
@@ -62,6 +67,39 @@ internal static string FormatBrush(Brush b)
 
 		return b.GetType().Name;
 	}
+	public static string FormatGridDefinition(ColumnDefinition def) => FormatGridDefinition(def.MinWidth, def.Width, def.MaxWidth);
+	public static string FormatGridDefinition(RowDefinition def) => FormatGridDefinition(def.MinHeight, def.Height, def.MaxHeight);
+	private static string FormatGridDefinition(double min, GridLength value, double max)
+	{
+		return min != 0d || max != double.PositiveInfinity
+			? $"[{min:#.##}~{FormatGridLength(value)}~{max:#.##}]" // [min~value~max]
+			: FormatGridLength(value); // value
+	}
+	public static string FormatGridLength(GridLength x) => FormatGridLength(x.Value, x.GridUnitType);
+	public static string FormatGridLength(double value, GridUnitType type) => type switch
+	{
+		GridUnitType.Auto => "A",
+		GridUnitType.Pixel => $"{value:#.##}",
+		GridUnitType.Star => value switch
+		{
+			0d => "0*",
+			1d => "*",
+
+			_ => $"{value:#.##}*"
+		},
+		_ => /* CS8524: (GridUnitType)123 */ $"{value:#.##}{type}"
+	};
+	public static string FormatBinding(BindingExpression be)
+	{
+		if (be == null) return "null";
+
+		var descriptions = new List<string>();
+		descriptions.Add($"Path={be.ParentBinding.Path?.Path}");
+		if (be.ParentBinding.Mode != BindingMode.OneWay) descriptions.Add(be.ParentBinding.Mode.ToString());
+		if (be.ParentBinding.RelativeSource is { Mode: not RelativeSourceMode.None } rs) descriptions.Add(rs.Mode.ToString());
+
+		return $"[{string.Join(", ", descriptions)}]";
+	}
 
 	internal static string EscapeMultiline(string s, bool escapeTabs = false)
 	{
diff --git a/src/Uno.Toolkit.UI/Helpers/VisualTreeHelperEx.cs b/src/Uno.Toolkit.UI/Helpers/VisualTreeHelperEx.cs
index d8c0b8d70..6294781ba 100644
--- a/src/Uno.Toolkit.UI/Helpers/VisualTreeHelperEx.cs
+++ b/src/Uno.Toolkit.UI/Helpers/VisualTreeHelperEx.cs
@@ -52,7 +52,7 @@ internal static partial class VisualTreeHelperEx
 		/// Produces a text representation of the visual tree.
 		/// </summary>
 		/// <param name="reference">Any node of the visual tree</param>
-		public static string TreeGraph(this DependencyObject reference) => TreeGraph(reference, DebugVTNode);
+		public static string TreeGraph(this DependencyObject reference) => TreeGraph(reference, DescribeVTNode);
 
 		/// <summary>
 		/// Produces a text representation of the visual tree, using the provided method of description.
@@ -61,7 +61,13 @@ internal static partial class VisualTreeHelperEx
 		/// <param name="describeProperties">A function to describe the properties of interest of a visual tree node.</param>
 		/// <returns></returns>
 		public static string TreeGraph(this DependencyObject reference, Func<object, IEnumerable<string>> describeProperties) =>
-			TreeGraph(reference, x => DebugVTNode(x, describeProperties));
+			TreeGraph(reference, x => DescribeVTNode(x, describeProperties));
+
+		public static string TreeGraph(
+			this object reference,
+			Func<object, IEnumerable<string>> describeProperties,
+			Func<object, IEnumerable<object>, IEnumerable<object>>? getMembers = null
+		) => TreeGraph(reference, x => DescribeVTNode(x, describeProperties), getMembers);
 
 		/// <summary>
 		/// Produces a text representation of the visual tree, using the provided method of description.
@@ -69,16 +75,23 @@ public static string TreeGraph(this DependencyObject reference, Func<object, IEn
 		/// <param name="reference">Any node of the visual tree</param>
 		/// <param name="describe">A function to describe a visual tree node in a single line.</param>
 		/// <returns></returns>
-		public static string TreeGraph(this DependencyObject reference, Func<object, string> describe)
+		public static string TreeGraph(
+			this object reference,
+			Func<object, string> describe,
+			Func<object, IEnumerable<object>, IEnumerable<object>>? getMembers = null
+		)
 		{
 			var buffer = new StringBuilder();
 			Walk(reference);
 			return buffer.ToString();
 
-			void Walk(DependencyObject o, int depth = 0)
+			void Walk(object o, int depth = 0)
 			{
 				Print(o, depth);
-				foreach (var child in o.GetChildren())
+
+				var children = (o as _View)?.GetChildren().Cast<object>() ?? Array.Empty<object>();
+				children = getMembers?.Invoke(o, children) ?? children;
+				foreach (var child in children)
 				{
 					Walk(child, depth + 1);
 				}
@@ -209,13 +222,34 @@ public static IEnumerable<DependencyObject> GetChildren(this DependencyObject re
 	}
 	internal static partial class VisualTreeHelperEx // TreeGraph helper methods
 	{
-		private static string DebugVTNode(object x)
+		private static string DescribeVTNode(object x)
 		{
-			return DebugVTNode(x, GetDetails);
+			return DescribeVTNode(x, GetDetails);
 
 			static IEnumerable<string> GetDetails(object x)
 			{
 				#region Common Details: Layout (high priority)
+#if true // positioning properties/hints
+				if (x is FrameworkElement { Parent: Grid } fe3)
+				{
+					int c = Grid.GetColumn(fe3), cspan = Grid.GetColumnSpan(fe3),
+						r = Grid.GetRow(fe3), rspan = Grid.GetRowSpan(fe3);
+
+					yield return $"R{FormatRange(r, rspan)}C{FormatRange(c, cspan)}";
+					string FormatRange(int x, int span) => span > 1 ? $"{x}-{x + span - 1}" : $"{x}";
+				}
+				if (x is Grid g)
+				{
+					if (g.ColumnDefinitions is { Count: > 0 } columns)
+					{
+						yield return $"Columns={string.Join(',', columns.Select(FormatGridDefinition))}";
+					}
+					if (g.RowDefinitions is { Count: > 0 } rows)
+					{
+						yield return $"Rows={string.Join(',', rows.Select(FormatGridDefinition))}";
+					}
+				}
+#endif
 #if TREEGRAPH_VERBOSE_LAYOUT
 #if __IOS__
 				if (x is _View view && view.Superview is { })
@@ -232,17 +266,10 @@ static IEnumerable<string> GetDetails(object x)
 #endif
 				if (x is FrameworkElement fe)
 				{
-					yield return $"Actual={fe.ActualWidth}x{fe.ActualHeight}";
-#if TREEGRAPH_VERBOSE_LAYOUT
-					yield return $"Constraints=[{fe.MinWidth},{fe.Width},{fe.MaxWidth}]x[{fe.MinHeight},{fe.Height},{fe.MaxHeight}]";
-#endif
+					yield return $"Actual={FormatSize(fe.ActualWidth, fe.ActualHeight)}";
+					yield return $"Constraints=[{fe.MinWidth:0.#},{fe.Width:0.#},{fe.MaxWidth:0.#}]x[{fe.MinHeight:0.#},{fe.Height:0.#},{fe.MaxHeight:0.#}]";
 					yield return $"HV={fe.HorizontalAlignment}/{fe.VerticalAlignment}";
 				}
-				if (x is UIElement uie)
-				{
-					//yield return $"Desired={FormatSize(uie.DesiredSize)}";
-					//yield return $"LAS={FormatSize(uie.LastAvailableSize)}";
-				}
 #if TREEGRAPH_VERBOSE_LAYOUT
 				if (TryGetDpValue<HorizontalAlignment>(x, "HorizontalContentAlignment", out var hca) |
 					TryGetDpValue<HorizontalAlignment>(x, "VerticalContentAlignment", out var vca))
@@ -304,7 +331,7 @@ static IEnumerable<string> GetDetails(object x)
 				#endregion
 			}
 		}
-		private static string DebugVTNode(object x, Func<object, IEnumerable<string>> describeProperties)
+		private static string DescribeVTNode(object x, Func<object, IEnumerable<string>> describeProperties)
 		{
 			if (x is null) return "<null>";