none
DARKEN FORM RRS feed

  • Question

  • Hello
    I want to make a form for the main form shading
    I used the following code to make shading and the code shading but all the main form data appears
    As follows

    CODE

      DARKEN.FormBorderStyle = FormBorderStyle.None
            DARKEN.Size = New Size(Me.Width, DARKEN.Height)
            DARKEN.StartPosition = FormStartPosition.CenterScreen
            DARKEN.AutoScaleMode = AutoScaleMode.None
            DARKEN.ShowInTaskbar = False
            DARKEN.TopMost = True
            DARKEN.BackColor = Color.Black
            DARKEN.Opacity = 0.45
            DARKEN.Location = New Point(Me.Left, DARKEN.Top)
            DARKEN.Owner = Me
            DARKEN.ShowDialog()

    I want the shading to be as confused as the following form

    Wednesday, April 25, 2018 4:46 AM

Answers

  •  Now that I saw a few more examples on the net,  I found that you can speed up the blurring effect quite a bit by just using an ImageAttribute and a ColorMatrix.  Then you can draw the image on top of the original by an offset (set amount) of pixels in each direction. This will cause the image to have a similar blur effect.  Here is an example I found on the net which I slightly modified.

     To test it,  create a new form project and add a few controls on it which you would want blurred.  Then add a Panel to the form with a button on it (Button3 in example below) and size the panel down so it is just in the corner of your form,  out of the way.  It will be resized at runtime to cover the whole client area of the form.

    Imports System.Drawing.Imaging
    
    Public Class Form1
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Panel1.BackgroundImageLayout = ImageLayout.None
            Panel1.Visible = False
        End Sub
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            Dim clntbm As New Bitmap(Me.ClientSize.Width, Me.ClientSize.Height)
            Using bm As New Bitmap(Me.Width, Me.Height)
                Me.DrawToBitmap(bm, New Rectangle(Point.Empty, Me.Size))
                Dim ptc As Point = Me.PointToClient(Me.Location)
                Using g As Graphics = Graphics.FromImage(clntbm)
                    g.DrawImage(bm, ptc.X, ptc.Y, bm.Width, bm.Height)
                End Using
            End Using
    
            BlurBitmap(clntbm, 2)
    
            Using g As Graphics = Graphics.FromImage(clntbm), sb As New SolidBrush(Color.FromArgb(128, Color.Black))
                g.FillRectangle(sb, 30, 30, clntbm.Width - 60, clntbm.Height - 60)
            End Using
    
            If Panel1.BackgroundImage IsNot Nothing Then Panel1.BackgroundImage.Dispose()
            Panel1.BackgroundImage = clntbm
            Panel1.Bounds = New Rectangle(0, 0, Me.ClientSize.Width, Me.ClientSize.Height)
            Panel1.BringToFront()
            Panel1.Visible = True
        End Sub
    
        'this is the Ok button on the Panel
        Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
            Panel1.Visible = False
        End Sub
    
        Private Sub BlurBitmap(image As Bitmap, Blursize As Integer)
            Using g As Graphics = Graphics.FromImage(image)
                Using att As New ImageAttributes
                    att.SetColorMatrix(New ColorMatrix With {.Matrix33 = 0.5F})
                    For x As Integer = -Blursize To Blursize
                        For y As Integer = -Blursize To Blursize
                            g.DrawImage(image, New Rectangle(x, y, image.Width, image.Height), 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, att)
                        Next
                    Next
                End Using
            End Using
        End Sub
    End Class
     

     Here is the form using this code...


    If you say it can`t be done then i`ll try it

    • Edited by IronRazerz Wednesday, April 25, 2018 5:42 PM
    • Marked as answer by monemas Wednesday, April 25, 2018 10:51 PM
    Wednesday, April 25, 2018 5:39 PM
  • You could take a screenshot of the form, use it to paint on a temp panel, show the dialog, dispose of the panel.

    Private Sub cmdDemo_Click(sender As Object, e As EventArgs) Handles cmdDemo.Click
        Dim bmp As New Bitmap(ClientRectangle.Width, ClientRectangle.Height)
        Using G As Graphics = Graphics.FromImage(bmp)
    
            G.CompositingMode = Drawing2D.CompositingMode.SourceOver
            G.CopyFromScreen(Me.PointToScreen(New Point(0, 0)), New Point(0, 0), Me.ClientRectangle.Size)
    
            Dim percent As Double = 0.6
            Dim darken As Color = Color.FromArgb(CInt(Fix(255 * percent)), Color.Black)
    
            Using brsh As Brush = New SolidBrush(darken)
                G.FillRectangle(brsh, Me.ClientRectangle)
            End Using
        End Using
    
    
        Using p As New Panel()
            p.Location = New Point(0, 0)
            p.Size = Me.ClientRectangle.Size
            p.BackgroundImage = bmp
            Me.Controls.Add(p)
            p.BringToFront()
    
            ' display your dialog somehow:
            Dim f As New Form2()
            f.ShowDialog(Me)
        End Using
    End Sub

    Show form

    After closing the child form.



    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    • Marked as answer by monemas Wednesday, April 25, 2018 10:52 PM
    Wednesday, April 25, 2018 2:02 PM
    Moderator

