Creating a Rounded Rectangle w/ Transparent Corners.

[FredFrothen]

I know how to create the Rounded Rectangle, but what i don't know how to do, is make the area outside of the rounded rectangle (the corners) become transparent.

This is going to be used on a usercontrol, so i really need it to be transparent and not just blend in (ie adapt to the colour of the parent form).

Thanks.

[.paul.]

try this:

Public Class UserControl1
 
    Private Sub UserControl1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        MyBase.Region = New Region(RoundedRec(0, 0, MyBase.Width - 10, MyBase.Height - 10))
    End Sub
 
    Private Function RoundedRec(ByVal X As Integer, ByVal Y As Integer, ByVal Width As Integer, ByVal Height As Integer) As System.Drawing.Drawing2D.GraphicsPath
        ' Make and Draw a path.
        Dim graphics_path As New System.Drawing.Drawing2D.GraphicsPath
        graphics_path.AddLine(X + 10, Y, X + Width, Y) 'add the Top line to the path
 
        'Top Right corner        
        Dim tr() As Point = { _
        New Point(X + Width, Y), _
        New Point((X + Width) + 4, Y + 2), _
        New Point((X + Width) + 8, Y + 6), _
        New Point((X + Width) + 10, Y + 10)}
 
        graphics_path.AddCurve(tr)  'Add the Top right curve to the path
 
        'Bottom right corner 
        Dim br() As Point = { _
        New Point((X + Width) + 10, Y + Height), _
        New Point((X + Width) + 8, (Y + Height) + 4), _
        New Point((X + Width) + 4, (Y + Height) + 8), _
        New Point(X + Width, (Y + Height) + 10)}
 
        graphics_path.AddCurve(br)  'Add the Bottom right curve to the path
 
        'Bottom left corner
        Dim bl() As Point = { _
        New Point(X + 10, (Y + Height) + 10), _
        New Point(X + 6, (Y + Height) + 8), _
        New Point(X + 2, (Y + Height) + 4), _
        New Point(X, Y + Height)}
 
        graphics_path.AddCurve(bl)  'Add the Bottom left curve to the path
 
        'Top left corner
        Dim tl() As Point = { _
        New Point(X, Y + 10), _
        New Point(X + 2, Y + 6), _
        New Point(X + 6, Y + 2), _
        New Point(X + 10, Y)}
 
        graphics_path.AddCurve(tl)  'add the Top left curve to the path
 
        Return graphics_path
 
    End Function
 
End Class

[FredFrothen]

Thanks for the reply, it does work to an extent, but not quite how i'd like it.
Is there any other method of getting a similiar result?

[.paul.]

how does it not work?

[FredFrothen]

I need the corners to look like this:


I'm currently editing the code you posted above to suit this need althought it's taking me a while because i'm stupid and can't figure out in which order the x and y are layed out within the points...

But i will eventually sort that out. but the next part is a need to run a 1 pixel border around this in colour A then fill within that border with colour B.

[.paul.]

show me your rounded rectangle code + i'll help you convert it + draw a colored border

[FredFrothen]

currently do it on a borderless form just so i can test it easier than a usercontrol. Also so far i've only got the top left corner correct, working on the top right corner. i'm currently 1 pixel out.


Thanks for this dude.

 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Me.Region = New Region(RoundedRec(0, 0, Me.Width - 3, Me.Height - 3))
    End Sub

    Private Function RoundedRec(ByVal X As Integer, ByVal Y As Integer, ByVal Width As Integer, ByVal Height As Integer) As System.Drawing.Drawing2D.GraphicsPath
        ' Make and Draw a path.
        Dim graphics_path As New System.Drawing.Drawing2D.GraphicsPath
        graphics_path.AddLine(X + 3, Y, X + Width, Y) 'add the Top line to the path

        'Top Right corner        
        Dim tr() As Point = { _
        New Point(X + Width, Y + 1), _
        New Point((X + Width) + 0, Y + 2), _
        New Point((X + Width) + 0, Y + 0), _
        New Point((X + Width) + 3, Y + 3)}

        graphics_path.AddCurve(tr)  'Add the Top right curve to the path

        'Bottom right corner 
        Dim br() As Point = { _
        New Point((X + Width) + 10, Y + Height), _
        New Point((X + Width) + 8, (Y + Height) + 4), _
        New Point((X + Width) + 4, (Y + Height) + 8), _
        New Point(X + Width, (Y + Height) + 10)}

        graphics_path.AddCurve(br)  'Add the Bottom right curve to the path

        'Bottom left corner
        Dim bl() As Point = { _
        New Point(X + 10, (Y + Height) + 10), _
        New Point(X + 6, (Y + Height) + 8), _
        New Point(X + 2, (Y + Height) + 4), _
        New Point(X, Y + Height)}

        graphics_path.AddCurve(bl)  'Add the Bottom left curve to the path

        'Top left corner
        Dim tl() As Point = { _
        New Point(X, Y + 3), _
        New Point(X + 1, Y + 1), _
        New Point(X + 1, Y + 1), _
        New Point(X + 3, Y)}

        graphics_path.AddCurve(tl)  'add the Top left curve to the path

        Return graphics_path

    End Function

