（WPF学习记录）第十二章 自定义面板

Panel最大的好处是，它有Children属性可以进行孩子的排序。此属性的类别是UIElementCollection，负责处理对AddVisualChild、AddLogicalChild、RemoveVisualChild和RemoveLogicalChild，以进行孩子的增删。

第01个程序:统一的Grid

最简单的面板是UniformGrid。每个格子都是一样的宽和高。下面的类仿造UniformGrid的功能。

第1个文件:UniformGridAlmost.cs。

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace Chapter12
{
class UniformGridAlmost : Panel
{
public static readonly DependencyProperty ColumnsProperty;

static UniformGridAlmost()
{
ColumnsProperty = DependencyProperty.Register("Columns", typeof(int), typeof(UniformGridAlmost),
new FrameworkPropertyMetadata(1, FrameworkPropertyMetadataOptions.AffectsMeasure));

}

public int Columns
{
set { SetValue(ColumnsProperty, value); }
get { return (int)GetValue(ColumnsProperty); }
}

public int Rows
{
get { return (InternalChildren.Count + Columns - 1) / Columns; }
}

protected override Size MeasureOverride(Size sizeAvailable)
{
// 根据统一的行与列,计算孩子的尺寸
Size sizeChild = new Size(sizeAvailable.Width / Columns, sizeAvailable.Height / Rows);

// 用来累积最大宽度和高度的变量
double maxwidth = 0;
double maxheight = 0;

foreach (UIElement child in InternalChildren)
{

// 调用每个孩子的Measure
child.Measure(sizeChild);

// 为孩子设置适合的尺寸
maxwidth = Math.Max(maxwidth, child.DesiredSize.Width);
maxheight = Math.Max(maxheight, child.DesiredSize.Height);
}
// 为grid本身计算尺寸
return new Size(Columns * maxwidth, Rows * maxheight);
}

protected override Size ArrangeOverride(Size sizeFinal)
{
Size sizeChild = new Size(sizeFinal.Width / Columns,
sizeFinal.Height / Rows);

for (int index = 0; index < InternalChildren.Count; index++)
{
int row = index / Columns;
int col = index % Columns;

// 计算每个孩子在sizeFinal内的矩形
Rect rectChild = new Rect(new Point(col * sizeChild.Width, row * sizeChild.Height), sizeChild);

// 然后调用Arrange更新布局
InternalChildren[index].Arrange(rectChild);
}
return sizeFinal;
}
}

}

第2个文件:DuplicateUniformGrid.cs。

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace Chapter12
{
public class DuplicateUniformGrid : Window
{
[STAThread]
public static void Main()
{
Application app = new Application();
app.Run(new DuplicateUniformGrid());
}
public DuplicateUniformGrid()
{
Title = "完全相同的grid";
Width = 480;
Height = 288;
WindowStartupLocation = WindowStartupLocation.CenterScreen;

UniformGridAlmost unigrid = new UniformGridAlmost();
unigrid.Columns = 5;
Content = unigrid;

// 用随机尺寸的按钮,填入UniformGridAlmost
Random rand = new Random();

for (int index = 0; index < 25; index++)
{
Button btn = new Button();
btn.Name = "按钮" + (index + 1);
btn.Content = btn.Name;
btn.FontSize += rand.Next(10);
unigrid.Children.Add(btn);
}
AddHandler(Button.ClickEvent, new RoutedEventHandler(ButtonOnClick));
}
void ButtonOnClick(object sender, RoutedEventArgs args)
{
Button btn = args.Source as Button;
MessageBox.Show(btn.Name + "被点击!", Title);
}
}

}

运行效果如下:



第02小程序:Canvas上绘图(PaintOnCanvasClone.cs)

Canvas在第七章介绍过，此面板类似传统的图形环境，利用坐标位置，指定元素的摆放地点。当有多个元素时，越早加入其中的元素出现在越下层（可被后加入的元素覆盖）。

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace Chapter12
{
public class PaintOnCanvasClone : Window
{
[STAThread]
public static void Main()
{
Application app = new Application();
app.Run(new PaintOnCanvasClone());
}
public PaintOnCanvasClone()
{
Title = "Canvas上的矩形";
Width = 480;
Height = 320;
WindowStartupLocation = WindowStartupLocation.CenterScreen;

Canvas canv = new Canvas();
Content = canv;

SolidColorBrush[] brushes = { Brushes.Red, Brushes.Green, Brushes.Blue };

for (int i = 0; i < brushes.Length; i++)
{
Rectangle rect = new Rectangle();
rect.Fill = brushes[i];
rect.Width = 100;
rect.Height = 100;
canv.Children.Add(rect);
Canvas.SetLeft(rect, 50 * (i + 1));
Canvas.SetTop(rect, 50 * (i + 1));
}
}
}

}

