2
\$\begingroup\$

I am relatively new to visual studio. I am in the process of creating a custom control and the same time learning. I have put together the beginning of this control and will love to get some input.

What this does is draw in a Panel Control so that it looks like the control has a inner bevel(sunken) on the form.

enter image description here

Although this seems to work, will I get some issues or is there a better way to do this? In the Bevel Class(Outer_Bevel) is not used yet.

Imports System.Drawing.Drawing2D




Public Class Carel_Scroll_Bar

    Inherits Windows.Forms.Control
    Public Wdth As Integer
    Dim Cntrl_Rail As New Child_Cntrls.Rail

    Public Sub New()

        Me.DoubleBuffered = True
        Me.Width = 50
        Me.Height = 500

        Me.Controls.Add(Cntrl_Rail)

    End Sub

    Private Sub Carel_Scroll_Bar_SizeChanged(sender As Object, e As EventArgs) Handles Me.SizeChanged

        Dim Bev_Val As New Bevels

        Cntrl_Rail.Height = Me.Height
        Cntrl_Rail.Width = Me.Width
        Bev_Val.Cntrl_Hght = Me.Height
        Bev_Val.Cntrl_Wdth = Me.Width

    End Sub

End Class

Public Class Bevels

    Public In_Bev_Size = 5
    Public In_AO_Thick = 3
    Public Out_Bev_Size = 5
    Public Out_AO_Thick = 3
    Public Cntrl_Hght As Integer
    Public Cntrl_Wdth As Integer

    Public Sub Bevel_Inner(ByVal e As PaintEventArgs)

        Dim clr1 As Color = Color.FromArgb(0, 255, 255, 255)
        Dim clr2 As Color = Color.FromArgb(50, 0, 0, 0)
        Dim Bord As New Pen(Color.FromArgb(5, 0, 0, 0), In_AO_Thick)

        Dim Inn_01 As New Point(In_Bev_Size, In_Bev_Size)
        Dim Inn_02 As New Point(In_Bev_Size, Cntrl_Hght - In_Bev_Size)
        Dim Inn_03 As New Point(Cntrl_Wdth - In_Bev_Size, Cntrl_Hght - In_Bev_Size)
        Dim Inn_04 As New Point(Cntrl_Wdth - In_Bev_Size, In_Bev_Size)

        Dim Out_01 As New Point(0, 0)
        Dim Out_02 As New Point(0, Cntrl_Hght)
        Dim Out_03 As New Point(Cntrl_Wdth, Cntrl_Hght)
        Dim Out_04 As New Point(Cntrl_Wdth, 0)

        Dim Left_Grad As New Point(Cntrl_Wdth - In_Bev_Size, 0)
        Dim Right_Grad As New Point(In_Bev_Size, 0)
        Dim Top_Grad As New Point(0, In_Bev_Size)
        Dim Bot_Grad As New Point(0, Cntrl_Hght - In_Bev_Size)

        'Center
        Dim Cen_Pnts As Point() = {Inn_01, Inn_02, Inn_03, Inn_04}
        Dim Cen_Br As New SolidBrush(clr2)

        e.Graphics.FillPolygon(Cen_Br, Cen_Pnts)
        e.Graphics.DrawPolygon(Bord, Cen_Pnts)
        Cen_Br.Dispose()

        'Left
        Dim Left_Pnts As Point() = {Out_03, Out_04, Inn_04, Inn_03}
        Dim lef_Br As New LinearGradientBrush(Out_04, Left_Grad, clr1, clr2)

        e.Graphics.FillPolygon(lef_Br, Left_Pnts)
        e.Graphics.DrawPolygon(Bord, Left_Pnts)
        lef_Br.Dispose()

        'Right
        Dim Right_Pnts As Point() = {Out_01, Out_02, Inn_02, Inn_01}
        Dim Right_Br As New LinearGradientBrush(Out_01, Right_Grad, clr1, clr2)

        e.Graphics.FillPolygon(Right_Br, Right_Pnts)
        e.Graphics.DrawPolygon(Bord, Right_Pnts)
        Right_Br.Dispose()

        'Top
        Dim Top_Pnts As Point() = {Out_01, Out_04, Inn_04, Inn_01}
        Dim Top_Br As New LinearGradientBrush(Out_01, Top_Grad, clr1, clr2)

        e.Graphics.FillPolygon(Top_Br, Top_Pnts)
        e.Graphics.DrawPolygon(Bord, Top_Pnts)
        Top_Br.Dispose()

        'Bot
        Dim Bot_Pnts As Point() = {Out_02, Out_03, Inn_03, Inn_02}
        Dim Bot_Br As New LinearGradientBrush(Out_02, Bot_Grad, clr1, clr2)

        e.Graphics.FillPolygon(Bot_Br, Bot_Pnts)
        e.Graphics.DrawPolygon(Bord, Bot_Pnts)
        Bot_Br.Dispose()
        Bord.Dispose()

    End Sub
    Public Sub Bevel_Outer(ByVal e As PaintEventArgs)

        Dim clr1 As Color = Color.FromArgb(50, 0, 0, 0)
        Dim clr2 As Color = Color.FromArgb(0, 255, 255, 255)
        Dim Bord As New Pen(Color.FromArgb(5, 0, 0, 0), In_AO_Thick)

        Dim Inn_01 As New Point(Out_Bev_Size, Out_Bev_Size)
        Dim Inn_02 As New Point(Out_Bev_Size, Cntrl_Hght - Out_Bev_Size)
        Dim Inn_03 As New Point(Cntrl_Wdth - Out_Bev_Size, Cntrl_Hght - Out_Bev_Size)
        Dim Inn_04 As New Point(Cntrl_Wdth - Out_Bev_Size, Out_Bev_Size)

        Dim Out_01 As New Point(0, 0)
        Dim Out_02 As New Point(0, Cntrl_Hght)
        Dim Out_03 As New Point(Cntrl_Wdth, Cntrl_Hght)
        Dim Out_04 As New Point(Cntrl_Wdth, 0)

        Dim Left_Grad As New Point(Cntrl_Wdth - Out_Bev_Size, 0)
        Dim Right_Grad As New Point(Out_Bev_Size, 0)
        Dim Top_Grad As New Point(0, Out_Bev_Size)
        Dim Bot_Grad As New Point(0, Cntrl_Hght - Out_Bev_Size)

        'Center
        Dim Cen_Pnts As Point() = {Inn_01, Inn_02, Inn_03, Inn_04}
        Dim Cen_Br As New SolidBrush(clr2)

        e.Graphics.FillPolygon(Cen_Br, Cen_Pnts)
        e.Graphics.DrawPolygon(Bord, Cen_Pnts)
        Cen_Br.Dispose()

        'Left
        Dim Left_Pnts As Point() = {Out_03, Out_04, Inn_04, Inn_03}
        Dim lef_Br As New LinearGradientBrush(Out_04, Left_Grad, clr1, clr2)

        e.Graphics.FillPolygon(lef_Br, Left_Pnts)
        e.Graphics.DrawPolygon(Bord, Left_Pnts)
        lef_Br.Dispose()

        'Right
        Dim Right_Pnts As Point() = {Out_01, Out_02, Inn_02, Inn_01}
        Dim Right_Br As New LinearGradientBrush(Out_01, Right_Grad, clr1, clr2)

        e.Graphics.FillPolygon(Right_Br, Right_Pnts)
        e.Graphics.DrawPolygon(Bord, Right_Pnts)
        Right_Br.Dispose()

        'Top
        Dim Top_Pnts As Point() = {Out_01, Out_04, Inn_04, Inn_01}
        Dim Top_Br As New LinearGradientBrush(Out_01, Top_Grad, clr1, clr2)

        e.Graphics.FillPolygon(Top_Br, Top_Pnts)
        e.Graphics.DrawPolygon(Bord, Top_Pnts)
        Top_Br.Dispose()

        'Bot
        Dim Bot_Pnts As Point() = {Out_02, Out_03, Inn_03, Inn_02}
        Dim Bot_Br As New LinearGradientBrush(Out_02, Bot_Grad, clr1, clr2)

        e.Graphics.FillPolygon(Bot_Br, Bot_Pnts)
        e.Graphics.DrawPolygon(Bord, Bot_Pnts)
        Bot_Br.Dispose()
        Bord.Dispose()

    End Sub

