原文:WPF自定义控件 —— 自绘篇
一般来说控件主要是画面呈现、事件的处理、布局自动化,当然完善的控件还应该牵涉设计时、UI自动化测试的定义。
首先我们来说最简单的画面的呈现。
一.在自定义控件上画矩形
增加一个自定义控件类:
打开创建的类重载OnRender函数并注释掉静态构造函数，代码如下
public class CustomerRender : Control
{
//static CustomerRender()
//{
// DefaultStyleKeyProperty.OverrideMetadata(typeof(CustomerRender), new FrameworkPropertyMetadata(typeof(CustomerRender)));
//}
protected override void OnRender(DrawingContext drawingContext)
{
drawingContext.DrawRectangle(Brushes.Bisque, null, new Rect(0, 0, 50, 50));
}
}
在Window1这个类中修改如下
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
CustomerRender customerRender = new CustomerRender();
customerRender.Width = 200;
customerRender.Height = 300;
this.Content = customerRender;
}
}
运行程序我们可以看到：
当然你还可以通过drawingContext来画圆圈、不规则矩形、圆角矩形和写文字等等。具体可以看DrawingContext 中的API介绍和MSDN文档。
二.拖动矩形
一般来说UI是数据的反应，UI的变化其实是后段数据的变化。我们一般在移动到方块上方后，按住鼠标开始拖动，那么在鼠标移动上去之后，我们首先判断此位置是否有矩形，点击鼠标的时候，我们记录点下的这个坐标为A，鼠标移动的时候我们根据移动时候鼠标所在坐标和原来的A坐标比较，然后把这个差值和矩形的开始坐标相加，通过InvalidateVisual()方法不断重画就达到了移动的效果。
如果你需要鼠标移动出窗口还可以移动该矩形请加CaptureMouse()来锁定当前鼠标，但不要忘记在鼠标放开的时候把它给释放掉ReleaseMouseCapture()。
我们在window类中为我们的控件赋上底色
InitializeComponent();
CustomerRender customerRender = new CustomerRender();
customerRender.Width = 200;
customerRender.Height = 300;
customerRender.Background = Brushes.Green;
this.Content = customerRender;
并在控件的OnRender函数中加入
drawingContext.DrawRectangle(Background, null,new Rect(new Point(0,0),this.RenderSize));
效果如图：
这时你拖动方块可能会发现方块可以被移出背景，这在WPF下是允许的，但有时候这又不符合情理，我们需要把多余的部分裁减掉。
protected override void OnRender(DrawingContext drawingContext)
{
Rect rect = new Rect(new Point(0, 0), this.RenderSize);
drawingContext.DrawRectangle(Background, null, rect);
//创建一个填充色为Bisque边框色为Orange,横坐标为2，纵坐标为3，宽度为80,长度为50的矩形
Pen pen = new Pen(Brushes.Orange, 1);
pen.Freeze();//冻结可以加快呈现速度
RectangleGeometry rectangleGeometry = new RectangleGeometry(rect);
rectangleGeometry.Freeze();
drawingContext.PushClip(rectangleGeometry);
drawingContext.DrawRectangle(Brushes.Bisque, pen, _rectangle);
drawingContext.Pop();
}
主要注意drawingContext.PushClip(rectangleGeometry);到drawingContext.Pop();之间是剪切的有效范围。
Pop()结束符不仅仅用于剪切，还适用于遮幕，Effect效果等有Push开头的那些玩艺。(关于GuidelineSet推荐一个网址：http://www.wpftutorial.net/DrawOnPhysicalDevicePixels.html)
剪切后的效果如下:
三.动画效果
当然我们也可以做些拖动预览效果如下:
实现的原理无非是拖动的时候画一个假矩形，并把该矩形呈现的代码放在剪切的效果之外，拖动结束后把假的位置给真的调用重画一遍就实现了。
我们能不能用动画效果使得矩形慢慢移动到指定位置，答案当然是肯定的。这里可以用System.Windows.Media.Animation命名空间下的一些方法来实现
RectAnimation rectAnimation = new RectAnimation
(_rectangle,_preivewRectangle,new Duration(TimeSpan.FromMilliseconds(600)));
drawingContext.DrawRectangle(Brushes.Bisque, pen, _rectangle,rectAnimation.CreateClock());
你也可以用来做颜色的变换，大小的变化等等。
四.多个矩形
有多个矩形可以把矩形放到一个集合中依次判断，层叠的话就是后段数据存放的先后顺序问题，UI显示的快慢和后段数据查找有直接的联系，这个也是算法的价值体现。
小结
这里讲的做法也是winform里的大多数实现方式，只不过WPF使得我们对像素处理关心的更少，自绘在WPF的应用中相对winform要少了很多，除非用在大数据量的地方，WPF复合控件能完成大部分的需求——只要你能熟练定义样式，并了解可视树，逻辑树，以及各个控件的用法。
本例代码下载
转载清注明出处
WPF自定义控件 —— 自绘篇
原文：https://www.cnblogs.com/lonelyxmas/p/12819989.html