运行结果:



第03个小程序:依对角线排列按钮

在Panel内添加Child时，一般的做法是:pnl.Children.Add(child)，这样有件事不对劲，定义此child字段和属性的类，不知道有什么东西被加入或者删除了，也不知道什么时候调用的AddVisualChild、AddLogiclChild等。

一个可能的解决之道是写一个类似UIElementCollection的类，处理这件事，或者通知面板去做这件事。

第1个代码文件:DiagonalizeTheButtons.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;

namespace Chapter12
{
class DiagonalPanel : FrameworkElement
{
List<UIElement> children = new List<UIElement>();

Size sizeChildrenTotal;

public static readonly DependencyProperty BackgroundProperty;

// 静态构造函数创建依赖项属性Background
static DiagonalPanel()
{
BackgroundProperty = DependencyProperty.Register("Background", typeof(Brush), typeof(DiagonalPanel),
new FrameworkPropertyMetadata(null, FrameworkPropertyMetadataOptions.AffectsRender));
}

public Brush Background
{
set { SetValue(BackgroundProperty, value); }
get { return (Brush)GetValue(BackgroundProperty); }
}

// 添加孩子元素
public void Add(UIElement el)
{
children.Add(el);
AddVisualChild(el);
AddLogicalChild(el);
InvalidateMeasure();  //更新元素布局
}
public void Remove(UIElement el)
{
children.Remove(el);
RemoveVisualChild(el);
RemoveLogicalChild(el);
InvalidateMeasure();
}
public int IndexOf(UIElement el)
{
return children.IndexOf(el);
}

protected override int VisualChildrenCount
{
get { return children.Count; }
}
protected override Visual GetVisualChild(int index)
{
if (index >= children.Count)
throw new ArgumentOutOfRangeException("index");

return children[index];
}
protected override Size MeasureOverride(Size sizeAvailable)
{
sizeChildrenTotal = new Size(0, 0);

foreach (UIElement child in children)
{
child.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));

sizeChildrenTotal.Width += child.DesiredSize.Width;
sizeChildrenTotal.Height += child.DesiredSize.Height;
}
return sizeChildrenTotal;
}
protected override Size ArrangeOverride(Size sizeFinal)
{
Point ptChild = new Point(0, 0);

foreach (UIElement child in children)
{
Size sizeChild = new Size(0, 0);

sizeChild.Width = child.DesiredSize.Width * (sizeFinal.Width / sizeChildrenTotal.Width);
sizeChild.Height = child.DesiredSize.Height * (sizeFinal.Height / sizeChildrenTotal.Height);
child.Arrange(new Rect(ptChild, sizeChild));
// 当前元素的右下角位置为下一个元素的起点位置
ptChild.X += sizeChild.Width;
ptChild.Y += sizeChild.Height;
}
return sizeFinal;
}
protected override void OnRender(DrawingContext dc)
{
dc.DrawRectangle(Background, null, new Rect(new Point(0, 0), RenderSize));
}
}

}

有了这个类，加入孩子的时候就可以直接写pal.Add(child)。

第2个代码文件:DiagonalPanel.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;

namespace Chapter12
{
public class DiagonalizeTheButtons : Window
{
[STAThread]
public static void Main()
{
Application app = new Application();
app.Run(new DiagonalizeTheButtons());
}
public DiagonalizeTheButtons()
{
Title = "对角线式排列按钮";
Width = 608;
Height = 288;
WindowStartupLocation = WindowStartupLocation.CenterScreen;

DiagonalPanel pnl = new DiagonalPanel();
Content = pnl;

Random rand = new Random();

for (int i = 0; i < 5; i++)
{
Button btn = new Button();
btn.Content = "按钮" +(i + 1);
btn.FontSize += rand.Next(5);
pnl.Add(btn);
}
}
}

}

运行效果:



第04个小程序:圆形排列按钮

一个圆可以被切割成多个扇形的小块。想将element排列成圆形，或许最直接的方式是让第个element都摆设在自己的小块内。

如下图所示，是一个小的扇形块，矩形表示按钮，从中心连到element右上角的这一条线，就是半径。





计算公式如下:





第01个代码文件:RadialPanelOrientation.cs

因为按钮通常都是宽(W)大于高(H)，若按钮摆放方式不同(如旋转90度)，这会影响半径的计算，不同的摆放方式会表现出来“以高度为主要决定因素”和“以宽度为主要决定因素”计算的半径。

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

namespace Chapter12
{
public enum RadialPanelOrientation
{
ByWidth,
ByHeight
}
}

第02个代码文件:RadialPanel.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Media;
using System.Windows.Controls;