End Class
Public Class Child_Cntrls


    Public Class Rail

        Inherits Windows.Forms.Panel

        Public Sub New()

            Me.DoubleBuffered = True
            'Me.BackColor = Color.Blue

        End Sub

        Private Sub Rail_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint

            Dim Bev_Val As New Bevels

            Bev_Val.Cntrl_Hght = Me.Height
            Bev_Val.Cntrl_Wdth = Me.Width
            Bev_Val.Bevel_Inner(e)

        End Sub

    End Class

End Class

The above code I used because I wanted to prevent stretching in my bevel and wanted my bevel size to stay the same when I resize my control. I tried the "PathGradientBrush()" before but it gave me the issues I mentioned. With a little research I managed to resolve this issue by using the "PathGradientBrush()" together with "FocusScales" and a "relativePositions". With little calculations I manage to change the "FocusScales" values when I resize my control preventing the issues I mentioned. The code is also a lot shorter and gives me the same effect as seen below.

enter image description here

Imports System.Drawing.Drawing2D

Public Class Control

  Inherits Windows.Forms.Panel

  Dim wdth As Integer
  Dim hght As Integer

Public Sub New()

    Me.DoubleBuffered = True
    Me.Width = 50
    Me.Height = 500

End Sub

Private Sub Control_SizeChanged(sender As Object, e As EventArgs) Handles Me.SizeChanged

    wdth = Me.Width
    hght = Me.Height

