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

菩提树下的杨过

发布于 2018-01-23 14:38:11

6430

发布于 2018-01-23 14:38:11

文章被收录于专栏：菩提树下的杨过菩提树下的杨过

虽然Silverlight提供了几种基本的布局方式，比如Canvas,Grid,StackPanel,Border...，但有时候可能仍然会觉得不够用。

这时候我们可以通过继承Panel，并重写MeasureOverride 和ArrangeOverride 方法，以实现自己的布局，事实上Canvas,Grid,StackPanel就是继承自Panel，并自行实现这二个方法实现的。

布局过程中，有二个关键的步骤：测量和排列子元素，正好对应MeasureOverride 与ArrangeOverride 二个方法.

MeasureOverride 中必须遍历所有子元素，并调用子元素的Measure 方法，以便让布局系统确定每个子元素的 DesiredSize(即：子元素自身希望占据的空间大小)，这是在调用 Measure 之后在系统内部发生的(开发人员无法干预)，该值将在后面排列过程期间使用。

ArrangeOverride 中同样也必须遍历所有子元素，并调用子元素的Arrange方法，以便让布局系统会告诉 Panel 可用于它及其子元素的 finalSize（即最终实际占据的空间大小）。

下面的示例，修改自SL3的官方文档，它将一个400 * 400大小的Panel，划分成16个小单元格(每个正好100*100)，放置在其中的元素，将自动依次填充到这些单元格的正中央，如果元素多于16个，将被忽略。

MyPanel.cs代码：

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

namespace CustomPanel
{
 public class MyPanel : Panel
    {
 const int _CellSize = 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)
        {
 for (int i = 0; i < this.Children.Count; i++)
            {
 if (i < _CellCount * _CellCount)
                {
 this.Children[i].Measure(new Size(_CellSize, _CellSize));
                }
 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(_CellSize, _CellSize));
 double dw = this.Children[i].DesiredSize.Width;
 double dh = this.Children[i].DesiredSize.Height;
 this.Children[i].Arrange(new Rect(cellOrigin.X + (_CellSize - dw) / 2, cellOrigin.Y + (_CellSize - dh) / 2, dw, dh));//每个子元素都放在单元格正中央
                }
 else
                {
 this.Children[i].Arrange(new Rect(0, 0, 0, 0));//超出的元素，不安排空间（即不显示）
                }
            }
 return new Size(_CellSize * _CellCount, _CellSize * _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;
        }        


    }
}

测试页MainPage.Xaml

<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>

运行效果图：

上面我们把Panel的尺寸定死为400 * 400了，如果想实现自由扩展，还要稍微再修改一下：

自由扩展的4 * 4格Panel

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;
        }        


    }
}

CodeProject上还有几篇扩展Panel的不错文章:

http://www.codeproject.com/KB/WPF/Panels.aspx 鱼眼效果布局的实现 http://www.codeproject.com/KB/silverlight/advancedcanvas.aspx 9宫格的实现这一篇更强大:

http://dotnet.org.za/rudi/archive/2008/04/15/why-wpf-rocks-custom-layout-panel-showcase.aspx

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2009-12-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