All replies

  • I want to make a form for the main form shading

    You will need to experiment to get the effect you want.  You could set up some temporary controls so that you can vary the BbackColor and the Opacity until you get the required effect.  For instance, try it with a lighter colour and a higher level of opacity.

    Wednesday, April 25, 2018 4:59 AM
  • You could take a screenshot of the form, use it to paint on a temp panel, show the dialog, dispose of the panel.

    Private Sub cmdDemo_Click(sender As Object, e As EventArgs) Handles cmdDemo.Click
        Dim bmp As New Bitmap(ClientRectangle.Width, ClientRectangle.Height)
        Using G As Graphics = Graphics.FromImage(bmp)
    
            G.CompositingMode = Drawing2D.CompositingMode.SourceOver
            G.CopyFromScreen(Me.PointToScreen(New Point(0, 0)), New Point(0, 0), Me.ClientRectangle.Size)
    
            Dim percent As Double = 0.6
            Dim darken As Color = Color.FromArgb(CInt(Fix(255 * percent)), Color.Black)
    
            Using brsh As Brush = New SolidBrush(darken)
                G.FillRectangle(brsh, Me.ClientRectangle)
            End Using
        End Using
    
    
        Using p As New Panel()
            p.Location = New Point(0, 0)
            p.Size = Me.ClientRectangle.Size
            p.BackgroundImage = bmp
            Me.Controls.Add(p)
            p.BringToFront()
    
            ' display your dialog somehow:
            Dim f As New Form2()
            f.ShowDialog(Me)
        End Using
    End Sub

    Show form

    After closing the child form.



    Please remember to mark the replies as answers if they help and unmark them if they provide no help, this will help others who are looking for solutions to the same or similar problem. Contact via my Twitter (Karen Payne) or Facebook (Karen Payne) via my MSDN profile but will not answer coding question on either.
    VB Forums - moderator
    profile for Karen Payne on Stack Exchange, a network of free, community-driven Q&A sites

    • Marked as answer by monemas Wednesday, April 25, 2018 10:52 PM
    Wednesday, April 25, 2018 2:02 PM
    Moderator

  • I want the shading to be as confused as the following form

    The background needs to be blurred.

    Draw the opaque image on top of the original and make it 1 or 2 pixels larger. That will give the faded blurring that you cant read???

    Wednesday, April 25, 2018 2:08 PM
  • I don't believe that is a Form. I believe that is a WebSite hosting an element, like experts exchanged does, which is semi transparent, so you can't see what is behind the element.

    You can set a Forms opacity to less than 1 and greater than zero to get a similar effect although the button will become partially opaque also.


    La vida loca

    Wednesday, April 25, 2018 2:42 PM
  •  Do a quick google search for "Gausian blur vb.net",  I believe that is what you want.  The search will produce several examples and tutorials on doing it.  I would suggest just using a Panel in your application's main window which has it's Visible property set to False.  You can then use the Form.DrawToBitmap method to draw the form to a Bitmap. Then add the gausian blur effect to the bitmap.  Last,  you just set the bitmap to the BackgroundImage property of the Panel and set the Panel' Visible property to True.

     The gausian blur effect basically just takes an average of the (set amount) of pixels around each pixel and sets the pixel to the average value of the surrounding pixels.  The (set amount) will determine the amount of blur.  However,  it can be a little time consuming to create the blurred bitmap,  so you may need to use the  Bitmap.LockBits method to speed up the image processing.

     Just using GetPixel and SetPixel seems to take a few seconds to create the blurred image for the client area of my form as seen below.  Here I draw a partially transparent black rectangle before I add the blur.

     

     Here I add the blur and then draw the partially transparent rectangle.  The rectangle has cleaner looking edges this way.


    If you say it can`t be done then i`ll try it

    • Edited by IronRazerz Wednesday, April 25, 2018 5:00 PM
    Wednesday, April 25, 2018 4:39 PM
  •  Now that I saw a few more examples on the net,  I found that you can speed up the blurring effect quite a bit by just using an ImageAttribute and a ColorMatrix.  Then you can draw the image on top of the original by an offset (set amount) of pixels in each direction. This will cause the image to have a similar blur effect.  Here is an example I found on the net which I slightly modified.

     To test it,  create a new form project and add a few controls on it which you would want blurred.  Then add a Panel to the form with a button on it (Button3 in example below) and size the panel down so it is just in the corner of your form,  out of the way.  It will be resized at runtime to cover the whole client area of the form.

    Imports System.Drawing.Imaging
    
    Public Class Form1
        Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Panel1.BackgroundImageLayout = ImageLayout.None
            Panel1.Visible = False
        End Sub
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            Dim clntbm As New Bitmap(Me.ClientSize.Width, Me.ClientSize.Height)
            Using bm As New Bitmap(Me.Width, Me.Height)
                Me.DrawToBitmap(bm, New Rectangle(Point.Empty, Me.Size))
                Dim ptc As Point = Me.PointToClient(Me.Location)
                Using g As Graphics = Graphics.FromImage(clntbm)
                    g.DrawImage(bm, ptc.X, ptc.Y, bm.Width, bm.Height)
                End Using
            End Using
    
            BlurBitmap(clntbm, 2)
    
            Using g As Graphics = Graphics.FromImage(clntbm), sb As New SolidBrush(Color.FromArgb(128, Color.Black))
                g.FillRectangle(sb, 30, 30, clntbm.Width - 60, clntbm.Height - 60)
            End Using
    
            If Panel1.BackgroundImage IsNot Nothing Then Panel1.BackgroundImage.Dispose()
            Panel1.BackgroundImage = clntbm
            Panel1.Bounds = New Rectangle(0, 0, Me.ClientSize.Width, Me.ClientSize.Height)
            Panel1.BringToFront()
            Panel1.Visible = True
        End Sub
    
        'this is the Ok button on the Panel
        Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click
            Panel1.Visible = False
        End Sub
    
        Private Sub BlurBitmap(image As Bitmap, Blursize As Integer)
            Using g As Graphics = Graphics.FromImage(image)
                Using att As New ImageAttributes
                    att.SetColorMatrix(New ColorMatrix With {.Matrix33 = 0.5F})
                    For x As Integer = -Blursize To Blursize
                        For y As Integer = -Blursize To Blursize
                            g.DrawImage(image, New Rectangle(x, y, image.Width, image.Height), 0, 0, image.Width, image.Height, GraphicsUnit.Pixel, att)
                        Next
                    Next
                End Using
            End Using
        End Sub
    End Class
     

     Here is the form using this code...


    If you say it can`t be done then i`ll try it

    • Edited by IronRazerz Wednesday, April 25, 2018 5:42 PM
    • Marked as answer by monemas Wednesday, April 25, 2018 10:51 PM
    Wednesday, April 25, 2018 5:39 PM

  • If you say it can`t be done then i`ll try it

    That looks good.

    Its like when we make a glow 3d outline shadow for text. If you draw it twice with the background a bit larger/smaller/offset you get the blurr effect.

    Also: att.SetColorMatrix(New ColorMatrix With {.Matrix33 = 0.5F}) is setting color matrix alpha (opacity) to 50 percent in row 3 col 3 where starts at 0 in the matrix and this is the glow or dissolve effect.

    So there is the blurr from resizing and the glow from opacity.


    Wednesday, April 25, 2018 6:13 PM

  • If you say it can`t be done then i`ll try it

    That looks good.

    Its like when we make a glow 3d outline shadow for text. If you draw it twice with the background a bit larger/smaller/offset you get the blurr effect.

    Also: att.SetColorMatrix(New ColorMatrix With {.Matrix33 = 0.5F}) is setting color matrix alpha (opacity) to 50 percent in row 3 col 3 where starts at 0 in the matrix and this is the glow or dissolve effect.

    So there is the blurr from resizing and the glow from opacity.



     Yep,  that's it.  However,  using the ImageAttribute and ColorMatrix does not seem to produce quite as nice of a blur effect as actually averaging the surrounding pixel colors as I mentioned and used in my first post.  That takes more time but, maybe as I said,  using the Lockbits method to process the image and apply the blur would be about the same as the ImageAttribute and ColorMatrix method.  Have to try it sometime.  8)

    If you say it can`t be done then i`ll try it

    Wednesday, April 25, 2018 6:24 PM