End Sub

Private Sub Button_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint

    Bevel_Paint(e)

End Sub

Public Sub Bevel_Paint(ByVal e As PaintEventArgs)
    'Bevel size
    Dim bev = 5
    'Calculate Width Focus Scale for stretch prevension 
    'of the bevel when resizing the control
    Dim Width_bev = bev * 2 / wdth
    Dim Width_Scale = 1 - Width_bev
    'Calculate Height Focus Scale for stretch prevension 
    'of the bevel when resizing the control
    Dim Height_bev = bev * 2 / hght
    Dim Height_Scale = 1 - Height_bev
    'Main Rectangle Points
    Dim points As Point() = {New Point(0, 0),
                             New Point(wdth, 0),
                             New Point(wdth, hght),
                             New Point(0, hght)}
    'Gradient Brush
    Dim pthGrBrush As New PathGradientBrush(points)
    'Colors to use
    Dim colors As Color() = {Color.FromArgb(0, 255, 255, 255),
                             Color.FromArgb(50, 0, 0, 0)}
    'Set the position of the colors [0.0 = boundry][1.0 = center]
    Dim relativePositions As Single() = {0.0F, 1.0F}
    pthGrBrush.FocusScales = New PointF(Width_Scale, Height_Scale)

    Dim colorBlend As New ColorBlend()
    colorBlend.Colors = colors
    colorBlend.Positions = relativePositions
    pthGrBrush.InterpolationColors = colorBlend

    e.Graphics.FillRectangle(pthGrBrush, 0, 0, Me.Width, Me.Height)
    pthGrBrush.Dispose()

    'AO line rectangle to give a sharper look at the bottom sides
    Dim Rect As New Rectangle(bev, bev, wdth - (bev * 2), hght - (bev * 2))
    Dim My_Pen As New Pen(Color.FromArgb(10, 0, 0, 0), 3)

    e.Graphics.DrawRectangle(My_Pen, Rect)
    My_Pen.Dispose()

End Sub

End Class

I would really love to get some input on this. Thanks.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.