Button 3d effect

Marcos

Hi,
I need make buttons with 3d effect. Like buttons on "Backup and Restore" ABB menu.

I have tried with the background image, but have some problems.

Any idea?

Thanks



Marcos2008-6-26 14:41:39

John Wiberg

I don't understand what the problem is? Could you please explain a bit more or show us a code example of what you are doing.

Remember that FlexPendant buttons should be
Me.Button1 = New ABB.Robotics.Tps.Windows.Forms.Button
and not
Me.Button1 = New System.Windows.Forms.Button

Then if you want to use images it is also common that people use PictureBox instead of a button.

RussD

They swap button images on click to accentuate the change of state. If you observe the difference in the two images, it looks like they just make the same image background a little darker, offset the position of the image content a few pixels, and add some changes to the shadowing of the button to complete the effect.

Also, make the image size and the button size the same, like 80 x 80, for example, this will hide the square edges of the button if that is what you wish to do.

RussD2008-6-26 16:14:16

Marcos

I have some like this:

        private void tareasButton1_MouseDown(object sender, MouseEventArgs e)
        {         
            
             this.tareasButton1.BackgroundImage = ((System.Drawing.Image) this._recursos.GetObject("tareasButton1Pressed.BackgroundIma ge")));

             this.tareasButton1.BorderStyle = BorderStyle.None;
          
             this.tareasButton1.Refresh();   

            
        }

        private void tareasButton1_Up(object sender, MouseEventArgs e)
        {
             this.tareasButton1.BackgroundImage = ((System.Drawing.Image)(this._recursos.GetObject("tareasButt on1.BackgroundImage")));

             this.tareasButton1.BorderStyle = BorderStyle.None;
             this.tareasButton1.Refresh();

        }


But, it is not enough.
I see a shadow when button is pressed. I cant eliminate that shadow.






Marcos2008-6-26 17:25:55

RussD

You might have to inherit a button and make your own that has a overridden Paint method to avoid that, or as John says, use the Picture box.

Marcos

Hello,

Here i post a custom control.

Warning: It dont use ABB buttons, it extends windows control.

(sorry, it is in spanglish)

code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Text;
using System.Windows.Forms;
using System.IO;
namespace MisControles.MiControl
{
public partial class MiBoton : Control
{
System.Reflection.Assembly myAssembly;
PictureBox imagenBoton = new PictureBox();
public PictureBox ImagenBoton
{
get { return imagenBoton; }
set { imagenBoton = value; }
}
PictureBox imagenBotonPresionado = new PictureBox();
public PictureBox ImagenBotonPresionado
{
get { return imagenBotonPresionado; }
set { imagenBotonPresionado = value; }
}
bool presionado;
 
public MiBoton()
{
InitializeComponent();
Inicializar();
}
 
 
 
 
private void Inicializar()
{
myAssembly = System.Reflection.Assembly.GetExecutingAssembly();
Stream myStream1 = myAssembly.GetManifestResourceStream("MisControles.MiControl .MrsLabelButton.jpg");
Stream myStream2 = myAssembly.GetManifestResourceStream("MisControles.MiControl .MrsLabelButtonSel.jpg");
 
 
imagenBoton.Image = new Bitmap(myStream1);
imagenBotonPresionado.Image = new Bitmap(myStream2);
//imagenBoton.Dock = imagenBotonPresionado.Dock = DockStyle.Fill;
//imagenBoton.BackColor = imagenBotonPresionado.BackColor = Color.White;
//imagenBoton.SizeMode = PictureBoxSizeMode.StretchImage;
//imagenBotonPresionado.SizeMode = PictureBoxSizeMode.StretchImage;
//imagenBoton.Size = this.Size;
//this.Controls.Add(imagenBoton);
//this.Controls.Add(picbotonSel);

}
 
// When the mouse button is pressed, set the "pressed" flag to true
// and invalidate the form to cause a repaint. The .NET Compact Framework
// sets the mouse capture automatically.
protected override void OnMouseDown(MouseEventArgs e)
{
this.presionado = true;
this.Invalidate();
base.OnMouseDown(e);
}
// When the mouse is released, reset the "pressed" flag
// and invalidate to redraw the button in the unpressed state.
protected override void OnMouseUp(MouseEventArgs e)
{
this.presionado = false;
this.Invalidate();
base.OnMouseUp(e);
}
// Override the OnPaint method to draw the background image and the text.
protected override void OnPaint(PaintEventArgs e)
{
//this.BackColor = Color.Transparent;

if (this.presionado && this.imagenBotonPresionado.Image != null)
e.Graphics.DrawImage(this.imagenBotonPresionado.Image, 0, 0, base.Size.Width, base.Size.Height);

else
e.Graphics.DrawImage(this.imagenBoton.Image, 0, 0, base.Size.Width, base.Size.Height);
// Draw the text if there is any.
if (this.Text.Length > 0)
{
SizeF size = e.Graphics.MeasureString(this.Text, this.Font);
// Center the text inside the client area of the PictureButton.
e.Graphics.DrawString(this.Text,
this.Font,
new SolidBrush(this.ForeColor),
(this.ClientSize.Width - size.Width) / 2,
(this.ClientSize.Height - size.Height) / 2);
}
// Draw a border around the outside of the
// control to look like Pocket PC buttons.
//e.Graphics.DrawRectangle(new Pen(Color.Black), 0, 0,
// this.ClientSize.Width - 1, this.ClientSize.Height - 1);
base.OnPaint(e);
}

}
}

 

Marcos foglino