C#-利用自定义控件创建箭头控件

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

业务都有对应的流程，如果在软件中有这么一个界面能够描述业务的全部流程，并告诉你下一步的操作是什么，对于软件使用者来说更加方便，简单的来说就是流程图，一步到另一步的指向，我们采用箭头来表示，这个箭头怎么展示呢？方案一可以使用图片，绘制各种样式的箭头；方案二使用WPF的自定义控件来进行绘制，通过参数来控制方向，转折等等。

创建自定义控件的方式

WPF中创建自定义控件的三种方式：继承UserControl，继承Control，继承FrameworkElement，前面两种就应该可以满足大部分的需求了，这里以一个简单的箭头控件来介绍下用法。

创建自定义控件

1.向解决方案中添加windows窗体，目的用来显示我们创建的自定义控件。这里我创建一个ArrowView的窗口类。

2.鼠标右键->添加->新建项->自定义控件，这里我们命名为Arrow.cs，接下来编写箭头的代码，我们可以给几个属性，比如箭头的颜色，箭头边框的颜色，边框的跨度等等，你可以增加你需要控制的属性。

3.我们通过绘制的方式来构建一个箭头的图形，设置好箭头外周的关键点，然后进行绘制，填充，代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace Demo.CustomControl
{
    public class Arrow : Control
    {
        static Arrow()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Arrow), new FrameworkPropertyMetadata(typeof(Arrow)));
        }
        /// <summary>
        /// 箭头颜色
        /// </summary>
        private SolidColorBrush m_ArrowColor;
        public SolidColorBrush ArrowColor
        {
            get
            {
                return m_ArrowColor;
            }
            set
            {
                m_ArrowColor = value;
            }
        }
        /// <summary>
        /// 箭头边框颜色
        /// </summary>
        private SolidColorBrush m_ArrowBorderColor;
        public SolidColorBrush ArrowBorderColor
        {
            get
            {
                return m_ArrowBorderColor;
            }
            set
            {
                m_ArrowBorderColor = value;
            }
        }
        /// <summary>
        /// 箭头边框宽度
        /// </summary>
        public double m_ArrowBorder = 0;
        public double ArrowBorder
        {
            get
            {
                return m_ArrowBorder;
            }
            set
            {
                m_ArrowBorder = value;
            }
        }
        protected override void OnRender(DrawingContext drawingContext)
        {
            drawingContext.DrawGeometry(ArrowColor, new Pen(ArrowBorderColor, 1), ArrowDraw());
        }
        private StreamGeometry ArrowDraw() 
        {
            StreamGeometry streamGeometry = new StreamGeometry();
            var point0 = new Point(this.ActualWidth/3,0);
            var point1 = new Point(this.ActualWidth / 3*2, 0);
            var point2 = new Point(this.ActualWidth / 3*2, this.ActualHeight/3*2);
            var point3 = new Point(this.ActualWidth, this.ActualHeight/3*2);
            var point4 = new Point(this.ActualWidth / 2, this.ActualHeight);
            var point5 = new Point(0, this.ActualHeight/3*2);
            var point6 = new Point(this.ActualWidth/3,this.ActualHeight/3*2);
            using (StreamGeometryContext streamGeometryContext = streamGeometry.Open()) 
            {
                streamGeometryContext.BeginFigure(point0,true,false);
                streamGeometryContext.LineTo(point1, true, true);
                streamGeometryContext.LineTo(point2, true, true);
                streamGeometryContext.LineTo(point3, true, true);
                streamGeometryContext.LineTo(point4, true, true);
                streamGeometryContext.LineTo(point5, true, true);
                streamGeometryContext.LineTo(point6, true, true);
                streamGeometryContext.LineTo(point0, true, true);
            }
            return streamGeometry;
        }
    }
}

3.重新生成下项目，打开视图->工具箱，我们回到ArrowView的设计窗口，在工具箱中我们就能够找到我们刚才创建的自定义箭头控件Arrow，将其拖到我们需要显示的窗口，然后设置我们刚才定义的一些属性。

<CustomControl:Arrow ArrowColor="AliceBlue" ArrowBorder="1" ArrowBorderColor="Red" Height="100" Width="100"/>

4.至此，我们可以通过自定义控件创建出箭头控件了，可以通过此方法创建出更复杂的控件。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情