使用Photoshop设计WinForms控件：复选框

• 下载源代码 - 162.8 KB

引言

本文是使用Photoshop设计WinForms控件系列的第一篇文章，我将在这篇文章中解释如何根据您的设计和编码技能来“设计”和“编写代码”您自定义的CheckBox控件。

基础

实际上，当我开始撰写这些文章时，我意识到这里很多人对设计和绘画一无所知，因此对他们来说，学习如何在未来的项目中利用这种方法将是一项艰巨的任务。

在这种情况下，我将重点介绍我为创建上面显示的CheckBox所采取的步骤和进行的活动。

让我们继续。 :)

设计复选框行为

这是最重要的部分。实际上，我们要做的是绘制我们的CheckBox框架，这些框架会根据鼠标事件而发生变化，正如我在主要文章中解释的那样。

首先，我们必须创建一个具有以下属性的新窗口

创建完窗口后，就开始设计部分。

正如标题所示，当该窗口设置为false时，它将是我们的默认checkbox状态。

我们现在要做的是绘制一个中间为空的矩形。有很多方法和教程可以遵循，但在这里，我将展示我认为最简单的一种。

要创建默认框架，我们必须执行以下步骤

1. 放大图层以获得更专业的视图（我建议您选择3200%的缩放比例）

   

2. 选择油漆桶工具（其默认颜色为黑色）

   并单击缩放区域使其全部变黑或您选择的任何颜色。

3. 使用矩形选框工具选择我们将要擦除的区域

   。选择区域后，只需使用魔术橡皮擦工具将其删除。

   

最终结果看起来像这样：

好了！默认视图框架已完成。

悬停框架

悬停框架是一个矩形，周围环绕着奇特的晕圈（它也是矩形：D），表明CheckBox现在正处于悬停状态。

要设计这样的东西，我们将绘制与开头相同的默认框架，但会在其周围绘制另一个矩形。

1. 使用油漆桶工具，用蓝色填充区域

   

2. 现在我们将再次选择一个区域，但不是使用橡皮擦，我们将再次使用油漆桶工具（黑色）并对其进行绘制

   

3. 现在，完成此部分后，我们将简单地擦除黑色矩形的内部，使其看起来像一个带有奇特蓝色光晕的默认视图：D。

最终结果应如下所示：

单击框架

此框架是其中最简单的，您只需开始执行默认布局步骤的设计，然后使用油漆桶工具而不是橡皮擦工具，并用蓝色填充矩形即可。

最终结果如下所示：

工作原理

PsCheckBox（Photoshop CheckBox）根据鼠标事件的行为而变化

• 默认视图
• 鼠标悬停
• 鼠标单击

使用精心设计好的图片创建复选框

创建一个新的class.cs

public class PsCheckBox : CheckBox

将图像加载到资源并创建我们的类后，首先要做的是声明对象来存储它们

        /// <summary>
        /// The default image
        /// </summary>        
        private Image initImage => Properties.Resources.Init_false;
        /// <summary>
        /// The hovered Image
        /// </summary>
        private Image Hovered => Properties.Resources.Hovered;
        /// <summary>
        /// The clicked Image
        /// </summary>
        private Image Clicked => Properties.Resources.Clicked;
        /// <summary>
        /// Ticked icon
        /// </summary>
        private Image TickTock => Properties.Resources.TickTock;

完成此操作后，我们必须创建一个PictureBox来承载我们的框架

        private PictureBox Layout = new PictureBox();

我们刚刚声明的这个PictureBox将添加到我们的CheckBox控件中，我们将利用它的事件来完成目标任务。

设置其属性

#region Layout properties
            this.Layout.BackColor = Color.Transparent;
            this.Layout.BackgroundImage = this.initImage;
            this.Layout.Visible = true;
            this.Layout.BackgroundImageLayout = ImageLayout.Stretch;
            Set16(this.Layout);
            this.Layout.Location = new Point(0, 0);
            this.Layout.MouseEnter += (sender, args) =>
            {
                this.Layout.BackgroundImage = this.Hovered;
                Set18(this.Layout);
            };
            this.Layout.MouseClick += (sender, args) => {
                this.ClickEvent();

            };
            this.Layout.MouseLeave += (sender, args) =>
            {
                this.Layout.BackgroundImage = this.initImage;
                Set16(this.Layout);
            };
            this.Layout.MouseDown += 
                      (sender, args) => this.Layout.BackgroundImage = this.Clicked;
            this.Layout.MouseUp += 
                      (sender, args) => this.Layout.BackgroundImage = this.initImage;
#endregion

现在，PictureBox（我们的布局）将像一个更好的自定义CheckBox控件一样正常工作。

要使其看起来像已选中，我们必须在框的中间绘制我们的TickTock图像

            if (this.Checked)
            {
                e.Graphics.DrawImage(this.TickTock, 2, 2, 12, 12);
            }

实现

BoxColor可以用来更改框的颜色。

Using the Code

只需像普通的CheckBox控件一样将控件拖放到窗体上即可。

历史

• 2016年6月11日：初始版本