How to make a picture button

Question

I was wondering how I can do this. I know that I can use the button component, but I have a little gray material when I give it an image. Using the image button, how can I show another image for the hover effect

Answer 1

Do you want to create a button without a frame, but display different images when the user hovers over it with the mouse? Here's how you can do it:

• Add an ImageList control to your form by adding two images, one for the normal button mode and one for when the mouse is overhanging.

• Add your button and set the following properties:
  FlatStyle = Flat
  FlatAppearance.BorderColor (and possibly MouseOverBackColor and MouseDownBackColor ) to your form background color
  ImageList = ImageList added to the form
  ImageIndex to the index value of your regular image

Match the MouseHover and MouseLeave events for the button as follows:

 private void button1_MouseHover(object sender, EventArgs e) { // ImageList index value for the hover image. button1.ImageIndex = 1; } private void button1_MouseLeave(object sender, EventArgs e) { // ImageList index value for the normal image. button1.ImageIndex = 0; } 

I believe this will give you the visual effect you are looking for.

Answer 2

You can assign the BackgroundImage property to the button. You can also use the OnMouseEnter and OnMouseExit events to change the background according to your request.

See BackgroundImage OnMouseEnter OnMouseLeave

Answer 3

A small summary (Border, MouseDownBackColor, MouseOverBackColor)

Flatapperance

BorderColor = Black or what you need
BorderSize = can be set to 0 MouseDownBackColor = Transparent
MouseOverBackColor = Transparent

Text = none

For MouseDown :

private void button1_MouseDown(object sender, MouseEventArgs e) { // ImageList index value for the mouse down image. button1.ImageIndex = 2; }

Answer 4

WinForm does not have ImageButton unlike web forms. Adding an image to a regular button is possible, but in some cases does not look good. You may need to use third-party button controls, such as WinForm ImageButton, or create your own CustomControl.

Answer 5

I also need an image button, but I wanted one like ToolstripMenuButton. With correct borders and colors on hover. So I made my own control to do just that:

 using System; using System.ComponentModel; using System.Windows.Forms; namespace LastenBoekInfrastructure.Controls.Controls { [DefaultEvent("Click")] public class ImageButton : UserControl { public string ToolTipText { get { return _bButton.ToolTipText; } set { _bButton.ToolTipText = value; } } public bool CheckOnClick { get { return _bButton.CheckOnClick; } set { _bButton.CheckOnClick = value; } } public bool DoubleClickEnabled { get { return _bButton.DoubleClickEnabled; } set { _bButton.DoubleClickEnabled = value; } } public System.Drawing.Image Image { get { return _bButton.Image; } set { _bButton.Image = value; } } public new event EventHandler Click; public new event EventHandler DoubleClick; private ToolStrip _tsMain; private ToolStripButton _bButton; public ImageButton() { InitializeComponent(); } private void InitializeComponent() { var resources = new ComponentResourceManager(typeof(ImageButton)); _tsMain = new ToolStrip(); _bButton = new ToolStripButton(); _tsMain.SuspendLayout(); SuspendLayout(); // // tsMain // _tsMain.BackColor = System.Drawing.Color.Transparent; _tsMain.CanOverflow = false; _tsMain.Dock = DockStyle.Fill; _tsMain.GripMargin = new Padding(0); _tsMain.GripStyle = ToolStripGripStyle.Hidden; _tsMain.Items.AddRange(new ToolStripItem[] { _bButton}); _tsMain.Location = new System.Drawing.Point(0, 0); _tsMain.Name = "_tsMain"; _tsMain.Size = new System.Drawing.Size(25, 25); _tsMain.TabIndex = 0; _tsMain.Renderer = new ImageButtonToolStripSystemRenderer(); // // bButton // _bButton.DisplayStyle = ToolStripItemDisplayStyle.Image; _bButton.Image = ((System.Drawing.Image)(resources.GetObject("_bButton.Image"))); _bButton.ImageTransparentColor = System.Drawing.Color.Magenta; _bButton.Name = "_bButton"; _bButton.Size = new System.Drawing.Size(23, 22); _bButton.Click += bButton_Click; _bButton.DoubleClick += bButton_DoubleClick; // // ImageButton // Controls.Add(_tsMain); Name = "ImageButton"; Size = new System.Drawing.Size(25, 25); _tsMain.ResumeLayout(false); _tsMain.PerformLayout(); ResumeLayout(false); PerformLayout(); } void bButton_Click(object sender, EventArgs e) { if (Click != null) { Click(this, e); } } void bButton_DoubleClick(object sender, EventArgs e) { if(DoubleClick != null) { DoubleClick(this, e); } } public class ImageButtonToolStripSystemRenderer : ToolStripSystemRenderer { protected override void OnRenderToolStripBorder(ToolStripRenderEventArgs e) { //base.OnRenderToolStripBorder(e); } } } }