Merge pull request #261 from HandyOrg/add-RelativePanel

Add relative panel
2019-12-10 00:53:55 +08:00
commit 94a1dbee42
@@ -91,6 +91,10 @@ Step 4：enjoy coding

 ## Latest examples

+### RelativePanel
+
+![RelativePanel](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/RelativePanel.png)
+
 ### Drawer

 ![Drawer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Drawer.gif)
@@ -107,12 +111,12 @@ Step 4：enjoy coding

 ![GeometryAnimation](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/GeometryAnimation.gif)

+## History publication
+
 ### SplitButton

 ![SplitButton](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SplitButton.png)

-## History publication
-
 ### FloatingBlock

 ![FloatingBlock](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/FloatingBlock.gif)
@@ -448,6 +448,9 @@
    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\View_Portrait_16x.png">
      <Link>Resources\Img\LeftMainContent\View_Portrait_16x.png</Link>
    </Resource>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\TransformRelative_16x.png">
+      <Link>Resources\Img\LeftMainContent\TransformRelative_16x.png</Link>
+    </Resource>
  </ItemGroup>
  <ItemGroup>
    <EmbeddedResource Include="..\..\Shared\HandyControlDemo_Shared\Properties\Langs\Lang.en.resx">
@@ -430,6 +430,9 @@
      <Generator>TextTemplatingFileGenerator</Generator>
      <LastGenOutput>MessageToken.cs</LastGenOutput>
    </Content>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\TransformRelative_16x.png">
+      <Link>Resources\Img\LeftMainContent\TransformRelative_16x.png</Link>
+    </Resource>
    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\View_Portrait_16x.png">
      <Link>Resources\Img\LeftMainContent\View_Portrait_16x.png</Link>
    </Resource>
@@ -496,6 +496,9 @@
      <Generator>TextTemplatingFileGenerator</Generator>
      <LastGenOutput>MessageToken.cs</LastGenOutput>
    </Content>
+    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\TransformRelative_16x.png">
+      <Link>Resources\Img\LeftMainContent\TransformRelative_16x.png</Link>
+    </Resource>
    <Resource Include="..\..\Shared\HandyControlDemo_Shared\Resources\Img\LeftMainContent\View_Portrait_16x.png">
      <Link>Resources\Img\LeftMainContent\View_Portrait_16x.png</Link>
    </Resource>
@@ -40,7 +40,7 @@
      [ "Gravatar", "GravatarDemoCtl", "User_16x", "" ],
      [ "Badge", "BadgeDemoCtl", "DotLarge_16x", "" ],
      [ "GotoTop", "GotoTopDemoCtl", "GoToTop_16x", "" ],
-      [ "SplitButton", "SplitButtonDemoCtl", "SplitButton_16x", "1" ],
+      [ "SplitButton", "SplitButtonDemoCtl", "SplitButton_16x", "" ],
      [ "ButtonGroup", "ButtonGroupDemoCtl", "ButtonGroup_16x", "" ],
      [ "ProgressButton", "ProgressButtonDemoCtl", "ProgressButton_16x", "" ],
      [ "ChatBubble", "ChatBubbleDemoCtl", "Bubble_16xLG", "" ],
@@ -68,6 +68,7 @@
      [ "Divider", "DividerDemoCtl", "DottedSplitter_16x", "1" ],
      [ "CirclePanel", "CirclePanelDemoCtl", "ColorWheel_16x", "" ],
      [ "Grid", "GridDemoCtl", "GridPane_16x", "" ],
+      [ "RelativePanel", "RelativePanelDemoCtl", "TransformRelative_16x", "1" ],
      [ "WaterfallPanel", "WaterfallPanelDemoCtl", "Panel_16x", "" ],
      [ "HoneycombPanel", "HoneycombPanelDemoCtl", "PolygonHexagon_16x", "" ],
      [ "TransitioningContentControl", "TransitioningContentControlDemoCtl", "TransitioningContentControl_16x", "" ],
@@ -182,6 +182,9 @@
    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\RateDemoCtl.xaml.cs">
      <DependentUpon>RateDemoCtl.xaml</DependentUpon>
    </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\RelativePanelDemoCtl.xaml.cs">
