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开头的那些玩艺。

剪切后的效果如下

三.动画效果
当然我们也可以做些拖动预览效果如下:

实现的原理无非是拖动的时候画一个假矩形，并把该矩形呈现的代码放在剪切的效果之外，拖动结束后把假的位置给真的调用重画一遍就实现了。

我们能不能用动画效果使得矩形慢慢移动到指定位置，答案当然是肯定的。这里可以用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复合控件能完成大部分的需求——只要你能熟练定义样式，并了解可视树，逻辑树，以及各个控件的用法。