namespace Chapter12
{
public class RadialPanel : Panel
{
public static readonly DependencyProperty OrientationProperty;

bool showPieLines;
double angleEach;       // 角度
Size sizeLargest;       // 最大孩子的尺寸
double radius;

// 圆的半径
double outerEdgeFromCenter;
double innerEdgeFromCenter;

static RadialPanel()
{
OrientationProperty = DependencyProperty.Register("Orientation", typeof(RadialPanelOrientation), typeof(RadialPanel),
new FrameworkPropertyMetadata(RadialPanelOrientation.ByWidth, FrameworkPropertyMetadataOptions.AffectsMeasure));
}

public RadialPanelOrientation Orientation
{
set { SetValue(OrientationProperty, value); }
get { return (RadialPanelOrientation)GetValue(OrientationProperty); }
}

public bool ShowPieLines
{
set
{
if (value != showPieLines)
InvalidateVisual();

showPieLines = value;
}
get
{
return showPieLines;
}
}

protected override Size MeasureOverride(Size sizeAvailable)
{
if (InternalChildren.Count == 0)
return new Size(0, 0);

angleEach = 360.0 / InternalChildren.Count;
sizeLargest = new Size(0, 0);

foreach (UIElement child in InternalChildren)
{
child.Measure(new Size(Double.PositiveInfinity, Double.PositiveInfinity));

sizeLargest.Width = Math.Max(sizeLargest.Width, child.DesiredSize.Width);
sizeLargest.Height = Math.Max(sizeLargest.Height, child.DesiredSize.Height);
}
if (Orientation == RadialPanelOrientation.ByWidth)
{
// 计算中心到element边缘的距离
innerEdgeFromCenter = sizeLargest.Width / 2 / Math.Tan(Math.PI * angleEach / 360);
outerEdgeFromCenter = innerEdgeFromCenter + sizeLargest.Height;
// 以最大的孩子为基准,计算圆的半径
radius = Math.Sqrt(Math.Pow(sizeLargest.Width / 2, 2) + Math.Pow(outerEdgeFromCenter, 2));
}
else
{
// 计算中心到element边缘的距离
innerEdgeFromCenter = sizeLargest.Height / 2 / Math.Tan(Math.PI * angleEach / 360);
outerEdgeFromCenter = innerEdgeFromCenter + sizeLargest.Width;

// 以最大的孩子为基准,计算圆的半径
radius = Math.Sqrt(Math.Pow(sizeLargest.Height / 2, 2) + Math.Pow(outerEdgeFromCenter, 2));
}
// 返回该圆的尺寸
return new Size(2 * radius, 2 * radius);
}

protected override Size ArrangeOverride(Size sizeFinal)
{
double angleChild = 0;
Point ptCenter = new Point(sizeFinal.Width / 2, sizeFinal.Height / 2);
double multiplier = Math.Min(sizeFinal.Width / (2 * radius), sizeFinal.Height / (2 * radius));

foreach (UIElement child in InternalChildren)
{
// 重置孩子呈现位置的转换信息
child.RenderTransform = Transform.Identity;

if (Orientation == RadialPanelOrientation.ByWidth)
{
// 将孩子放在上边
child.Arrange(
new Rect(ptCenter.X - multiplier * sizeLargest.Width / 2,
ptCenter.Y - multiplier * outerEdgeFromCenter,
multiplier * sizeLargest.Width,
multiplier * sizeLargest.Height));
}
else
{
// 将孩子放在右边
child.Arrange(
new Rect(ptCenter.X + multiplier * innerEdgeFromCenter,
ptCenter.Y - multiplier * sizeLargest.Height / 2,
multiplier * sizeLargest.Width,
multiplier * sizeLargest.Height));
}

// 旋转孩子
Point pt = TranslatePoint(ptCenter, child);
child.RenderTransform = new RotateTransform(angleChild, pt.X, pt.Y);

// 增加角度,准备安置下一个孩子
angleChild += angleEach;
}
return sizeFinal;
}

// 显示饼图切线
protected override void OnRender(DrawingContext dc)
{
base.OnRender(dc);

if (ShowPieLines)
{
Point ptCenter = new Point(RenderSize.Width / 2, RenderSize.Height / 2);
double multiplier = Math.Min(RenderSize.Width / (2 * radius), RenderSize.Height / (2 * radius));
Pen pen = new Pen(SystemColors.WindowTextBrush, 1);
pen.DashStyle = DashStyles.Dash;

// 显示圆
dc.DrawEllipse(null, pen, ptCenter, multiplier * radius, multiplier * radius);
// 初始化角度
double angleChild = angleEach / 2;
if (Orientation == RadialPanelOrientation.ByHeight) angleChild += 90;

// 循环走过孩子,从中心绘制放射线
foreach (UIElement child in InternalChildren)
{
dc.DrawLine(pen, ptCenter,
new Point(ptCenter.X + multiplier * radius * Math.Sin(2 * Math.PI * angleChild / 360),
ptCenter.Y - multiplier * radius * Math.Cos(2 * Math.PI * angleChild / 360)));
angleChild += angleEach;
}
}
}
}
}

