Windows Presentation Foundation系列（5）---自定义布局面板

声明：欢迎任何人和组织转载本blog中文章，但必须标记文章原始链接和作者信息。

本文链接：http://www.cnblogs.com/leezhm/archive/2011/07/06/2099083.html

开拓进取的小乌龟------->cnBlogs 点滴点点滴滴 Blog

 

      在这篇文章里面记录下，学习Essential Windows Presentation Foundation一书中自定义布局面板的实例和我的理解。

      在实际的项目中，可能遇到WPF已经提供的布局面板并不能满足我们要求的情况，比如我们需要把控件自动排列成一个圆圈，这个时候就可能需要自己来构建自定义布局满足项目需求。

      构建自定义布局，肯定需要先理解布局系统的工作原理，然后才能去构建。布局面板需要经过两个阶段才能完成布局，分别是测量阶段和排列阶段。布局面板的基类Panel提供了MeasureOverride和ArrangeOverride两个方法，供子类继承实现特定的布局行为。

      在测量布局阶段，会对面板中Children集合InternalChildren的每个子元素（child）进行计算，测量大小。此过程是通过调用child的Measure方法来完成。

      在排列布局阶段，同样会对面板中Children集合InteralChildren的每个元素调用Arrange放来完成。

      具体的过程，可以通过一个示例代码来理解：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

// for Panel class
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

// Writen by Leezhm, 5th July, 2011.
// Copyright (c) Leezhm@126.com, All Right Reserved.
// Contact : Leezhm@126.com.
// Last modified by leezhm@126.com on 5th July, 2011.


namespace UserDefinedPanel
{
    public class CirclePanel : Panel
    {
        public CirclePanel() : base()
        {

        }

        /// <summary>
        /// Must override this function for Measure
        /// </summary>
        /// <param name="availableSize"></param>
        /// <returns></returns>
        protected override Size MeasureOverride(Size availableSize)
        {
            double maxChildWidth = 0.0;
            double maxChildHeight = 0.0;

            // 获得面板中所有元素的最大宽度和高度
            foreach (UIElement child in InternalChildren)
            {
                //+ 对每个元素进行测量
                child.Measure(availableSize);

                // 或者最大值，不但更新。
                maxChildWidth  = Math.Max(maxChildWidth, child.DesiredSize.Width);
                maxChildHeight = Math.Max(maxChildHeight, child.DesiredSize.Height);
            }

            // 计算出所有子元素排成一行所需要的宽度，也即是最大圆的周长
            double maxCircumference = maxChildWidth * InternalChildren.Count;

            // 通过周长计算圆的半径，并加上每个元素高度，必须加上元素高度。
            double minCircleRadius = maxChildHeight + maxCircumference / (2 * Math.PI);

            // 定义这个最大圆的外切正方形，也即2倍的半径。
            Size idealRectangle = new Size(2 * minCircleRadius, 2 * minCircleRadius);
            Size desireSize = idealRectangle;

            // 注意，元素希望的最大的尺寸，永远小于或者等于父元素分配给自己元素的尺寸。
            // 当期望值大于父元素所能够提供的值的时候，设置期望值为可用的父元素所能够分配的值。

            // the desireSize must be smaller or equal to availableSize
            if (!double.IsInfinity(availableSize.Width))
            {
                if (availableSize.Width < desireSize.Width)
                {
                    desireSize.Width = availableSize.Width;
                }
            }

            // the desireSize must be smaller or equal to availableSize
            if (!double.IsInfinity(availableSize.Height))
            {
                if (availableSize.Height < desireSize.Height)
                {
                    desireSize.Height = availableSize.Height;
                }
            }

            // return the desireSize
            return desireSize;
        }


        /// <summary>
        /// Must override this function for Arrange
        /// </summary>
        /// <param name="finalSize"></param>
        /// <returns></returns>
        protected override Size ArrangeOverride(Size finalSize)
        {
            Rect layoutRect;

            // 面板为矩形，可能宽大于高，或者高大于宽。所以要获得矩形中的最大正方形的内切圆来做圆面板

            // get the layout, Please caution that we get the maximum inscribed circleou
            if (finalSize.Width > finalSize.Height)
            {
                layoutRect = new Rect((finalSize.Width - finalSize.Height) / 2, 0,
                                      finalSize.Height, finalSize.Height);
            }
            else
            {
                layoutRect = new Rect(0, (finalSize.Height - finalSize.Width) / 2,
                                      finalSize.Width, finalSize.Width);
            }

            // 得到每个元素占用的最大角度，也即把圆平分。
            double angleInc = 360.0 / InternalChildren.Count;
            double angle = 0.0;

            // Arrange每个元素
            foreach (UIElement child in InternalChildren)
            {
                //+ (1)计算每个元素的位置，最开始的初始位置设置在面板的顶部中间
                Point location = new Point(layoutRect.Left + (layoutRect.Width -
                                           child.DesiredSize.Width) / 2, layoutRect.Top);

                //+ (2)对每个元素进行旋转，注意RotateTransform的旋转坐标系是基于
                //+  要旋转的元素，故应该是每个元素自己的坐标系，也即元素的左上角为原点
                child.RenderTransform = new RotateTransform(angle, child.DesiredSize.Width / 2,
                                            finalSize.Height / 2 - layoutRect.Top);

                //+ 注意加上每个元素旋转角度的增值
                angle += angleInc;

                //+ 最终进行元素的布局
                child.Arrange(new Rect(location, child.DesiredSize));
            }

            return finalSize;
        }
    }
}

      上面代码简单实现了一个元素布局为圆型的面板。可以根据注释理解每段代码，在这里要特别注意的是RotateTransform的基准坐标系，是被旋转元素的坐标系，以被旋转的元素的左上角为坐标原点。自定义面板的使用及效果如下截图：

           其实观察上面的过程，可知自定义一个面板在WPF里面是很容易的事情，关键点是怎么去控制布局逻辑，而不是代码的逻辑。