65.9K
CodeProject 正在变化。 阅读更多。
Home

多用途 XP Office 2003 风格的悬停和平面按钮，带容器栏

carloqueirolo
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.88/5 (95投票s)

2005 年 5 月 24 日

6分钟阅读

viewsIcon

265608

downloadIcon

3302

一款功能多样、用途广泛的按钮和按钮栏，具有完整的 Office 2003 色彩和风格。

Sample Image - lybralibrary592x444.jpg

引言

这个控件（HoverGradientButton）非常易于使用；图形和色彩界面的效果非常棒。最初的想法来自于 Victor Boba 的一篇好文章（感谢 Victor！）。HoverGradientButton 有很多属性，但默认属性让程序员可以拥有一个完全现成的 Office 2003 风格的界面。该组件支持三种不同的样式：HoverNormal、HoverCheck 和 HoverOption，这使得 HoverGradientButton 分别可以像普通的 Button、CheckBox 和 RadioButton 一样工作。核心组件 HoverGradientButton 配备了一个多功能的容器（HoverButtonBand），还有一个额外的 AutoArrange 属性。

此外，该库还包含 GradientPanelXP，一个专用的组件，继承自 Panel，并具有渐变等一些附加功能。

实现

只需将 HoverGradientButton 控件拖放到窗体上，即可开始使用。可选地，您可以将 HoverGradientButton 放在 HoverButtonBand 中，以获得附加功能和颜色组合。

ToolTip 可用：在 ToolTipText 属性中放入一些文本，并将 ToolTipActive 设置为 True 即可在按钮上看到 ToolTip。

用法

  • 将控件添加到工具箱（LybraVb.dll）。
  • 将 HoverGradientButton 拖放到 WinForm 或 HoverButtonBand 中。
  • 设置 ButtonType 属性。
  • 为按钮选择图像。
  • 开始！

关注点

两个组件都用 VB.NET 编写，并继承自 Panel。两个组件内部不包含任何其他额外的控件。颜色、文本和图像使用 FillRectangle、DrawString 和 DrawImage 方法绘制。

一个名为 GS（Graphic Support）的辅助类控制所有基本的 GDI+ 图形例程。

这是一个 GS 类中 Shared 方法的示例

    Public Shared Function _
    PaintGradientRectangle(ByVal g As Drawing.Graphics, _
                           ByVal aPointX As Integer, _
                           ByVal aPointY As Integer, _
                           ByVal aWidth As Integer, _
                           ByVal aHeight As Integer, _
                           ByVal aColor1 As Color, _
                           ByVal aColor2 As Color, _
                           ByVal aGradientMode As _
                                 Drawing2D.LinearGradientMode) _
                           As RectangleF

      Dim RectanglePaint As RectangleF = GS.XRectangleF(aPointX, _
                                          aPointY, aWidth, aHeight)
      Dim gradBrush As New _
          System.Drawing.Drawing2D.LinearGradientBrush(RectanglePaint, _
          aColor1, aColor2, aGradientMode)
      g.FillRectangle(gradBrush, RectanglePaint)
      Return RectanglePaint
    End Function

这里是一个使用 GS 类及其共享方法的示例

      'Paint the rectangle

      GS.PaintGradientRectangle(e.Graphics, 0, 0, Me.Width, Me.Height, _
                                            c1, c2, mGradientMode)


      'Draw the image

      e.Graphics.DrawImage(mImage, p.X, p.Y, mImage.Width, mImage.Height)

      'Write the text

      GS.WriteText(e.Graphics, Me.Text, Me.Font, _
                  Me.TextAlign, _
                  mTextQuality, _
                  Me.ForeColor, _
                  0, 0, Me.Width, Me.Height)

      'Draw the border

      GS.PaintBorder(e.Graphics, 0, 0, Me.Width, Me.Height, cb)

HoverButtonBand 的 AutoArrange 属性在设计时工作，即使在控件调整大小时也是如此。这是通过一个专门设计的 Friend 类（ButtonsReorder）实现的。

