Button images, transparency, MouseOver colors - vb.net

I have a button that I have made Flat, with no border so when there is an image in it, it is seamless looking.
The image I want to add to this button is basically just an unfilled rectangle (png from a file).
When I mouse over this button, I have the backcolor change to red. When it does, the rectangle that is the image obviously does not change to red..it stays whatever color it is from the image.
I wanted to know if there is a way to add an image, who's actual backcolor is transparent (I suppose?).
The image is a blue rectangle with a very very light brown background. When I mouse over I would like the ENTIRE button's backcolor to be red, but only maintain the blue rectangle. Right now when you mouseover you can clearly see the size of the image itself.
I'd rather not draw graphics to the button. (In actuality this image is an outline of a computer monitor...but it's essentially a rectangle for this case)
Is there a way to do this with the Image or BackgroundImage properties?

Put Your image in Resources (Project/Properties/Resources/Images/Add Resource and from dropdown menu choose Add Existing File...).
Then use this code :
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
With Button1
.Text = ""
.UseVisualStyleBackColor = False
.BackColor = Color.Transparent
.FlatStyle = FlatStyle.Flat
.FlatAppearance.BorderSize = 0
.FlatAppearance.MouseOverBackColor = Color.Red
.BackgroundImageLayout = ImageLayout.Center
.BackgroundImage = My.Resources.XXX 'image name from Resources
End With
End Sub
Private Sub Button1_MouseHover(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.MouseHover
With Button1
.BackgroundImage = Nothing
.FlatAppearance.BorderColor = Color.Blue
.FlatAppearance.BorderSize = 2 'or what is size of Your border in px (take from Your image)
End With
End Sub
Private Sub Button1_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.MouseLeave
With Button1
.BackColor = Color.Transparent
.BackgroundImage = My.Resources.XXX 'image name from Resources
.FlatAppearance.BorderSize = 0
End With
End Sub
Of course, You can create Your own button (class) and import into Your project, where You can avoid this MouseHover and MouseLeave for every button.
btw. All this You can do without image if Your picture have only border and background of image isn't gradient. Then You can avoid MouseHover and MouseLeave.
Edit :
There is code if You don't need image (border of button is always blue of 2px, background color is some kind of light brown, and on hover background color is red but border stay blue with 2px).
With Button2
.UseVisualStyleBackColor = False
.BackColor = Color.FromArgb(217, 195, 154)
.FlatStyle = FlatStyle.Flat
.FlatAppearance.BorderSize = 2
.FlatAppearance.BorderColor = Color.Blue
.FlatAppearance.MouseOverBackColor = Color.Red
End With

Related

How to remove the white lines surrounding a button appearing when I click it

It works fine until I click it and pop up a file dialog box,and then white lines appears surrounding it.
I don't know how to remove these ugly lines.
The only code is openFileDialog1.ShowDialog().
It's a Button whose FlatStyle is flat and whose BackgroundImage is a PNG image.
After that the white lines appears, and if I click the Form it will disappear.
A simple workaround is to set the Button FlatAppearance.BorderColor to its Parent.BackColor. It will overwrite the focus rectangle. The MouseUp event can be used to set the value, it will be raised before a new Window is opened (the Control.Leave event will never be raised):
Private Sub SomeButton_MouseUp(sender As Object, e As MouseEventArgs) Handles SomeButton.MouseUp
Dim ctl As Button = DirectCast(sender, Button)
ctl.FlatAppearance.BorderColor = ctl.Parent.BackColor
End Sub
Using the Control.Paint event, we can also use the Control.BackColor property to paint the border, both with the ControlPaint class DrawBorder method (simpler than using the ButtonRenderer class):
Private Sub SomeButton_Paint(sender As Object, e As PaintEventArgs) Handles SomeButton.Paint
Dim ctl As Button = DirectCast(sender, Button)
ControlPaint.DrawBorder(e.Graphics, ctl.ClientRectangle, ctl.BackColor, ButtonBorderStyle.Solid)
End Sub
and painting the Control's border ourselves:
(Note that the ClientRectangle size must be shrinked, by 1 pixel, both in the Width and Height dimensions. This is by design).
Private Sub SomeButton_Paint(sender As Object, e As PaintEventArgs) Handles SomeButton.Paint
Dim ctl As Control = DirectCast(sender, Control)
Dim r As Rectangle = ctl.ClientRectangle
Using pen As Pen = New Pen(ctl.BackColor, 1)
e.Graphics.DrawRectangle(pen, r.X, r.Y, r.Width - 1, r.Height - 1)
End Using
End Sub

I draw image to form, but it is limited to top left corner of form

I have created a form and imported two square images saved as PNG files in resources. when I run the code below the black box which is drawn will only go about 200 pixels in the x coordinate and 150 pixels in the Y coordinate from where the image is drawn, after that the background remains white, and it seems I am unable to draw anything and anything I do draw stops around this point.
I have tried redrawing the image in a completely different location on the screen and It will not be visible if it is not within the region to the top left of the form, I have also tried drawing other images, but they also cease to exist when not in the top left of my form.
What I want is for the black box/other images to be drawn across the whole form, and not just in the top left corner, which something is preventing me from doing.
Public Class Form1
Dim gameGraphics As System.Drawing.Graphics = Me.CreateGraphics
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
'Draws black square which I have saved as resource
gameGraphics.DrawImage(My.Resources.black_Background, 0, 80, 1600, 600)
'Draws green square which I have saved as resource
gameGraphics.DrawImage(My.Resources.greenSquare, 2, 82, 40, 40)
End Sub
'makes the form fullscreen
Private Sub Form1_Load(sender As Object, e As EventArgs) Handles MyBase.Load
Me.FormBorderStyle = FormBorderStyle.None
Me.WindowState = FormWindowState.Maximized
End Sub
'closes form if quitbutton is clicked
Private Sub QuitButton_Click(sender As Object, e As EventArgs) Handles QuitButton.Click
Me.Close()
End Sub
End Class
Thanks for your time!
The Graphics Object cannot be stored. It's Erased/Updated constantly. You'll end up with an invalid one. It's really useless and, you could say, a mistake.
You can use a Graphics Object created with Control.CreateGraphics(), but you have to remember that it's not persistent; it will be erased when the Control you have painted it on needs to re-Paint() itself (e.g. you drag something over it, if it's a Form, when it's minimized etc.).
Those Properties, Me.FormBorderStyle = FormBorderStyle.None and Me.WindowState = FormWindowState.Maximized are better set in the designer. There's no reason to set them on a Form.Load() event. Their state is not even subject to a condition. In general, leave the Load event of a Form as lightweight as possible and avoid setting properties that can cause cascading events.
An example:
Define an object to store your images:
(The DrawBitmaps flag is used to let your Form know when to draw those Bitmaps).
Public Class MyBitmap
Public Property Image As Bitmap
Public Property Position As Point
Public Property Size As Size
End Class
Public MyBitmaps As List(Of MyBitmap)
Public DrawBitmaps As Boolean = False
Somewhere (even in Form.Load()), fill the list with you bitmaps:
(Here, the bitmap size is set to original size, but you can set it to whatever dimension you see fit).
MyBitmaps = New List(Of MyBitmap)
MyBitmaps.Add(New MyBitmap With {.Image = My.Resources.black_Background,
.Position = New Point(0, 80),
.Size = New Size(My.Resources.black_Background.Width,
My.Resources.black_Background.Height)})
MyBitmaps.Add(New MyBitmap With {.Image = My.Resources.greenSquare,
.Position = New Point(2, 82),
.Size = New Size(My.Resources.greenSquare.Width,
My.Resources.greenSquare.Height)})
The Paint() event e.Graphics of the Form performs all the painting:
(Note that it will not paint its surface unless the DrawBitmaps flag is set to True => It will not paint those Bitmaps when it's loading/showing. The other condition is a basic fail-safe.
Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
If DrawBitmaps = True AndAlso MyBitmaps.Count > 0 Then
For Each _Item As MyBitmap In MyBitmaps
e.Graphics.DrawImage(_Item.Image, New Rectangle(_Item.Position, _Item.Size))
Next
End If
End Sub
When Button1 is clicked, the Form will draw your list of Bitmaps:
Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
DrawBitmaps = True
Me.Invalidate()
End Sub
Somewhere in your code, add a new Bitmap and tell the Form to Invalidate only a region of the size of this new Bitmap:
MyBitmaps.Add(New MyBitmap With {.Image = My.Resources.[AnotherBitmap],
.Position = New Point(50, 50),
.Size = New Size(200, 200)})
Me.Invalidate(New Rectangle(MyBitmaps.Last().Position, MyBitmaps.Last().Size))
Remove a Bitmap from the list and repaint:
MyBitmaps.RemoveAt(0)
Me.Invalidate()

Drag a label and make it leave a black trail behind it

I am working on a project and I have a label in a picturebox that I need to drag around and while dragging around have it leave a black trail on the picturebox. I am stumped as to how to make this happen. The label is 15x15 and is moved using the mouse and mousedown, mousemove, and mouseup events. During the mousemove the label needs to draw black wherever the label has covered. Thanks for the help!
You need to override the Form's OnPaint() method and then track the offset of the mouse Location from the point of drag origniation. This is essentially implementing an animated effect, so you will need to fire a redraw timer on the Label's drag start, paint the "tail" at a previous drag coordinate, repeating as your drag op moves the mouse coordinates past a certain threshold or certain speed. This will require some playing around to get the effect just right, but its fairly easy to implement.
Get started here: http://msdn.microsoft.com/en-us/library/3e40ahaz(v=vs.110).aspx
Lets say you have a background image in picturebox. Create a bitmap with picturebox dimensions:
Private pctBoxImage As Bitmap
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
pctBoxImage = New Bitmap(PictureBox1.Width, PictureBox1.Height, Drawing.Imaging.PixelFormat.Format24bppRgb)
pctBoxImage = CType(PictureBox1.BackgroundImage, Bitmap)
End Sub
If you dont have a background image just some color:
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
pctBoxImage = New Bitmap(PictureBox1.Width, PictureBox1.Height, Drawing.Imaging.PixelFormat.Format24bppRgb)
Dim objGraphics As Graphics = Graphics.FromImage(pctBoxImage)
objGraphics.Clear(PictureBox1.BackColor)
objGraphics.Dispose()
End Sub
When ever you move the label:
Dim pt as Point
'pt = PictureBox1.PointToClient(Cursor.Position)
pt = Label1.PointToScreen(New Point(0, 0))
pt = PictureBox1.PointToClient(pt)
Dim objGraphics As Graphics = Graphics.FromImage(pctBoxImage)
objGraphics.FillRectangle(Brushes.Black, pt.X, pt.Y, 15, 15)
objGraphics.Dispose()
PictureBox1.BackgroundImage = pctBoxImage
valter

Picture Shaped not working

Th following code is not working when the Picture shaped form.
Dim Img As New System.Drawing.Bitmap(My.Resources.imgpng)'ImgPng is a resource Image
' The color at Pixel(1,1) is rendered as transparent for the complete background.
Img.MakeTransparent(Img.GetPixel(1, 1))
Me.BackgroundImage = Img
Me.TransparencyKey = Img.GetPixel(1, 1)
Can anybody Help me to get more closer?
I set the form background to the same via this code and it worked:
Dim Img As New System.Drawing.Bitmap(My.Resources.imgpng)'ImgPng is a resource Image
' The color at Pixel(1,1) is rendered as transparent for the complete background.
Me.FormBorderStyle = Windows.Forms.FormBorderStyle.None
Dim Color = Img.GetPixel(0, 0)
Me.BackColor = Color
Img.MakeTransparent(Color)
Me.TransparencyKey = Color
Me.BackgroundImage = Img
And I used (0,0) for the transparency pixel though that should not matter unless your (1,1) was the wrong color.
Thanks man...
Private Sub Form3_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim Img As New System.Drawing.Bitmap(My.Resources.NewImage) 'NewImage is a resource Image
' The color at Pixel(1,1) is rendered as transparent for the complete background.
Me.FormBorderStyle = Windows.Forms.FormBorderStyle.None
Dim Color = Img.GetPixel(0, 0)
Me.BackgroundImageLayout = ImageLayout.Stretch ' To Adjust the Image
Me.BackColor = Drawing.Color.Black
Img.MakeTransparent(Drawing.Color.Black)
Me.TransparencyKey = Drawing.Color.Black
Me.BackgroundImage = Img
End Sub
For a change 'Img.MakeTransparent(Color)' is not required. Try to getva decent image with outlined border to eliminate bad edges...

How to change textbox border color and width in winforms?

I would like to know how do I change the border color and border width of textbox as something shown below
If it is mouse hover I need to display one colour and on mouse down I need to display another colour.
Can anyone explain me the detailed process with the source if available.
You could do the following:
Place the TextBox inside a Panel
Give the panel 1 pixel padding
Set the text dock to Fill
Make the text box to have no border
Then, handle mouse events on the text box, switch the background color of the panel between your two colors, when the mouse enters/leaves.
This isn't the most elegant approach in terms of using resources/handles but it should work without any custom drawing.
Same as above with a little twist. Unfortunately I can't comment due to reputation.
Make a UserControl
Set usercontrol padding on all to 1
Put a Panel inside the usercontrol
Set panel dock style to fill
Set panel padding to 6, 3, 6, 3 (left, top, right, bottom)
Put a TextBox inside the panel
Set textbox dock style to fill
Set textbox borderstyle to None
...then for border colour changing properties, you could use this
Dim tbxFocus As Boolean = False
Private Sub tbx_GotFocus(sender As Object, e As EventArgs) Handles tbx.GotFocus
tbxFocus = True
Me.BackColor = Color.CornflowerBlue
End Sub
Private Sub tbx_LostFocus(sender As Object, e As EventArgs) Handles tbx.LostFocus
tbxFocus = False
Me.BackColor = SystemColors.Control
End Sub
Private Sub tbx_MouseEnter(sender As Object, e As EventArgs) Handles tbx.MouseEnter
If tbxFocus = False Then Me.BackColor = SystemColors.ControlDark
End Sub
Private Sub tbx_MouseLeave(sender As Object, e As EventArgs) Handles tbx.MouseLeave
If tbxFocus = False Then Me.BackColor = SystemColors.Control
End Sub
It's pretty self-explanatory.