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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券