这是 ButtonsReorder 类

    Friend Class AlignButtons

      Public Sub New()
      End Sub

      Public Shared Sub _
             ButtonsReorder(ByRef aObjects As _
                            System.Windows.Forms.Control.ControlCollection, _
                            ByVal rType As HowReorder, _
                            ByVal rAlign As HowAlign, _
                            Optional ByVal iMargin As Integer = 0, _
                            Optional ByVal iSpacer As Integer = 0)

        If aObjects.Equals(Nothing) Then Exit Sub
        If aObjects.Count = 0 Then Exit Sub

        Dim CountOfControls As Integer = aObjects.Count

        Dim cContainer As Control = CType(aObjects.Item(0), Control).Parent
        Dim WidthOfContainer As Integer = cContainer.Width
        Dim HeightOfContainer As Integer = cContainer.Height
        Dim WidthOfControlli As Integer = 0
        Dim HeightOfControlli As Integer = 0

        Dim o As Control
        For Each o In aObjects
          WidthOfControlli += o.Width
          HeightOfControlli += o.Height
        Next

        Dim VariablePosition As Integer = 0
        Dim FixedPosition As Integer = 0

        Select Case rType
          Case HowReorder.Horizontal
            VariablePosition = iMargin
            FixedPosition = Convert.ToInt32((HeightOfContainer - o.Height) / 2)
            For Each o In aObjects
              o.Left = VariablePosition
              o.Top = FixedPosition
              If rAlign = HowAlign.Center Then 
                  iSpacer = Convert.ToInt32((WidthOfContainer - _
                            WidthOfControlli - iMargin) / (CountOfControls + 1))
              VariablePosition = VariablePosition + iSpacer + o.Width
            Next
          Case HowReorder.Vertical
            VariablePosition = iMargin
            FixedPosition = Convert.ToInt32((WidthOfContainer - o.Height) / 2)
            For Each o In aObjects
              o.Top = VariablePosition
              o.Left = FixedPosition
              If rAlign = HowAlign.Center Then
                  iSpacer = Convert.ToInt32((HeightOfContainer - _
                            HeightOfControlli - iMargin) / (CountOfControls + 1))
              VariablePosition = VariablePosition + iSpacer + o.Width
            Next
        End Select

      End Sub

    End Class

HoverButtonBand 容器可以完全控制按钮在垂直或水平方向上的位置。这非常有趣。这是通过属性 AutoArrange、AutoArrangeDirection、AutoArrangeAlignment、AutoArrangeButtonSpace 和 AutoArrangMargin 实现的。

图形外观

正如您所注意到的，我特别关注了控件的图形和色彩外观。我认为我达到了一个不错的结果。作为专门用于控件图形外观的属性的一部分，例如，我实现了一个新属性（TextQuality），它允许您设置文本的绘制方式。TextQuality 可以设置为 SystemDefault、AntiAlias 或 ClearType。将这些设置更改为 AntiAlias 或 ClearType 可能会略微降低绘制速度，但效果很棒。

HoverGradientButton 主要属性

  • ButtonType

    Enum。使用 HoverNormal 作为普通平面 Button。使用 HoverCheck 作为 CheckBox。使用 HoverOption 作为 RadioButton。

  • OptionGroup

    Integer。当 ButtonType 等于 RadioButton 时，此数字表示一组选项中的选项组。

  • BackColor1 和 BackColor2

    Color。鼠标不在控件上时，按钮的第一个和第二个颜色（渐变色）。

  • HoverColor1 和 HoverColor2

    Color。鼠标在控件上时，按钮的第一个和第二个颜色（渐变色）。

  • SelectedColor1 和 SelectedColor2

    Color。当控件被选中（ButtonType，HoverCheck 或 HoverOption）且鼠标不在控件上时，按钮的第一个和第二个颜色（渐变色）。

  • SelectedHoverColor1 和 SelectedHoverColor2

    Color。当控件被选中（ButtonType，HoverCheck 或 HoverOption）且鼠标在控件上时，按钮的第一个和第二个颜色（渐变色）。

  • ClickColor1 和 ClickColor2

    Color。鼠标单击控件时，按钮的第一个和第二个颜色（渐变色）。

  • Image

    Image。绘制在按钮上的图像。

  • ImageSelected

    Image。当控件被选中（ButtonType，HoverCheck 或 HoverOption）时，绘制在按钮上的图像。

  • HoverForeColor

    Color。鼠标在控件上时，文本的颜色。

  • Selected

    Boolean。当控件被选中（ButtonType，HoverCheck 或 HoverOption）时，按钮的值。

  • OptionGroup

    Integer。当 ButtonType 属性为 HoverOption 时，按钮所属的组。

  • ToolTipActive

    Boolean。指示 ToolTip 是否激活。

  • ToolTipText

    String。当光标在按钮上时显示的 ToolTip 文本。

