创建发光按钮

• 下载演示项目 - 94.2 KB
• 下载源代码 - 97.8 KB

引言

这是我第一次向任何开源网站投稿。因为我从这个网站获得了许多有用的文章，我很乐意为这个伟大的网站做出贡献。

本文将解释如何制作一个具有发光功能的按钮。

背景（可选）

当我安装 Windows Vista 时，它的外观让我惊叹不已。它有一个非常漂亮的用户界面和许多引人注目的控件。这让我开始考虑制作类似的东西。从那时起，我就创建了一些看起来像 Vista 组件的华丽控件。此外，我一直想写一篇文章或教程来分享我的知识。最后，在创建这个发光按钮控件时，我决定也为它写一篇文章。

那么为什么是发光按钮呢？自从我玩 Vista Windows 以来，我就对这个控件很感兴趣，尤其是它的最小化、最大化和关闭按钮。它们具有一些很酷的发光效果。感谢 .NET Framework 2.0，创建它们变得更容易了。

使用代码

基本上，要创建发光效果，您必须创建一个“层”，该层将使用 GDI+ 创建发光效果。不幸的是，.NET Framework 2.0 不允许一个控件使其他控件半透明。或者说，当您将一个控件放置在另一个控件之上时，您看不到下面的控件，即使您在上层控件中设置了完全透明度。此按钮的技巧是请求周围的另一个按钮为其控件创建发光层。

由于我们希望其他发光控件产生发光效果，我们需要该控件的状态层

Public Enum LayerStatus
    None = 0
    Self = 1
    TopLeft = 2
    Top = 3
    TopRight = 4
    Left = 5
    Right = 6
    BottomLeft = 7
    Bottom = 8
    BottomRight = 9
End Enum

现在我们有了该控件的状态，可以按请求创建层。如果必须要求另一个周围的按钮产生发光效果，如果按钮位于边缘、侧面、顶部、底部等，我们该如何操作？对于这个问题，我们需要一个特殊的容器来容纳我们的控件，因此边缘或侧面的控件可以要求此容器产生发光效果。我们将其命名为“Grid”。

我们将添加的另一个功能是动态更改主题的能力。为此，我们将使用名为 GlassColorTable 的颜色表类以及为我们的控件定义的一些颜色。我们将其命名为 ColorSet。另外请记住，一个按钮有四个默认状态，分别是：普通、高亮显示（鼠标悬停）、按下和禁用。目前，我没有包括禁用状态，因为我没有足够的时间来试验它。我将在更新我的文章时将其包含在内。

Public Interface IGlassColor
    Enum States
        Normal = 0
        Highlighted = 1
        Pressed = 2
        Disabled = 3
    End Enum

    Sub NormalState()
    Sub HighlightState()
    Sub PressedState()
    Sub DisabledState()
End Interface

Public Class ColorSet
    'Normal State
    Public BackgroundHigh As Color
    '.
    '.
    '.
    Public TextColor As Color

    'Highlight State
    Public BackgroundHighFocus As Color
    '.
    '.
    '.
    Public TextColorFocus As Color

    'Glow Set
    Public GlowCenter As Color
End Class

Public Class GlassColorTable
    Implements IGlassColor

    Protected _BackgroundHigh As Color
    Protected _BackgroundLow As Color
    Protected _ShineHigh As Color
    Protected _ShineLow As Color
    Protected _BorderLeft As Color
    Protected _BorderRight As Color
    Protected _BorderTop As Color
    Protected _BorderBottom As Color
    Protected _TextColor As Color
    Protected _GlowCenter As Color

    Private _State As IGlassColor.States
    Private _cSet As ColorSet

    Public Overridable ReadOnly Property BackgroundLow() As Color
        Get
            Return _BackgroundHigh
        End Get
    End Property
    
    '.
    '.
    '.
End Class

要动态更改主题，我们必须创建一个属性。

<Browsable(False)> _
Public Property Renderer() As ColorSet
    Get
        Return _ColorTable.Renderer
    End Get
    Set(ByVal value As ColorSet)
        _ColorTable.Renderer = value
        _ColorTable.State = IGlassColor.States.Normal
        Me.Refresh()
    End Set
End Property

既然我们现在有了更改按钮主题的能力，我们必须让按钮知道我们希望从另一个控件分层哪个颜色。

<Browsable(False)> _
Public Property LayerColor() As Color
    Get
        Return _ColorTable.GlowCenter
    End Get
    Set(ByVal value As Color)
        _LayerColor = value
    End Set
End Property

所以，最重要的一部分完成了。是时候将它们用于我们的应用程序了。由于我们必须从另一个控件寻求帮助来产生发光效果，我们必须在每个控件的事件中设置“鼠标进入”和“鼠标离开”事件。

Private Sub GlowButton1_MouseEnter(ByVal sender As Object, 
    ByVal e As System.EventArgs) Handles GlowButton1.MouseEnter
    GlowButton2.Layer = GlowingButton.GlowButton.LayerStatus.Left
    GlowButton4.Layer = GlowingButton.GlowButton.LayerStatus.Top
    GlowButton5.Layer = GlowingButton.GlowButton.LayerStatus.TopLeft

    GlowButton2.LayerColor = GlowButton1.LayerColor
    GlowButton4.LayerColor = GlowButton1.LayerColor
    GlowButton5.LayerColor = GlowButton1.LayerColor

    Grid1.GlowColor = GlowButton1.LayerColor
    Grid1.GlowStartPoint = New Point(GlowButton1.Location.X - 7, 
        GlowButton1.Location.Y - 7)
    Grid1.GlowStyle = GlowingButton.Grid.GlowStyles.TopLeft
End Sub

Private Sub GlowButton1_MouseLeave(ByVal sender As Object, 
    ByVal e As System.EventArgs) Handles GlowButton1.MouseLeave
    GlowButton2.Layer = GlowingButton.GlowButton.LayerStatus.None
    GlowButton4.Layer = GlowingButton.GlowButton.LayerStatus.None
    GlowButton5.Layer = GlowingButton.GlowButton.LayerStatus.None

    Grid1.GlowStyle = GlowingButton.Grid.GlowStyles.None
End Sub

要动态更改主题，请使用 Renderer 属性。

For Each g As GlowingButton.GlowButton In Grid1.Controls
    g.Renderer = New GlowingButton.DiamondRed
Next

关注点

由于我们需要要求其他控件应用效果，我们必须设置应用程序中的每个控件。设置所有内容将需要时间，尤其是在我们使用许多按钮时。为了解决这个问题，我建议您创建一个继承 Grid 控件的类，将所有发光按钮放在网格中，并使用 AddHandler 方法自动执行所需的设置。当我有更多空闲时间时，我将在单独的文章中对此进行说明。

关于演示的其他说明：你们中的一些人是否注意到了我创建此控件的另一个原因？是的，这是一个数独难题！我最初使用此控件的动机是创建一个数独难题求解器，该求解器可以应用自定义区域（这就是它需要主题或颜色集的原因）。求解器本身还有很长的路要走，因为我包含了很多有用的功能。

就是这样。

历史

2007年4月20日：原文。