Silverlight：利用Panel实现自定义布局

< UserControl  x:Class ="CustomPanel.MainPage"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d ="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:l ="clr-namespace:CustomPanel"
    xmlns:mc ="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable ="d"  d:DesignWidth ="640"  d:DesignHeight ="480" >
     < l:MyPanel  x:Name ="myPnl"  Background ="#FFEFEFEF"  HorizontalAlignment ="Center"  VerticalAlignment ="Center"   >
         < Button  Content ="01" ></ Button >
         < Button  Content ="02" ></ Button >
         < TextBlock  Text ="03" ></ TextBlock >
         < Button  Content ="04" ></ Button >
         < Button  Content ="05" ></ Button >
         < TextBox  Text ="06" ></ TextBox >
         < Button  Content ="07" ></ Button >
         < Button  Content ="08" ></ Button >
         < Button  Content ="09" ></ Button >
         < Button  Content ="10" ></ Button >
         < Button  Content ="11" ></ Button >
         < Button  Content ="12" ></ Button >
         < TextBlock  Text ="13" ></ TextBlock >
         < Button  Content ="14" ></ Button >
         < Button  Content ="15" ></ Button >
         < Button  Content ="16" ></ Button >
         < Button  Content ="17" ></ Button >
     </ l:MyPanel >
</ UserControl >

using  System.Windows;
using  System.Windows.Controls;
using  System.Windows.Media;
using  System;

namespace  CustomPanel
{
     public   class  MyPanel : Panel
    {
         int  _CellHeight  =   100 ; // 每个单元格的高度(初始为100)
         int  _CellWidth  =   100 ; // 每个单元格的宽度(初始为100)
         const   int  _CellCount  =   4 ; // 4*4的正方形单元格

         public  MyPanel() :  base ()
        {

        }

         ///   <summary>
         ///  先测量
         ///   </summary>
         ///   <param name="availableSize"></param>
         ///   <returns></returns>
         protected   override  Size MeasureOverride(Size availableSize)
        {
             // 重新每个单元格的尺寸
            _CellWidth  =  ( int )availableSize.Width  /  _CellCount;
            _CellHeight  =  ( int )availableSize.Height  /  _CellCount;

             for  ( int  i  =   0 ; i  <   this .Children.Count; i ++ )
            {
                 if  (i  <  _CellCount  *  _CellCount)
                {
                     this .Children[i].Measure( new  Size(_CellWidth, _CellHeight));
                }
                 else
                {
                     // this.Children[i].Measure(new Size(0, 0)); // 超出元素不分配空间,其实这行也可以不要，因为ArrangeOverride中对超出元素最终并未安排空间
                }
            }
             return  availableSize;            
        }

         ///   <summary>
         ///  再排列
         ///   </summary>
         ///   <param name="finalSize"></param>
         ///   <returns></returns>
         protected   override  Size ArrangeOverride(Size finalSize)
        {           
             for  ( int  i  =   0 ; i  <   this .Children.Count; i ++ )
            {
                 if  (i  <  _CellCount  *  _CellCount)
                {
                    Point cellOrigin  =  GetCellOriginPoint(i, _CellCount,  new  Size(_CellWidth, _CellHeight));
                     double  dw  =   this .Children[i].DesiredSize.Width;
                     double  dh  =   this .Children[i].DesiredSize.Height;
                     this .Children[i].Arrange( new  Rect(cellOrigin.X  +  (_CellWidth  -  dw)  /   2 , cellOrigin.Y  +  (_CellHeight  -  dh)  /   2 , dw, dh)); // 每个子元素都放在单元格正中央
                }
                 else
                {
                     this .Children[i].Arrange( new  Rect( 0 ,  0 ,  0 ,  0 )); // 超出的元素，不安排空间（即不显示）
                }
            }
             return   new  Size(_CellWidth  *  _CellCount, _CellHeight  *  _CellCount);

             // 下面这二行，演示了如何将可视区域设置为仅100*100大小
             // this.Clip = new RectangleGeometry() { Rect = new Rect(0,0,100,100) };
             // return new Size(100, 100);
        }

         ///   <summary>
         ///  取得每个单元格的(左上)起始点坐标
         ///   </summary>
         ///   <param name="cellIndex"></param>
         ///   <param name="cellCount"></param>
         ///   <param name="itemSize"></param>
         ///   <returns></returns>
         protected  Point GetCellOriginPoint( int  cellIndex,  int  cellCount, Size itemSize)
        {
             int  row  =  ( int )Math.Floor(cellIndex  /  cellCount);
             int  col  =  cellIndex  -  cellCount  *  row;
            Point origin  =   new  Point(itemSize.Width  *  col, itemSize.Height  *  row);
             return  origin;
        }        


    }
}