[.paul.]

try this. used a 10 pixel corner as a 3 pixel corner is hardly noticeable:

Public Class UserControl1
 
    Private Sub UserControl1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        MyBase.BackColor = Color.Red
        MyBase.Region = New Region(roundedRectangle(0, 0, MyBase.Width - 10, MyBase.Height - 10, 10))
    End Sub
 
    Private Sub UserControl1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        e.Graphics.FillPath(Brushes.White, roundedRectangle(1, 1, MyBase.Width - 12, MyBase.Height - 12, 10))
    End Sub
 
    Public Function roundedRectangle(ByVal X As Integer, ByVal Y As Integer, _
        ByVal Width As Integer, ByVal Height As Integer, ByVal diameter As Integer) As System.Drawing.Drawing2D.GraphicsPath
 
        ''the 'diameter' parameter changes the size of the rounded region
 
        Dim graphics_path As New System.Drawing.Drawing2D.GraphicsPath
 
        Dim BaseRect As New RectangleF(X, Y, Width, Height)
        Dim ArcRect As New RectangleF(BaseRect.Location, New SizeF(diameter, diameter))
 
        'top left Arc
        graphics_path.AddArc(ArcRect, 180, 90)
        graphics_path.AddLine(X + CInt(diameter / 2), _
        Y, X + Width - CInt(diameter / 2), Y)
 
        ' top right arc
        ArcRect.X = BaseRect.Right - diameter
        graphics_path.AddArc(ArcRect, 270, 90)
        graphics_path.AddLine(X + Width, _
        Y + CInt(diameter / 2), X + Width, _
                         Y + Height - CInt(diameter / 2))
 
        ' bottom right arc
        ArcRect.Y = BaseRect.Bottom - diameter
        graphics_path.AddArc(ArcRect, 0, 90)
        graphics_path.AddLine(X + CInt(diameter / 2), _
        Y + Height, X + Width - CInt(diameter / 2), _
                         Y + Height)
 
        ' bottom left arc
        ArcRect.X = BaseRect.Left
        graphics_path.AddArc(ArcRect, 90, 90)
        graphics_path.AddLine(X, Y + CInt(diameter / 2), _
        X, Y + Height - CInt(diameter / 2))
 
        Return graphics_path
 
    End Function
 
End Class

[.paul.]

here's an improvement. i reduced the size of the corners slightly + it appears more symmetrical:

Public Class UserControl1
 
    Private Sub UserControl1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        MyBase.BackColor = Color.Red
        MyBase.Region = New Region(roundedRectangle(0, 0, MyBase.Width - 7, MyBase.Height - 7, 5))
    End Sub
 
    Private Sub UserControl1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        e.Graphics.FillPath(Brushes.White, roundedRectangle(1, 1, MyBase.Width - 9, MyBase.Height - 9, 5))
    End Sub
 
    Public Function roundedRectangle(ByVal X As Integer, ByVal Y As Integer, _
        ByVal Width As Integer, ByVal Height As Integer, ByVal diameter As Integer) As System.Drawing.Drawing2D.GraphicsPath
 
        ''the 'diameter' parameter changes the size of the rounded region
 
        Dim graphics_path As New System.Drawing.Drawing2D.GraphicsPath
 
        Dim BaseRect As New RectangleF(X, Y, Width - diameter, Height - diameter)
        Dim ArcRect As New RectangleF(BaseRect.Location, New SizeF(CInt(diameter * Math.PI), CInt(diameter * Math.PI)))
 
        'top left Arc
        graphics_path.AddArc(ArcRect, 180, 90)
 
        ' top right arc
        ArcRect.X = BaseRect.Right - diameter
        graphics_path.AddArc(ArcRect, 270, 90)
 
        ' bottom right arc
        ArcRect.Y = BaseRect.Bottom - diameter
        graphics_path.AddArc(ArcRect, 0, 90)
 
        ' bottom left arc
        ArcRect.X = BaseRect.Left
        graphics_path.AddArc(ArcRect, 90, 90)
 
        Return graphics_path
 
    End Function
 
End Class

[FredFrothen]

Thanks dude, but the first method is the one that will work because i need it to be 3 pixels. I'm still failing at getting the top right corner to work :/