WPF实现自定义Panel面板的示例详解

public class AxisPanel:Panel
    {
       internal static readonly DependencyProperty OrientationProperty = DependencyProperty.Register(
           "Oritentation",typeof(Orientation),typeof(AxisPanel),new FrameworkPropertyMetadata(Orientation.Horizontal,FrameworkPropertyMetadataOptions.AffectsArrange));
        /// <summary>
        /// 指示子元素的布局方向
        /// </summary>
        public Orientation Orientation
        {
            get => (Orientation)GetValue(OrientationProperty);
            set => SetValue(OrientationProperty, value);
        }
        /// <summary>
        /// 测量子元素，以确定自己的DesiredSize。
        /// 此方法由父级元素自动调用
        /// </summary>
        /// <param name="availableSize">父级元素提供给该面板的可用空间尺寸</param>
        /// <returns>此面板对象需要的尺寸（DesiredSize）</returns>
        protected override Size MeasureOverride(Size availableSize)
        {
            double width = 0, height = 0;
            switch(Orientation)
            {
                case Orientation.Horizontal:
                    // 水平布局
                    foreach(UIElement child in Children)
                    {
                        child.Measure(availableSize);
                        width += child.DesiredSize.Width;           // 计算面板需要的宽度；
                        if(child.DesiredSize.Height > height)       // 计算面板需要的高度：为所有元素中最大的高度
                        {
                            height = child.DesiredSize.Height;
                        }
                    }
                    break;
                case Orientation.Vertical:
                    // 垂直布局
                    foreach(UIElement child in Children)
                    {
                        child.Measure(availableSize);
                        height += child.DesiredSize.Height;     // 计算面板需要的高度
                        if(child.DesiredSize.Width > width)
                        {
                            width = child.DesiredSize.Width;    // 计算面板需要宽度：为所有元素中最大的宽度
                        }
                    }
                    break;
            }
            return new Size(width, height);
        }
        /// <summary>
        /// 排列子元素
        /// 此方法由父级元素自动调用
        /// </summary>
        /// <param name="finalSize">父级元素提供给该面板用于布局的最终尺寸。</param>
        /// <returns></returns>
        protected override Size ArrangeOverride(Size finalSize)
        {
            double totalWidth = 0, totalHeight = 0;                                         // 面板的总宽度、高度
            switch(Orientation)
            {
                case Orientation.Horizontal:                                                // 水平排列：需要计算子元素左上角的坐标点，已经用于排列子元素的区域大小
                    double x1, y1;                                                      // 子元素左上角点的坐标
                    for (int i=0;i<Children.Count;i++)
                    {
                        x1 = totalWidth;                                                    // 子元素的x坐标，应该为总宽度的值
                        y1 = (finalSize.Height - Children[i].DesiredSize.Height) / 2;       // 子元素的y坐标，始终保存在轴上
                        totalWidth += Children[i].DesiredSize.Width;                        // 总宽度增加
                        Rect rect = new(x1, y1, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height);       // 放置子元素的矩形区域
                        Children[i].Arrange(rect);                                          // 放置子元素
                    }
                    break;
                case Orientation.Vertical:
                    double x2, y2=0;
                    for (int i = 0; i < Children.Count;i++)
                    {
                        x2 = (finalSize.Width - Children[i].DesiredSize.Width) / 2;
                        y2 = totalHeight;
                        totalHeight += Children[i].DesiredSize.Height;                      // 所有子元素的总高度
                        Rect rect2 = new(x2, y2, Children[i].DesiredSize.Width, Children[i].DesiredSize.Height);
                        Children[i].Arrange(rect2);
                    }
                    break;
            }
            return finalSize;
        }
    }

 <rayPanel:AxisPanel Orientation="Horizontal">
         <Button Content="Button1" Width="100" Height="40"/>
         <Button Content="Button2" Width="100" Height="40" Canvas.Left="100"/>
         <Button Content="Button3" Width="100" Height="40" Canvas.Left="200"/>
         <TextBlock Text="你在么？"/>
     </rayPanel:AxisPanel>