第03个代码文件:CircleTheButtons.cs

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;

namespace Chapter12
{
public class CircleTheButtons : Window
{
[STAThread]
public static void Main()
{
Application app = new Application();
app.Run(new CircleTheButtons());
}

RadialPanel pnl = new RadialPanel();
int btnCount;
SolidColorBrush[] brushes = { Brushes.Red, Brushes.Green, Brushes.Blue,
Brushes.Yellow,Brushes.Violet,Brushes.Orange,
Brushes.PaleGreen,Brushes.RosyBrown,Brushes.Salmon,Brushes.Silver};

public CircleTheButtons()
{
Title = "圆形排列按钮";
WindowStartupLocation = WindowStartupLocation.CenterScreen;
Width = 768;
Height = 432;
Topmost = true;
SizeChanged += OnSizeChanged;

Canvas canv = new Canvas();

pnl.Width = Width - 8;
pnl.Height = Height - 34;
pnl.Orientation = RadialPanelOrientation.ByWidth;
pnl.ShowPieLines = true;

canv.Children.Add(pnl);

// 互动按钮
Button btnIsShowPie = new Button();
btnIsShowPie.Width = 120;
btnIsShowPie.Content = "不显示饼图";
btnIsShowPie.Click += IsShowPieClick;
canv.Children.Add(btnIsShowPie);
Canvas.SetLeft(btnIsShowPie, 10);
Canvas.SetTop(btnIsShowPie, 10);

Button btnRadialPanelOrientation = new Button();
btnRadialPanelOrientation.Width = 120;
btnRadialPanelOrientation.Content = "以高度为主排列";
btnRadialPanelOrientation.Click += RadialPanelOrientationClick;
canv.Children.Add(btnRadialPanelOrientation);
Canvas.SetLeft(btnRadialPanelOrientation, 10);
Canvas.SetTop(btnRadialPanelOrientation, 50);

Button btnAddButton = new Button();
btnAddButton.Width = 120;
btnAddButton.Content = "增加按钮";
btnAddButton.Click += AddButtonClick;
canv.Children.Add(btnAddButton);
Canvas.SetLeft(btnAddButton, 10);
Canvas.SetTop(btnAddButton, 90);

Button btnCutButton = new Button();
btnCutButton.Width = 120;
btnCutButton.Content = "减少按钮";
btnCutButton.Click += CutButtonClick;
canv.Children.Add(btnCutButton);
Canvas.SetLeft(btnCutButton, 10);
Canvas.SetTop(btnCutButton, 130);

Content = canv;

Random rand = new Random();

int i;
for (i = 0; i < 9; i++)
{
Button btn = new Button();
btn.Content = "按钮" + (i + 1);
btn.Background = brushes[i];
btn.FontSize += rand.Next(10);
pnl.Children.Add(btn);
}
btnCount = i;
}

// 响应事件
void OnSizeChanged(object sender, EventArgs e)
{
pnl.Width = this.Width - 8;
pnl.Height = Height - 34;
pnl.InvalidateMeasure();
}

void IsShowPieClick(object sender, RoutedEventArgs e)
{
Button btn = e.Source as Button;
if (pnl.ShowPieLines == true)
{
pnl.ShowPieLines = false;
btn.Content = "显示饼图";
}
else
{
pnl.ShowPieLines = true;
btn.Content = "不显示饼图";
}
}

void RadialPanelOrientationClick(object sender, RoutedEventArgs e)
{
Button btn = e.Source as Button;
if (pnl.Orientation == RadialPanelOrientation.ByWidth)
{
pnl.Orientation = RadialPanelOrientation.ByHeight;
btn.Content = "以宽度为主排列";
pnl.InvalidateVisual();
}
else
{
pnl.Orientation = RadialPanelOrientation.ByWidth;
btn.Content = "以高度为主排列";
pnl.InvalidateVisual();
}
}

void AddButtonClick(object sender, RoutedEventArgs e)
{
if (btnCount < 30)
{
Random rand = new Random();
int i = rand.Next(brushes.Length - 1);
Button btn = new Button();
btn.Content = "按钮" + (btnCount + 1);
btn.Background = brushes[i];
btn.FontSize += rand.Next(10);
pnl.Children.Add(btn);
btnCount++;
pnl.InvalidateVisual();
}
}

void CutButtonClick(object sender, RoutedEventArgs e)
{
if (btnCount > 4)
{
UIElementCollection uiEleColl = pnl.Children;
uiEleColl.RemoveAt(btnCount - 1);
btnCount--;
}
pnl.InvalidateVisual();
}
}
}

运行效果如下: