Button Skinnning

  • Thread starter Thread starter Gurikar
  • Start date Start date
G

Gurikar

Hello,
How to create skinned button(e.g rounded bitmap button) in CSharp. I
know there is BackgroundImage property to set bitmap as background,
but i need to make rounded button where in button corners needs to set
it to background of the parent. We used to achive in MFC by using
BitBlit(,,,, SRCINVERT) and SRCAND operation with the mask image. I
want to know how to do in Csharp DrawImage(). How to use MFC raster
operations(XOR, AND) in DrawImages of CSharp.
 
Hello,
  How to create skinned button(e.g rounded bitmap button) in CSharp. I
know there is BackgroundImage property to set bitmap as background,
but i need to make rounded button where in button corners needs to set
it to background of the parent. We used to achive in MFC by using
BitBlit(,,,, SRCINVERT) and SRCAND operation with the mask image. I
want to know how to do in Csharp DrawImage(). How to use MFC raster
operations(XOR, AND) in DrawImages of CSharp.

Hi,

You can always use a PictureBox instead
 
You can do it in many way, a common way would be to PAINT it yourslef. A
crude example, with two forms, Form1 is the main form, and open an instance
of Form2 if you click its button. All the added code to Form1:


---------------------
Form f2;
private void button1_Click(object sender, EventArgs e)
{
if (f2 != null) return;
f2 = new Form2();
f2.Owner = this;
f2.Show();
}

-----------------------

Note that f2 will close if the form Form1 closes (through the Owner
assignment).


And the added code for form Form2 :


-----------------
private void Form2_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
g.FillEllipse(Brushes.YellowGreen, this.ClientRectangle);
}
--------------------


To have the full effect, have Form2 properties

TransparencyKey set to System color Control

FormBorderStyle set to None



Sure that example is very crude, and it would probably be better to use a
User Control instead of a Form. You will also have to add the logic to
detect mouse click (is the click in the ellipse/ graphical region, or not),
but basically, that is a matter of Graphics (pens, brushes, path, etc.) from
that ... point (pun intended).

And just to give to Caesar what belongs to Caesar, the idea of a form is
from Chris Sells'book "Windows Forms 2.0 Programing".



Vanderghast, Access MVP
 
You can do it in many way, a common way would be to PAINT it yourslef.  A
crude example, with two forms, Form1 is the main form, and open an instance
of  Form2 if you click its button. All the added code to Form1:

---------------------
        Form f2;
        private void button1_Click(object sender, EventArgs e)
        {
            if (f2 != null) return;
            f2 = new Form2();
            f2.Owner = this;
            f2.Show();
        }

-----------------------

Note that f2 will close if the form Form1 closes (through the Owner
assignment).

And the added code for form Form2 :

-----------------
        private void Form2_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            g.FillEllipse(Brushes.YellowGreen, this.ClientRectangle);
        }
--------------------

To have the full effect, have Form2 properties

    TransparencyKey     set to System color Control

    FormBorderStyle    set to None

Sure that example is very crude, and it would probably be better to use a
User Control instead of a Form. You will also have to add the logic to
detect mouse click (is the click in the ellipse/ graphical region, or not),
but basically, that is a matter of Graphics (pens, brushes, path, etc.) from
that ... point  (pun intended).

And just to give to Caesar what belongs to Caesar, the idea of a form is
from Chris Sells'book  "Windows Forms 2.0 Programing".

Vanderghast, Access MVP






- Show quoted text -

Thank you,

I have created custom button control this way:

public partial class MyButton : Button
{
private System.Drawing.Image _btnimg;

public MyButton()
{
_btnimg = Resource1.buttonfoc;

InitializeComponent();

}

protected override void OnMouseEnter(EventArgs e)
{
_btnimg = Resource1.buttondn;
base.OnMouseEnter(e);
}

protected override void OnMouseLeave(EventArgs e)
{
_btnimg = Resource1.buttonfoc;
base.OnMouseLeave(e);
}

protected override void OnEnabledChanged(EventArgs e)
{
if (!Enabled)
_btnimg = Resource1.buttondisable;
else
_btnimg = Resource1.buttonfoc;

base.OnEnabledChanged(e);
}

protected override void OnPaint(PaintEventArgs e)
{
//this.conte
base.OnPaint(e);

Size sz = _btnimg.Size;
this.Size = sz;

e.Graphics.DrawImage(_btnimg, this.ClientRectangle);
this.Text = "Button";
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;

e.Graphics.DrawString(this.Text, Font, new SolidBrush
(ForeColor), sf);
}

}

Iam using this custom button control in my other forms. My problem is
since bitmap image that iam drawing in buttons place is bit of
elliptical, borders of an image are in white. so i want to do XOR of
white button background with parent background. How to do this?

One more thing, Iam not able to place text string at the center of the
button window. How to align button string at the center of the window.
 
XOR is rather from black and white time concept. The actual concept is
strongly inspired from DirectX 9, were you mainly use transparency (wich is
a kind of blending) :
new color = (1-alpha) * actual color (already painted in the
background)
+ alpha * color applied by the brush/texture

where alpha is the transparency (alpha=1, opaque, you don't see through the
actual color/texture you are using to paint the pixel; 0 = total
transparency, you keep the background color, forgiving the supplied color by
the brush). Using alpha = 0.75, you keep 75% of the color specified by your
bursh, while 25% of the color is supplied by what was under the surface you
are actually painting.


The problem with the position of your text seems about the use of the wrong
overload, try:

(5 of 6) DrawString( string s, Brush b, RectangleF r, StringFormat sf)

With your actual call:

e.Graphics.DrawString(this.Text, Font, new SolidBrush
(ForeColor), sf);


it does not specify the rectangle region for which the string format (which
help to position the text) is to be considered.



Vanderghast, Access MVP



You can do it in many way, a common way would be to PAINT it yourslef. A
crude example, with two forms, Form1 is the main form, and open an
instance
of Form2 if you click its button. All the added code to Form1:

---------------------
Form f2;
private void button1_Click(object sender, EventArgs e)
{
if (f2 != null) return;
f2 = new Form2();
f2.Owner = this;
f2.Show();
}

-----------------------

Note that f2 will close if the form Form1 closes (through the Owner
assignment).

And the added code for form Form2 :

-----------------
private void Form2_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
g.FillEllipse(Brushes.YellowGreen, this.ClientRectangle);
}
--------------------

To have the full effect, have Form2 properties

TransparencyKey set to System color Control

FormBorderStyle set to None

Sure that example is very crude, and it would probably be better to use a
User Control instead of a Form. You will also have to add the logic to
detect mouse click (is the click in the ellipse/ graphical region, or
not),
but basically, that is a matter of Graphics (pens, brushes, path, etc.)
from
that ... point (pun intended).

And just to give to Caesar what belongs to Caesar, the idea of a form is
from Chris Sells'book "Windows Forms 2.0 Programing".

Vanderghast, Access MVP






- Show quoted text -

Thank you,

I have created custom button control this way:

public partial class MyButton : Button
{
private System.Drawing.Image _btnimg;

public MyButton()
{
_btnimg = Resource1.buttonfoc;

InitializeComponent();

}

protected override void OnMouseEnter(EventArgs e)
{
_btnimg = Resource1.buttondn;
base.OnMouseEnter(e);
}

protected override void OnMouseLeave(EventArgs e)
{
_btnimg = Resource1.buttonfoc;
base.OnMouseLeave(e);
}

protected override void OnEnabledChanged(EventArgs e)
{
if (!Enabled)
_btnimg = Resource1.buttondisable;
else
_btnimg = Resource1.buttonfoc;

base.OnEnabledChanged(e);
}

protected override void OnPaint(PaintEventArgs e)
{
//this.conte
base.OnPaint(e);

Size sz = _btnimg.Size;
this.Size = sz;

e.Graphics.DrawImage(_btnimg, this.ClientRectangle);
this.Text = "Button";
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;

e.Graphics.DrawString(this.Text, Font, new SolidBrush
(ForeColor), sf);
}

}

Iam using this custom button control in my other forms. My problem is
since bitmap image that iam drawing in buttons place is bit of
elliptical, borders of an image are in white. so i want to do XOR of
white button background with parent background. How to do this?

One more thing, Iam not able to place text string at the center of the
button window. How to align button string at the center of the window.
 
Back
Top