使用 Photoshop 设计 WinForms 控件

• 下载源代码 - 3 MB
• 下载演示项目 - 3 MB

引言

作为一名软件开发人员和自由职业者，为客户发布一个美观的用户界面对我来说非常重要。这就是为什么我总是遵循最佳方法来满足客户。

在本文中，我将解释我一直使用的最佳方法之一，该方法可以在不完全依赖 GDI+ 的情况下制作出出色的用户界面，而且如果您是一名设计师，还可以利用您的设计技能，这样您就不必一直学习 GDI+ 了。

教程系列

• 复选框

背景

没错，我既是软件开发人员也是设计师，所以我不想让我的设计技能白白浪费，因为我可以在很多领域使用它们。

为什么选择 Windows Forms

没有特别的原因，一旦您学会了如何使用这种方法，您就可以将其步骤应用于您的项目（WinForms、WPF...）。

为什么选择 Photoshop

事实上，Adobe Photoshop 是迄今为止我用过的最好的设计徽标、布局或任何其他东西的工具，当然，如果您不熟悉它并且喜欢其他工具，那么请尽管使用它。

不过，我知道很多人会说“我不是设计师，我该怎么办？”，所以……

如何在 Photoshop 中绘制控件

我从没想过我会在 CodeProject.com 上发布设计教程的那一天会到来，但这也是没办法的事。但是，如果您没有众多的设计基础知识，我们就无法进一步。

在这里，我将向您展示如何在 Adobe Photoshop 中绘制您自己的按钮，这就像喝水一样简单（我将向您展示的示例很容易：D）。

首先，创建一个具有与此相同属性的新文档文件

创建新的图像文件后，选择圆角矩形工具（矩形工具 -> *长按* -> 圆角矩形工具）

现在，简单地绘制它并让它填充整个背景：

现在通过属性窗口，使其填充整个图层。您也可以从该窗口更改前景色，要显示属性面板，请通过（窗口 -> 属性）。

其次，一个圆角矩形不足以制作一个漂亮的用户控件（按钮），它是平坦且圆角的，没有外部效果。

让我们为我们心爱的框架添加样式：

（添加图层样式）

事实上，每个人都有自己独特的风格，所以我不会推荐任何风格，也不会命令您使用任何特定的属性，伙计，自由发挥吧。

嗯，添加图层样式后，我得到了这个布局。 :)

这就是设计方面的一切了！

完成本文后，您将能够让您绘制的布局像这样工作

让我们继续。 :)

如何创建一个动态按钮

首先，您需要创建一个组件类，它将是我们的主按钮

创建这样一个类后，让我们开始绘制它，怎么做？

我们只需要绘制 3 个框架，它们将根据鼠标事件一个接一个地出现。

MouseEnter

MouseLeave | MouseUp (相同帧)

MouseDown

当然，您可以根据自己的喜好定制您的框架。

如何绘制 3 个不同的框架

要创建 3 个不同的图像，这些图像将根据鼠标事件而改变，您可以遵循两种程序

1. 绘制 3 个布局并将每个布局设置为特定事件。您可以使用自己的技术完成此步骤，因为没有特定的绘制方法。
2. 只绘制 1 个布局，创建 3 个不同颜色的副本

   

要使用 Adobe Photoshop 更改颜色，请遵循以下步骤

1. 上下文菜单
2. Image
3. 调整
4. 色相/饱和度...

   

创建 3 个图像后，将它们添加到资源中并声明 3 个对象，如以下代码所示来存储它们

private Image Button() => Properties.Resources.Button;               //Red-Brown button
private Image HoveredButton() => Properties.Resources.ButtonHov;     //Blue button
private Image ClickedButton() => Properties.Resources.ButtonClicked; //Black-Whie button

为了让按钮的颜色根据代码事件而改变，我们需要做

 public PsButton()
        {
            this.Size = new Size(this.Button().Size.Width, this.Button().Size.Height);
            this.Image = this.Button();
            this.SizeMode = PictureBoxSizeMode.StretchImage;
            this.MouseEnter += (sender, args) => this.Image = this.HoveredButton();
            this.MouseLeave += (sender, args) => this.Image = this.Button();
            this.MouseUp += (sender, args) => this.Image = this.Button();
            this.MouseDown += (sender, args) => this.Image = this.ClickedButton();            
        }

创建按钮布局：完成。

实际上，执行这些步骤只会给您一个动态框，当您单击或移动鼠标光标时，它的颜色会发生变化，那么还剩下什么呢？

事实上，每个普通按钮都必须包含文本，这里 GDI+ 的作用就来了！使用 GDI+，我们将在我们漂亮的按钮中心打印特定的文本。

如何在按钮中间打印文本

要做到这一点，我们需要将我们的语言从英语改为宇宙语言并应用一些数学。

要采取的第一步是获取string，然后设置它，之后，我们必须在OnPaint方法中测量它，同时覆盖它

SizeF s = g.MeasureString("OK", Font); 

（模拟）

1. 

2. 

3. 

我假设模拟非常清晰，但是，数学更友好

""

代码

 private void OnPaint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            var Dimensions = e.ClipRectangle;
            SizeF s = g.MeasureString(this.Text, Font);
          g.DrawString(
                this.TextBox.Text,
                this.Font, this.ForeColor,
                Dimensions.Width / 2 - (s.Width / 2),
                Dimensions.Y + 4
                );
     }

应用此方程将在按钮的视觉中心打印我们的string。

如何创建更好看的 MessageBox

它是一个MessageBox控件吗？不，事实上，我们要做的就是模仿一个。

事实上，该控件是一个Form，我们将其FormBorderStyle设置为None，然后根据我们的需要设置其背景图像。

消息的content和Title是两个public标签

        public System.Windows.Forms.Label Title;
        public System.Windows.Forms.Label Content; 

（请记住明智地设置它们的位置，使其看起来可爱）。

现在让我们继承我们心爱的Show方法：

 public void Show(string Content, string Title)
        {
            this.Title.Text = Title;
            this.Content.Text = Content;
            this.Show();
        }

各位，就这些了！♥

如何使用代码

我做了一个简单的库，其中包含 3 个用户控件

添加 PsButtons 或登录表单非常容易，只需拖放控件即可。

如果您要问我为什么没有创建像OnClickImage,HoveredImage...这样的属性（Image(s)），并且您想知道我是否会创建这些属性，那么您最好不要再抱怨了，伙计，原因有 2 个

• 我在这里是为了解释一种创建更好看控件的方法，而不是分享一个。
• 我没有空闲时间，你知道学校的事。

当谈到PsMessageBox时，您不会注意到显示此msgBox或标准消息框之间有什么大的区别，如以下代码所示

PsMessageBox messageBox = new PsMessageBox();
messageBox.Show("Welcome back , king.","Connected");

示例

我包含的示例是一个登录表单（壁纸来自《恶魔城：暗影之王 2》视频游戏——科乐美）。

问题

它很大程度上依赖于资源。

历史

• 2016年5月10日：首次发布
• 2016年6月23日：添加了另一个教程