+      <DependentUpon>RelativePanelDemoCtl.xaml</DependentUpon>
+    </Compile>
    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\RunningBlockDemoCtl.xaml.cs">
      <DependentUpon>RunningBlockDemoCtl.xaml</DependentUpon>
    </Compile>
@@ -640,6 +643,10 @@
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
    </Page>
+    <Page Include="$(MSBuildThisFileDirectory)UserControl\Controls\RelativePanelDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="$(MSBuildThisFileDirectory)UserControl\Controls\RunningBlockDemoCtl.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -0,0 +1,61 @@
+<UserControl x:Class="HandyControlDemo.UserControl.RelativePanelDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:hc="https://handyorg.github.io/handycontrol"
+             Background="{DynamicResource RegionBrush}">
+    <hc:TransitioningContentControl>
+        <hc:RelativePanel Width="620" Height="700" Margin="32">
+            <Border Name="Rect1" Background="{DynamicResource DangerBrush}" Height="50" Width="50">
+                <TextBlock Text="Rect1" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect2" Background="{DynamicResource PrimaryBrush}" Height="50" Width="50" hc:RelativePanel.AlignHorizontalCenterWithPanel="True">
+                <TextBlock Text="Rect2" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect3" Background="{DynamicResource SuccessBrush}" Height="50" Width="50" hc:RelativePanel.AlignRightWithPanel="True">
+                <TextBlock Text="Rect3" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect4" Background="{DynamicResource DangerBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True">
+                <TextBlock Text="Rect4" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect5" Background="{DynamicResource PrimaryBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True" hc:RelativePanel.AlignHorizontalCenterWithPanel="True">
+                <TextBlock Text="Rect5" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect6" Background="{DynamicResource SuccessBrush}" Height="50" Width="50" hc:RelativePanel.AlignBottomWithPanel="True" hc:RelativePanel.AlignRightWithPanel="True">
+                <TextBlock Text="Rect6" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect7" Background="{DynamicResource PrimaryBrush}" Height="50" hc:RelativePanel.RightOf="{Binding ElementName=Rect1}">
+                <TextBlock Text="Rect7 (RightOf Rect1)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect8" Background="{DynamicResource SuccessBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect7}">
+                <TextBlock Text="Rect8 (Below Rect7)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect9" Background="{DynamicResource PrimaryBrush}" Height="140" Width="460" hc:RelativePanel.AlignHorizontalCenterWithPanel="True" hc:RelativePanel.AlignVerticalCenterWithPanel="True">
+                <TextBlock Text="Rect9" Padding="10" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Top"/>
+            </Border>
+            <Border Name="Rect10" Background="{DynamicResource DangerBrush}" Width="50" hc:RelativePanel.RightOf="{Binding ElementName=Rect9}" hc:RelativePanel.AlignVerticalCenterWith="{Binding ElementName=Rect9}">
+                <TextBlock Text="Rect14 (RightOf Rect9, AlignVerticalCenterWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center">
+                    <TextBlock.LayoutTransform>
+                        <TransformGroup>
+                            <RotateTransform Angle="-90"/>
+                        </TransformGroup>
+                    </TextBlock.LayoutTransform>
+                </TextBlock>
+            </Border>
+            <Border Name="Rect11" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.AlignBottomWith="{Binding ElementName=Rect9}" hc:RelativePanel.AlignHorizontalCenterWith="{Binding ElementName=Rect9}">
+                <TextBlock Text="Rect11 (AlignBottomWith Rect9, AlignHorizontalCenterWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect12" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect8}" hc:RelativePanel.AlignLeftWith="{Binding ElementName=Rect7}">
+                <TextBlock Text="Rect12 (Below Rect8, AlignLeftWith Rect7)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect13" Background="{DynamicResource PrimaryBrush}" Height="50" hc:RelativePanel.Below="{Binding ElementName=Rect12}" hc:RelativePanel.AlignRightWith="{Binding ElementName=Rect12}">
+                <TextBlock Text="Rect13 (Below Rect12, AlignRightWith Rect12)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect14" Background="{DynamicResource SuccessBrush}" Height="50" hc:RelativePanel.Above="{Binding ElementName=Rect9}" hc:RelativePanel.AlignRightWith="{Binding ElementName=Rect9}">
+                <TextBlock Text="Rect14 (Above Rect9, AlignRightWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+            <Border Name="Rect15" Background="{DynamicResource DangerBrush}" Height="50" hc:RelativePanel.LeftOf="{Binding ElementName=Rect2}" hc:RelativePanel.AlignTopWith="{Binding ElementName=Rect9}">
+                <TextBlock Text="Rect15 (LeftOf Rect2, AlignTopWith Rect9)" Padding="10,0" Foreground="White" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center"/>
+            </Border>
+        </hc:RelativePanel>
+    </hc:TransitioningContentControl>
+</UserControl>
@@ -0,0 +1,10 @@
+namespace HandyControlDemo.UserControl
+{
+    public partial class RelativePanelDemoCtl
+    {
+        public RelativePanelDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}
@@ -0,0 +1,501 @@
+//reference doc : https://docs.microsoft.com/en-us/uwp/api/Windows.UI.Xaml.Controls.RelativePanel
+
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Windows;
+using System.Windows.Controls;
+using HandyControl.Data;
+
+namespace HandyControl.Controls
+{
+    public class RelativePanel : Panel
+    {
+        private readonly Graph _childGraph;
+
+        public RelativePanel() => _childGraph = new Graph();
+
+        #region 容器对齐方式
+
+        public static readonly DependencyProperty AlignLeftWithPanelProperty = DependencyProperty.RegisterAttached(
+            "AlignLeftWithPanel", typeof(bool), typeof(RelativePanel), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignLeftWithPanel(DependencyObject element, bool value)
+            => element.SetValue(AlignLeftWithPanelProperty, value);
+
+        public static bool GetAlignLeftWithPanel(DependencyObject element)
+            => (bool) element.GetValue(AlignLeftWithPanelProperty);
+
+        public static readonly DependencyProperty AlignTopWithPanelProperty = DependencyProperty.RegisterAttached(
+            "AlignTopWithPanel", typeof(bool), typeof(RelativePanel), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignTopWithPanel(DependencyObject element, bool value)
+            => element.SetValue(AlignTopWithPanelProperty, value);
+
+        public static bool GetAlignTopWithPanel(DependencyObject element)
+            => (bool) element.GetValue(AlignTopWithPanelProperty);
+
+        public static readonly DependencyProperty AlignRightWithPanelProperty = DependencyProperty.RegisterAttached(
+            "AlignRightWithPanel", typeof(bool), typeof(RelativePanel), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignRightWithPanel(DependencyObject element, bool value)
+            => element.SetValue(AlignRightWithPanelProperty, value);
+
+        public static bool GetAlignRightWithPanel(DependencyObject element)
+            => (bool) element.GetValue(AlignRightWithPanelProperty);
+
+        public static readonly DependencyProperty AlignBottomWithPanelProperty = DependencyProperty.RegisterAttached(
+            "AlignBottomWithPanel", typeof(bool), typeof(RelativePanel), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignBottomWithPanel(DependencyObject element, bool value)
+            => element.SetValue(AlignBottomWithPanelProperty, value);
+
+        public static bool GetAlignBottomWithPanel(DependencyObject element)
+            => (bool) element.GetValue(AlignBottomWithPanelProperty);
+
+        #endregion
+
+        #region 元素间对齐方式
+
+        public static readonly DependencyProperty AlignLeftWithProperty = DependencyProperty.RegisterAttached(
+            "AlignLeftWith", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignLeftWith(DependencyObject element, UIElement value)
+            => element.SetValue(AlignLeftWithProperty, value);
+
+        public static UIElement GetAlignLeftWith(DependencyObject element)
+            => (UIElement) element.GetValue(AlignLeftWithProperty);
+
+        public static readonly DependencyProperty AlignTopWithProperty = DependencyProperty.RegisterAttached(
+            "AlignTopWith", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignTopWith(DependencyObject element, UIElement value)
+            => element.SetValue(AlignTopWithProperty, value);
+
+        public static UIElement GetAlignTopWith(DependencyObject element)
+            => (UIElement) element.GetValue(AlignTopWithProperty);
+
+        public static readonly DependencyProperty AlignRightWithProperty = DependencyProperty.RegisterAttached(
+            "AlignRightWith", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignRightWith(DependencyObject element, UIElement value)
+            => element.SetValue(AlignRightWithProperty, value);
+
+        public static UIElement GetAlignRightWith(DependencyObject element)
+            => (UIElement) element.GetValue(AlignRightWithProperty);
+
+        public static readonly DependencyProperty AlignBottomWithProperty = DependencyProperty.RegisterAttached(
+            "AlignBottomWith", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignBottomWith(DependencyObject element, UIElement value)
+            => element.SetValue(AlignBottomWithProperty, value);
+
+        public static UIElement GetAlignBottomWith(DependencyObject element)
+            => (UIElement) element.GetValue(AlignBottomWithProperty);
+
+        #endregion
+
+        #region 元素间位置关系
+
+        public static readonly DependencyProperty LeftOfProperty = DependencyProperty.RegisterAttached(
+            "LeftOf", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetLeftOf(DependencyObject element, UIElement value)
+            => element.SetValue(LeftOfProperty, value);
+
+        public static UIElement GetLeftOf(DependencyObject element)
+            => (UIElement)element.GetValue(LeftOfProperty);
+
+        public static readonly DependencyProperty AboveProperty = DependencyProperty.RegisterAttached(
+            "Above", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAbove(DependencyObject element, UIElement value)
+            => element.SetValue(AboveProperty, value);
+
+        public static UIElement GetAbove(DependencyObject element)
+            => (UIElement)element.GetValue(AboveProperty);
+
+        public static readonly DependencyProperty RightOfProperty = DependencyProperty.RegisterAttached(
+            "RightOf", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetRightOf(DependencyObject element, UIElement value)
+            => element.SetValue(RightOfProperty, value);
+
+        public static UIElement GetRightOf(DependencyObject element)
+            => (UIElement)element.GetValue(RightOfProperty);
+
+        public static readonly DependencyProperty BelowProperty = DependencyProperty.RegisterAttached(
+            "Below", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetBelow(DependencyObject element, UIElement value)
+            => element.SetValue(BelowProperty, value);
+
+        public static UIElement GetBelow(DependencyObject element)
+            => (UIElement) element.GetValue(BelowProperty);
+
+        #endregion
+
+        #region 居中对齐方式
+
+        public static readonly DependencyProperty AlignHorizontalCenterWithPanelProperty = DependencyProperty.RegisterAttached(
+            "AlignHorizontalCenterWithPanel", typeof(bool), typeof(RelativePanel), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignHorizontalCenterWithPanel(DependencyObject element, bool value)
+            => element.SetValue(AlignHorizontalCenterWithPanelProperty, value);
+
+        public static bool GetAlignHorizontalCenterWithPanel(DependencyObject element)
+            => (bool)element.GetValue(AlignHorizontalCenterWithPanelProperty);
+
+        public static readonly DependencyProperty AlignVerticalCenterWithPanelProperty = DependencyProperty.RegisterAttached(
+            "AlignVerticalCenterWithPanel", typeof(bool), typeof(RelativePanel), new FrameworkPropertyMetadata(ValueBoxes.FalseBox, FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignVerticalCenterWithPanel(DependencyObject element, bool value)
+            => element.SetValue(AlignVerticalCenterWithPanelProperty, value);
+
+        public static bool GetAlignVerticalCenterWithPanel(DependencyObject element)
+            => (bool)element.GetValue(AlignVerticalCenterWithPanelProperty);
+
+        public static readonly DependencyProperty AlignHorizontalCenterWithProperty = DependencyProperty.RegisterAttached(
+            "AlignHorizontalCenterWith", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignHorizontalCenterWith(DependencyObject element, UIElement value)
+            => element.SetValue(AlignHorizontalCenterWithProperty, value);
+
+        public static UIElement GetAlignHorizontalCenterWith(DependencyObject element)
+            => (UIElement)element.GetValue(AlignHorizontalCenterWithProperty);
+
+        public static readonly DependencyProperty AlignVerticalCenterWithProperty = DependencyProperty.RegisterAttached(
+            "AlignVerticalCenterWith", typeof(UIElement), typeof(RelativePanel), new FrameworkPropertyMetadata(default(UIElement), FrameworkPropertyMetadataOptions.AffectsRender));
+
+        public static void SetAlignVerticalCenterWith(DependencyObject element, UIElement value)
+            => element.SetValue(AlignVerticalCenterWithProperty, value);
+
+        public static UIElement GetAlignVerticalCenterWith(DependencyObject element)
+            => (UIElement)element.GetValue(AlignVerticalCenterWithProperty);
+
+        #endregion
+
+        protected override Size MeasureOverride(Size availableSize)
+        {
+            foreach (UIElement child in InternalChildren)
+            {
+                child?.Measure(availableSize);
+            }
+
+            return base.MeasureOverride(availableSize);
+        }
+
+        protected override Size ArrangeOverride(Size arrangeSize)
+        {
+            _childGraph.Reset(arrangeSize);
+
+            foreach (UIElement child in InternalChildren)
+            {
+                if (child == null) continue;
+
+                var node = _childGraph.AddNode(child);
+
+                node.AlignLeftWithNode = _childGraph.AddLink(node, GetAlignLeftWith(child));
+                node.AlignTopWithNode = _childGraph.AddLink(node, GetAlignTopWith(child));
+                node.AlignRightWithNode = _childGraph.AddLink(node, GetAlignRightWith(child));
+                node.AlignBottomWithNode = _childGraph.AddLink(node, GetAlignBottomWith(child));
+
+                node.LeftOfNode = _childGraph.AddLink(node, GetLeftOf(child));
+                node.AboveNode = _childGraph.AddLink(node, GetAbove(child));
+                node.RightOfNode = _childGraph.AddLink(node, GetRightOf(child));
+                node.BelowNode = _childGraph.AddLink(node, GetBelow(child));
+
+                node.AlignHorizontalCenterWith = _childGraph.AddLink(node, GetAlignHorizontalCenterWith(child));
+                node.AlignVerticalCenterWith = _childGraph.AddLink(node, GetAlignVerticalCenterWith(child));
+            }
+
+            if (_childGraph.CheckCyclic())
+            {
+                throw new Exception("RelativePanel error: Circular dependency detected. Layout could not complete.");
+            }
+
+            return arrangeSize;
+        }
+
+        private class GraphNode
+        {
+            public Point Position { get; set; }
+
+            public bool Arranged { get; set; }
+
+            public UIElement Element { get; }
+
+            public HashSet<GraphNode> OutgoingNodes { get; }
+
+            public GraphNode AlignLeftWithNode { get; set; }
+
+            public GraphNode AlignTopWithNode { get; set; }
+
+            public GraphNode AlignRightWithNode { get; set; }
+
+            public GraphNode AlignBottomWithNode { get; set; }
+
+            public GraphNode LeftOfNode { get; set; }
+
+            public GraphNode AboveNode { get; set; }
+
+            public GraphNode RightOfNode { get; set; }
+
+            public GraphNode BelowNode { get; set; }
+
+            public GraphNode AlignHorizontalCenterWith { get; set; }
+
+            public GraphNode AlignVerticalCenterWith { get; set; }
+
+            public GraphNode(UIElement element)
+            {
+                OutgoingNodes = new HashSet<GraphNode>();
+                Element = element;
+            }
+        }
+
+        private class Graph
+        {
+            private readonly Dictionary<DependencyObject, GraphNode> _nodeDic;
+
+            private Size _arrangeSize;
+
+            public Graph()
+            {
+                _nodeDic = new Dictionary<DependencyObject, GraphNode>();
+            }
+
+            public GraphNode AddLink(GraphNode from, UIElement to)
+            {
+                if (to == null) return null;
+
+                GraphNode nodeTo;
+                if (_nodeDic.ContainsKey(to))
+                {
+                    nodeTo = _nodeDic[to];
+                }
+                else
+                {
+                    nodeTo = new GraphNode(to);
+                    _nodeDic[to] = nodeTo;
+                }
+
+                from.OutgoingNodes.Add(nodeTo);
+                return nodeTo;
+            }
+
+            public GraphNode AddNode(UIElement value)
+            {
+                if (!_nodeDic.ContainsKey(value))
+                {
+                    var node = new GraphNode(value);
+                    _nodeDic.Add(value, node);
+                    return node;
+                }
+
+                return _nodeDic[value];
+            }
+
+            public void Reset(Size arrangeSize)
+            {
+                _arrangeSize = arrangeSize;
+                _nodeDic.Clear();
+            }
+
+            public bool CheckCyclic() => CheckCyclic(_nodeDic.Values, null);
+
+            private bool CheckCyclic(IEnumerable<GraphNode> nodes, HashSet<DependencyObject> set)
+            {
+                if (set == null)
+                {
+                    set = new HashSet<DependencyObject>();
+                }
+
+                foreach (var node in nodes)
+                {
+                    /*
+                     * 该节点无任何依赖，所以从这里开始计算元素位置。
+                     * 因为无任何依赖，所以忽略同级元素
+                     */
+                    if (!node.Arranged && node.OutgoingNodes.Count == 0)
+                    {
+                        ArrangeChild(node, true);
+                        continue;
+                    }
+
+                    //  判断依赖元素是否全部排列完毕
+                    if (node.OutgoingNodes.All(item => item.Arranged))
+                    {
+                        ArrangeChild(node);
+                        continue;
+                    }
+
+                    //  判断是否有循环
+                    if (!set.Add(node.Element)) return true;
+
+                    //  没有循环，且有依赖，则继续往下
+                    return CheckCyclic(node.OutgoingNodes, set);
+                }
+
+                return false;
+            }
+
+            private void ArrangeChild(GraphNode node, bool ignoneSibling = false)
+            {
+                var child = node.Element;
+                var childSize = child.DesiredSize;
+                var childPos = new Point();
+
+                #region 容器居中对齐
+
+                if (GetAlignHorizontalCenterWithPanel(child))
+                {
+                    childPos.X = (_arrangeSize.Width - childSize.Width) / 2;
+                }
+
+                if (GetAlignVerticalCenterWithPanel(child))
+                {
+                    childPos.Y = (_arrangeSize.Height - childSize.Height) / 2;
+                }
+
+                #endregion
+
+                var alignLeftWithPanel = GetAlignLeftWithPanel(child);
+                var alignTopWithPanel = GetAlignTopWithPanel(child);
+                var alignRightWithPanel = GetAlignRightWithPanel(child);
+                var alignBottomWithPanel = GetAlignBottomWithPanel(child);
+
+                if (!ignoneSibling)
+                {
+                    #region 元素间位置
+
+                    if (node.LeftOfNode != null)
+                    {
+                        childPos.X = node.LeftOfNode.Position.X - childSize.Width;
+                    }
+
+                    if (node.AboveNode != null)
+                    {
+                        childPos.Y = node.AboveNode.Position.Y - childSize.Height;
+                    }
+
+                    if (node.RightOfNode != null)
+                    {
+                        childPos.X = node.RightOfNode.Position.X + node.RightOfNode.Element.DesiredSize.Width;
+                    }
+
+                    if (node.BelowNode != null)
+                    {
+                        childPos.Y = node.BelowNode.Position.Y + node.BelowNode.Element.DesiredSize.Height;
+                    }
+
+                    #endregion
+
+                    #region 元素居中对齐
+
+                    if (node.AlignHorizontalCenterWith != null)
+                    {
+                        childPos.X = node.AlignHorizontalCenterWith.Position.X +
+                                     (node.AlignHorizontalCenterWith.Element.DesiredSize.Width - childSize.Width) / 2;
+                    }
+
+                    if (node.AlignVerticalCenterWith != null)
+                    {
+                        childPos.Y = node.AlignVerticalCenterWith.Position.Y +
+                                     (node.AlignVerticalCenterWith.Element.DesiredSize.Height - childSize.Height) / 2;
+                    }
+
+                    #endregion
+
+                    #region 元素间对齐
+
+                    if (node.AlignLeftWithNode != null)
+                    {
+                        childPos.X = node.AlignLeftWithNode.Position.X;
+                    }
+
+                    if (node.AlignTopWithNode != null)
+                    {
+                        childPos.Y = node.AlignTopWithNode.Position.Y;
+                    }
+
+                    if (node.AlignRightWithNode != null)
+                    {
+                        childPos.X = node.AlignRightWithNode.Element.DesiredSize.Width + node.AlignRightWithNode.Position.X - childSize.Width;
+                    }
+
+                    if (node.AlignBottomWithNode != null)
+                    {
+                        childPos.Y = node.AlignBottomWithNode.Element.DesiredSize.Height + node.AlignBottomWithNode.Position.Y - childSize.Height;
+                    }
+
+                    #endregion
+                }
+                
+                #region 容器对齐
+
+                if (alignLeftWithPanel)
+                {
+                    if (node.AlignRightWithNode != null)
+                    {
+                        childPos.X = (node.AlignRightWithNode.Element.DesiredSize.Width + node.AlignRightWithNode.Position.X - childSize.Width) / 2;
+                    }
+                    else
+                    {
+                        childPos.X = 0;
+                    }
+                }
+
+                if (alignTopWithPanel)
+                {
+                    if (node.AlignBottomWithNode != null)
+                    {
+                        childPos.Y = (node.AlignBottomWithNode.Element.DesiredSize.Height + node.AlignBottomWithNode.Position.Y - childSize.Height) / 2;
+                    }
+                    else
+                    {
+                        childPos.Y = 0;
+                    }
+                }
+
+                if (alignRightWithPanel)
+                {
+                    if (alignLeftWithPanel)
+                    {
+                        childPos.X = (_arrangeSize.Width - childSize.Width) / 2;
+                    }
+                    else if(node.AlignLeftWithNode == null)
+                    {
+                        childPos.X = _arrangeSize.Width - childSize.Width;
+                    }
+                    else
+                    {
+                        childPos.X = (_arrangeSize.Width + node.AlignLeftWithNode.Position.X - childSize.Width) / 2;
+                    }
+                }
+
+                if (alignBottomWithPanel)
+                {
+                    if (alignTopWithPanel)
+                    {
+                        childPos.Y = (_arrangeSize.Height - childSize.Height) / 2;
+                    }
+                    else if (node.AlignTopWithNode == null)
+                    {
+                        childPos.Y = _arrangeSize.Height - childSize.Height;
+                    }
+                    else
+                    {
+                        childPos.Y = (_arrangeSize.Height + node.AlignLeftWithNode.Position.Y - childSize.Height) / 2;
+                    }
+                }
+
+                #endregion
+
+                child.Arrange(new Rect(childPos.X, childPos.Y, childSize.Width, childSize.Height));
+                node.Position = childPos;
+                node.Arranged = true;
+            }
+        }
+    }
+}
@@ -35,6 +35,7 @@
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Sprite.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Block\ToggleBlock.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Panel\HoneycombPanel.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Panel\RelativePanel.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeTrack.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeThumb.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\TwoWayRangeBase.cs" />
@@ -90,8 +91,8 @@
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Cover\CoverView\CoverView.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Cover\CoverView\CoverViewContent.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Cover\CoverView\CoverViewItem.cs" />
-    <Compile Include="$(MSBuildThisFileDirectory)Controls\Grid\Col.cs" />
-    <Compile Include="$(MSBuildThisFileDirectory)Controls\Grid\Row.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Panel\Grid\Col.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Panel\Grid\Row.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Image\GifImage.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Image\ImageViewer.cs" />
    <Compile Include="$(MSBuildThisFileDirectory)Controls\Input\ComboBox.cs" />
@@ -55,9 +55,8 @@ namespace HandyControl.Tools.Converter

            if (destinationType == null) throw new ArgumentNullException(nameof(destinationType));

-            if (!(value is ColLayout)) throw new ArgumentException("UnexpectedParameterType");
+            if (!(value is ColLayout th)) throw new ArgumentException("UnexpectedParameterType");

-            var th = (ColLayout)value;
            if (destinationType == typeof(string)) return ToString(th, cultureInfo);
            if (destinationType == typeof(InstanceDescriptor))
            {