如何在VB.NET中制作带圆角边框和阴影的自定义ComboBox组件

问题分析 #

当前自定义ComboBox代码常出现的问题包括：

• 重绘时未适配下拉按钮区域，导致圆角/边框断裂
• 阴影与圆角区域不匹配，出现生硬直角阴影
• 边框厚度的自定义逻辑未关联绘制流程，或绘制顺序错误导致边框被覆盖

修正后的自定义ComboBox实现代码 #

Imports System.Drawing.Drawing2D

Public Class CustomComboBox
    Inherits ComboBox

    Private _borderRadius As Integer = 8
    Private _borderWidth As Integer = 2
    Private _shadowColor As Color = Color.Gray
    Private _shadowOffset As Size = New Size(2, 2)

    ' 可自定义属性
    Public Property BorderRadius As Integer
        Get
            Return _borderRadius
        End Get
        Set(value As Integer)
            _borderRadius = Math.Max(2, value)
            Me.Invalidate()
        End Set
    End Property

    Public Property BorderWidth As Integer
        Get
            Return _borderWidth
        End Get
        Set(value As Integer)
            _borderWidth = Math.Max(1, value)
            Me.Invalidate()
        End Set
    End Property

    Public Property ShadowColor As Color
        Get
            Return _shadowColor
        End Get
        Set(value As Color)
            _shadowColor = value
            Me.Invalidate()
        End Set
    End Property

    Public Property ShadowOffset As Size
        Get
            Return _shadowOffset
        End Get
        Set(value As Size)
            _shadowOffset = value
            Me.Invalidate()
        End Set
    End Property

    Public Sub New()
        ' 关闭默认绘制，启用自定义重绘
        Me.DrawMode = DrawMode.OwnerDrawFixed
        Me.DropDownStyle = ComboBoxStyle.DropDownList
        Me.Padding = New Padding(_borderWidth + 2) ' 预留边框空间
    End Sub

    Protected Overrides Sub OnPaint(e As PaintEventArgs)
        MyBase.OnPaint(e)
        e.Graphics.SmoothingMode = SmoothingMode.AntiAlias

        ' 绘制阴影
        Dim shadowRect As New Rectangle(_shadowOffset.Width, _shadowOffset.Height, Me.Width - _shadowOffset.Width * 2, Me.Height - _shadowOffset.Height * 2)
        Using shadowPath As GraphicsPath = GetRoundedRectanglePath(shadowRect, _borderRadius)
            Using shadowBrush As New SolidBrush(Color.FromArgb(50, _shadowColor))
                e.Graphics.FillPath(shadowBrush, shadowPath)
            End Using
        End Using

        ' 绘制主体背景
        Dim mainRect As New Rectangle(0, 0, Me.Width - _shadowOffset.Width, Me.Height - _shadowOffset.Height)
        Using mainPath As GraphicsPath = GetRoundedRectanglePath(mainRect, _borderRadius)
            ' 填充背景色
            e.Graphics.FillPath(New SolidBrush(Me.BackColor), mainPath)

            ' 绘制边框
            Using borderPen As New Pen(Me.ForeColor, _borderWidth)
                e.Graphics.DrawPath(borderPen, mainPath)
            End Using
        End Using

        ' 绘制下拉按钮
        DrawDropDownButton(e.Graphics, mainRect)

        ' 绘制选中文本
        If Me.SelectedIndex >= 0 Then
            Dim textRect As New Rectangle(mainRect.X + Me.Padding.Left, mainRect.Y + Me.Padding.Top, mainRect.Width - Me.Padding.Left - Me.Padding.Right - 25, mainRect.Height - Me.Padding.Top - Me.Padding.Bottom)
            e.Graphics.DrawString(Me.SelectedItem.ToString(), Me.Font, New SolidBrush(Me.ForeColor), textRect, New StringFormat With {.Alignment = StringAlignment.Near, .LineAlignment = StringAlignment.Center})
        End If
    End Sub

    ' 生成圆角矩形路径
    Private Function GetRoundedRectanglePath(rect As Rectangle, radius As Integer) As GraphicsPath
        Dim path As New GraphicsPath()
        Dim diameter As Integer = radius * 2

        ' 左上角圆弧
        path.AddArc(rect.X, rect.Y, diameter, diameter, 180, 90)
        ' 右上角圆弧
        path.AddArc(rect.X + rect.Width - diameter, rect.Y, diameter, diameter, 270, 90)
        ' 右下角圆弧
        path.AddArc(rect.X + rect.Width - diameter, rect.Y + rect.Height - diameter, diameter, diameter, 0, 90)
        ' 左下角圆弧
        path.AddArc(rect.X, rect.Y + rect.Height - diameter, diameter, diameter, 90, 90)
        ' 闭合路径
        path.CloseAllFigures()

        Return path
    End Function

    ' 绘制自定义下拉按钮
    Private Sub DrawDropDownButton(g As Graphics, mainRect As Rectangle)
        Dim buttonRect As New Rectangle(mainRect.Right - 25, mainRect.Top, 25, mainRect.Height)
        ' 按钮背景
        Using buttonBrush As New SolidBrush(Color.FromArgb(20, Me.ForeColor))
            g.FillRectangle(buttonBrush, buttonRect)
        End Using
        ' 按钮边框（右侧圆角）
        Dim buttonPath As New GraphicsPath()
        buttonPath.AddArc(buttonRect.X, buttonRect.Y, _borderRadius * 2, _borderRadius * 2, 180, 90)
        buttonPath.AddLine(buttonRect.Right, buttonRect.Y, buttonRect.Right, buttonRect.Bottom)
        buttonPath.AddArc(buttonRect.X, buttonRect.Bottom - _borderRadius * 2, _borderRadius * 2, _borderRadius * 2, 90, 90)
        buttonPath.CloseAllFigures()
        Using pen As New Pen(Me.ForeColor, _borderWidth)
            g.DrawPath(pen, buttonPath)
        End Using
        ' 绘制下拉箭头
        Dim arrowPoints As Point() = {
            New Point(buttonRect.Left + 8, buttonRect.Top + buttonRect.Height \ 2 - 2),
            New Point(buttonRect.Right - 8, buttonRect.Top + buttonRect.Height \ 2 - 2),
            New Point(buttonRect.Left + buttonRect.Width \ 2, buttonRect.Top + buttonRect.Height \ 2 + 2)
        }
        g.FillPolygon(New SolidBrush(Me.ForeColor), arrowPoints)
    End Sub

    ' 处理下拉列表的圆角（可选）
    Protected Overrides Sub OnDropDown(e As EventArgs)
        MyBase.OnDropDown(e)
        If Me.DropDown IsNot Nothing Then
            ' 可以给下拉列表也添加圆角，需要额外处理
            ' 这里示例简单设置，如需完整效果可重绘下拉列表
            Me.DropDown.Region = New Region(GetRoundedRectanglePath(New Rectangle(0, 0, Me.DropDown.Width, Me.DropDown.Height), _borderRadius))
        End If
    End Sub
End Class

关键实现说明 #

• 圆角路径生成：通过GetRoundedRectanglePath方法统一生成圆角矩形路径，确保边框、阴影、背景的圆角一致性
• 分层绘制：按照阴影→背景→边框→按钮→文本的顺序绘制，避免元素覆盖
• 可调节属性：将边框厚度、圆角半径、阴影颜色和偏移量封装为公共属性，修改后自动触发重绘
• 下拉按钮兼容：单独绘制下拉按钮区域，保证圆角边框在按钮处不会断裂

常见问题排查 #

• 边框显示不全：检查Padding属性是否预留了足够的边框空间，确保内容不会覆盖边框
• 阴影效果生硬：调整ShadowColor的透明度（使用Color.FromArgb(alpha, color)），或者减小ShadowOffset的数值
• 下拉列表圆角不生效：需要额外处理下拉控件的重绘，示例中提供了简单的区域设置，如需更完善的效果可以自定义下拉列表控件

内容的提问来源于stack exchange，提问作者dlaksmi