无法使 PictureBox 上的前端控件透明

Question

我正在尝试在 PictureBox 控件的顶部放置一个自定义用户控件，但我终其一生都不知道如何设置用户控件的透明度，这样它就不会切掉 PictureBox 图像。

我的用户控件由中间带有文本的 RectangleShape 组成，用于在图像顶部创建一个“徽章”图标（见下图）。 PictureBox 和 User Control 都位于 Panel 控件中，我设置了 PictureBox.SendToBack() 属性和 UserControl.BringToFront() 属性。

我剩下的是：

我的代码如下所示：

Option Explicit On
Option Strict On

Imports Microsoft.VisualBasic.PowerPacks

Public Class BadgeIcon
    Inherits UserControl

    Private _value As Integer
    Private canvas As New ShapeContainer
    Private Badge_Icon As New RectangleShape
    Private rect As New Rectangle
    Private m_BorderColor As Color = Color.White
    Private m_FillColor As Color = Color.Red
    Private m_BorderThickness As Integer = 2
    Private m_BadgeFont As New Font("Segoe UI", 7, FontStyle.Bold)
    Private m_BadgeText As String
    Private m_TextColor As New SolidBrush(Color.White)
    Private m_TextSize As Size
    Private m_TextPadding As Integer = 5

    Public Property Value() As Integer
        Get
            Return _value
        End Get
        Set(value As Integer)
            _value = value
            m_BadgeText = CStr(_value)
            m_TextSize = TextRenderer.MeasureText(m_BadgeText, m_BadgeFont)
            rect.Width = m_TextSize.Width + m_TextPadding
            rect.Height = m_TextSize.Height + m_TextPadding
            Me.Refresh()
        End Set
    End Property

    Protected Overrides ReadOnly Property CreateParams() As System.Windows.Forms.CreateParams
        Get
            Dim cp As CreateParams = MyBase.CreateParams
            cp.ExStyle = &H20
            Return cp
        End Get
    End Property


    Sub New()
        ' This call is required by the designer.
        InitializeComponent()
        SetStyle(ControlStyles.SupportsTransparentBackColor, True)
        SetStyle(ControlStyles.Opaque, False)
        SetStyle(ControlStyles.DoubleBuffer, True)
        SetStyle(ControlStyles.AllPaintingInWmPaint, True)
        SetStyle(ControlStyles.UserPaint, True)
        Me.BackColor = Color.FromArgb(0, 0, 0, 0)
        UpdateStyles()

        ' Add any initialization after the InitializeComponent() call.
        canvas.Parent = Me
        Badge_Icon.Parent = canvas
        canvas.BackColor = Color.FromArgb(0, 0, 0, 0)

        'Create Badge Icon
        With Badge_Icon
            .BackColor = Color.FromArgb(0, 0, 0, 0)
            .BorderColor = m_BorderColor
            .BorderWidth = m_BorderThickness
            .BorderStyle = Drawing2D.DashStyle.Solid
            .CornerRadius = 11
            .FillColor = m_FillColor
            .FillStyle = FillStyle.Solid
            .SelectionColor = Color.Transparent
        End With

        AddHandler Badge_Icon.Paint, AddressOf BadgeIcon_Paint
    End Sub

    Protected Overrides Sub OnPaint(e As PaintEventArgs)
        MyBase.OnPaint(e)
        DrawBadgeIcon(e)
    End Sub

    Public Sub DrawBadgeIcon(e As PaintEventArgs)
        Try
            'Alter the size of the icon to fix the text
            With Badge_Icon
                .Location = New Point(rect.Left + 1, rect.Top + 1)
                .Size = New Size(rect.Width, rect.Height - 1)
            End With

        Catch ex As Exception
            ErrorTrap(ex, "cls_NotificationBadgeIcon: DrawBadgeIcon()")
        End Try
    End Sub

    Private Sub BadgeIcon_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs)
        Dim textRect As New Rectangle(2, 2, m_TextSize.Width + m_TextPadding - 1, m_TextSize.Height + m_TextPadding - 2)

        'Draw the Text
        Dim flags As New StringFormat
        flags.Alignment = StringAlignment.Center
        flags.LineAlignment = StringAlignment.Center
        e.Graphics.TextRenderingHint = Drawing.Text.TextRenderingHint.ClearTypeGridFit
        e.Graphics.DrawString(m_BadgeText, m_BadgeFont, m_TextColor, textRect, flags)
    End Sub

End Class

然后将所有内容添加到我的主表单中，我调用以下内容：

Dim pic As New PictureBox
        pic.Image = My.Resources.Notifications
        pic.SizeMode = PictureBoxSizeMode.StretchImage
        pic.Location = New Point(21, 221)
        pic.Size = New Size(42, 29)
        pnlLeftMenuBar.Controls.Add(pic)
        pic.SendToBack()

Dim Counter_Notify As New BadgeIcon
Counter_Notify.Location = New Point(50, 240)
        pnlLeftMenuBar.Controls.Add(Counter_Notify)
        Counter_Notify.BringToFront()

并且只需使用Counter_Notify.Value = 1 来更新计数器值。

如何删除切掉背景图像的方形矩形？还是我应该以完全不同的方式进行设置？我对用户控件有点陌生。

任何帮助表示赞赏。谢谢

Answer 1

使用绘画事件，您可以直接在图片框本身上进行绘制。

Private Sub pb__Paint(sender As System.Object, e As System.Windows.Forms.PaintEventArgs) Handles pb.Paint
 Dim bgRect As New Rectangle({x,y,width,height})
 Dim textRect As New Rectangle(bgRect.X - {?}, bgRect.Y = {?}, width, height)
 e.Graphics.FillEllipse(New SolidBrush(Color.Red), bgRect)
 e.Graphics.DrawEllipse(New Pen(Color.White, 10), bgRect)
 Using sf As New StringFormat
  sf.LineAlignment = StringAlignment.Center
  sf.Alignment = StringAlignment.Center
 e.Graphics.DrawString("1", {your font}, {your brush}, textRect, sf)
 End Using
End Sub