HoverButtonBand 主要属性

  • BackColor1 和 BackColor1

    Color。容器（Band）的第一个和第二个颜色（渐变色）。

  • AutoArrange

    Boolean。控制是否自动对齐包含的按钮。

  • AutoArrangeDirection

    Enum。Horizontal 或 Vertical。控制对齐方向。

  • AutoArrangeAlignment

    Enum。控制包含按钮的对齐方式。可以是 Center 或 LeftOrTop（取决于 AutoArrangeDirection 确定的方向）。

  • AutoArrangeButtonSpace

    Integer。包含的按钮之间的距离。

  • AutoArrangeMargin

    Integer。按钮组的边距。

使用控件

如上所述，控件的使用非常简单直观。您也可以将 HoverGradientButton 和 HoverButtonBand 用作独立控件。不过，我建议将它们一起使用。请注意，最佳的图形效果是使用 24x24 的按钮尺寸，其中包含 16x16 的图像，或者使用 40x40 的按钮尺寸，其中包含 32x32 的图像（如果您打算不使用文本）。HoverButtonBand 的宽度（或垂直放置时的高度）与内部 HoverGradientButton 相同，这将为您带来最佳的图形和色彩效果。我强烈建议使用 PNG 图像而不是 ICO 或 BMP，并避免使用多格式图标。

将 HoverGradientButton 用作 CheckBox

将 ButtonType=HoverCheck 设置为 HoverGradientButton 会使其表现得像一个 CheckBox。当它被选中时，Selected 属性变为 True，并且图像会更改（如果您为 ImageSelected 属性设置了图像）。控件将保持选中状态，直到再次单击按钮。

将 HoverGradientButton 用作 RadioButton

将 ButtonType=HoverOption 设置为 HoverGradientButton 会使其表现得像一个 RadioButton。当它被选中时，Selected 属性变为 True，并且图像会更改（如果您为 ImageSelected 属性设置了图像）。所有具有相同 OptionGroup 属性的其他控件将失去选中状态（Selected=False），颜色将恢复为 BackColor1 和 BackColor2。

这是代码如何管理 ButtonType=HoverCheck 和 ButtonType=HoverOptions 的

    Private Sub HoverGradientButton_Click(ByVal sender As Object, _
                ByVal e As System.EventArgs) Handles MyBase.Click

      If mButtonType = HoverButtonType.HoverNormal Then Exit Sub
      If mButtonType = HoverButtonType.HoverOption Then
        If Not mSelected Then
          mSelected = True
          'Uncheck other buttons

          ClearOptionButtons.Clear(Me)
        End If
      Else
        mSelected = Not mSelected
      End If

    End Sub

IButtonControl 接口

IButtonControl 接口允许 HoverButtonBar 作为常规按钮工作。实现 IButtonControl 接口的控件会被识别，例如，被窗体的 AcceptButton 和 CancelButton 属性识别。现在 HoverButton 正确实现了 IButtonCommand 接口。

已知问题

我已知的唯一问题是 HoverButtonBar 中自动排列时的按钮顺序。有时，一个按钮会出现在一个看似随机的位置。这是因为我实际上无法完全控制 HoverButtonBar ControlsCollection 中的按钮顺序。如果您有任何建议来解决这个问题，请告诉我。

未来，现在

HoverButton 和相关控件已成为一个名为 Naxos Development 的大型项目的一部分。

历史

  • 2005 年 5 月 24 日 - 原始版本 (1.0)
  • 2005 年 5 月 30 日 - 版本 1.1
    • HoverGradientButton 不再是容器。
    • HoverGradientButton 在设计时不再显示网格。
    • 为 HoverButtonBand 和 HoverGradientButton 添加了 GradientMode。
    • 为 HoverButtonBand 和 HoverGradientButton 添加了 TextQuality 属性。
    • 提高了绘制速度。
    • 添加了 GS（Graphic Support）类，其中包含用于通用 GDI+ 例程的共享方法。
  • 2005 年 6 月 6 日 - 版本 1.1.7
    • 添加了 GradientPanelXP 组件。
    • 进行了少量增强和小的 bug 修复。
  • 2005 年 6 月 21 日 - 版本 1.2.0
    • 为按钮添加了 ToolTip 功能。
  • 2006 年 10 月 7 日 - 版本 1.3.1
    • 更改了基类（从 Panel 到 Control）；现在更轻量级。
    • 如果 Enabled = False，现在 Text 和 Image 已正确禁用（Enrico Detoma 的建议，感谢）。
    • 实现了 IButtonControl 接口（merlin.AT 的建议，感谢）。
    • 修复了垂直 HowRedorder.Vertical 时的 ButtonsReorder 错误（RichardJMoss 的建议，感谢）。
© . All rights reserved.