I have developed an application in VB.NET that I'm now moving over to C#.
Everything is going smooth so far, but I'm facing one problem.
I have a pictureBox that has a picture in it. Over this picture box I want a gradient to be that goes from transparent at top down to the color "control" to blend in with the forms background color. I have allready done this in VB.net which works, but when im trying to do this in C# the gradient seems to be drawn, but behind the picture.
Here is what i have tried:
private void PictureBox1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
Color top = Color.Transparent;
Color bottom = Color.FromKnownColor(KnownColor.Control);
GradientPictureBox(top, bottom, ref PictureBox1, e);
}
public void GradientPictureBox(Color topColor, Color bottomColor, ref PictureBox PictureBox1, System.Windows.Forms.PaintEventArgs e)
{
LinearGradientMode direction = LinearGradientMode.Vertical;
LinearGradientBrush brush = new LinearGradientBrush(PictureBox1.DisplayRectangle, topColor, bottomColor, direction);
e.Graphics.FillRectangle(brush, PictureBox1.DisplayRectangle);
brush.Dispose();
}
However this does in fact seem to work, but again it paints the gradient behind the picture. In VB.net it painted it on top of the picture without any extra code..
Do i need to add anything extra?
If it matters im coding in C# 2010 express.
The following code does it.
I would perhaps consider making this its own control, and using the following code as its Paint event.
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(pictureBox1.Image, 0, 0, pictureBox1.ClientRectangle, GraphicsUnit.Pixel);
Color top = Color.FromArgb(128, Color.Blue);
Color bottom = Color.FromArgb(128, Color.Red);
LinearGradientMode direction = LinearGradientMode.Vertical;
LinearGradientBrush brush = new LinearGradientBrush(pictureBox1.ClientRectangle, top, bottom, direction);
e.Graphics.FillRectangle(brush, pictureBox1.ClientRectangle);
}
This code produces the following image
Related
I'm trying to understand the graphics, and in the Graphics.FromImage documentation, it has this as an example:
private void FromImageImage(PaintEventArgs e)
{
// Create image.
Image imageFile = Image.FromFile("SampImag.jpg");
// Create graphics object for alteration.
Graphics newGraphics = Graphics.FromImage(imageFile);
// Alter image.
newGraphics.FillRectangle(new SolidBrush(Color.Black), 100, 50, 100, 100);
// Draw image to screen.
e.Graphics.DrawImage(imageFile, new PointF(0.0F, 0.0F));
// Dispose of graphics object.
newGraphics.Dispose();
}
I'm new to C# and Windows Forms and am struggling to understand how this all fits together. How is this code run, say when the form first loads or when a button is pressed?
Maybe this will help. I have an example of both drawing on Paint events but also drawing on top of an existing Image. I created a form with two picture boxes. One for each case. pictureBox1 has an event handler for the .Paint event, while pictureBox2 is only drawn when a button is pressed.
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
pictureBox1.BackColor=Color.Black;
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
// The code below will draw on the surface of pictureBox1
// It gets triggered automatically by Windows, or by
// calling .Invalidate() or .Refresh() on the picture box.
DrawGraphics(e.Graphics, pictureBox1.ClientRectangle);
}
private void toolStripButton1_Click(object sender, EventArgs e)
{
// The code below will draw on an existing image shown in pictureBox2
var img = new Bitmap(pictureBox2.Image);
var g = Graphics.FromImage(img);
DrawGraphics(g, pictureBox2.ClientRectangle);
pictureBox2.Image=img;
}
void DrawGraphics(Graphics g, Rectangle target)
{
// draw a red rectangle around the moon
g.DrawRectangle(Pens.Red, 130, 69, 8, 8);
}
}
So when you launch the application a red rectangle appears on the left only, because the button hasn't been pressed yet.
and when the button is pressed, the red rectangle appears on top of the image displayed in pictureBox2.
Nothing dramatic, but it does the job. So depending on the mode of operation you need (user graphics, or image annotations) use the example code to understand how to do it.
In my WinForm I need to draw selection area on the screen. User should be able to drag selected rectangle on corners or border to resize. As below:
I could draw the rectangle with solid brush.
How can I make it resizeable when dragging from border or corner?
private void panel1_MouseDown(object sender, MouseEventArgs e) {
using (Graphics g = this.panel1.CreateGraphics()) {
Pen pen = new Pen(Color.Black, 2);
Brush brush = new SolidBrush(this.panel1.BackColor);
g.FillRectangle(brush, this.panel1.Bounds);
g.DrawRectangle(pen, e.X, e.Y, 20, 20);
pen.Dispose();
brush.Dispose();
}
}
Instead of using MouseDown, I think you can use MouseMove.
At first, this event checks if left button is pressed:
if(e.Button == MouseButtons.Left)) {
//Check for the position of your mouse
}
Now you will put some ifstatement to be sure you will redraw your rectangle depending on your little resize boxes. Every if will recalculate the rectangle, erasing the old one and plotting the newest.
Hope this helps.
Latest
//combination of pictureBox1.Invalidate(); and pictureBox1.Update();
pictureBox1.Refresh();
After pictureBox1.Refresh(); , it will trigger pictureBox1_Paint
Following code will have the icon remain on the picture box.
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
if (checkBox1.Checked)
{
e.Graphics.DrawIcon(IconCamera, rect);
}
}
Following code NOT! it will draw the icon and clear it soon after it was drawn in Paint (that why have my old question)
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
Graphics graphic = Graphics.FromHwnd(pictureBox1.Handle);
if (checkBox1.Checked)
{
graphic.DrawIcon(IconCamera, rect);
}
}
I thought these two graphics are same but it seem like they are not same.
May I know what is the difference of Graphics of PaintEventArgs of
pictureBox1 and Graphics from handle of pictureBox1?
Why DrawIcon on pictureBox1 Paint event with Graphics from handle of
pictureBox1 will disappear in Paint event but not in the function I
declared? thanks
Old Question
When I checked the checkbox then I will draw icon on the picture box,
Graphics graphic = Graphics.FromHwnd(pictureBox1.Handle);
if (checkBox1.CheckState.ToString() == "Checked")
{
Icon IconCamera = new Icon("cam.ico");
Rectangle rect = new Rectangle(100, 100, 32, 32);
graphic.DrawIcon(IconCamera, rect);
}
BUT After the picture box refresh,
pictureBox1.Refresh();
the drawn icon will disappear.
May I know what picturebox event OR else can I make use to put in the drawing icon code to maintain or always auto redraw the icon even after the picture box refresh()? thanks. I tried Paint and Validating of picturebox1 cannot work.
The best is to use two calls one after each other:
pictureBox1.Invalidate();
pictureBox1.Update();
This will force the picturebox to be redrawn.
Then I subscribe for Paint event, which is signalled when previous two lines of code are called (in case of redrawing the picturebox). Here I do the all the drawings.
In your case it would be something like this:
public void Paint(PaintEventArgs e)
{
if (checkBox1.Checked)
{
Rectangle rect = new Rectangle(100, 100, 32, 32);
Icon IconCamera = new Icon("cam.ico");
e.Graphics.DrawIcon(IconCamera, rect);
}
}
Then, subscribe for event CheckedChanged of checkBox1, and call there that two redrawing commands from the begin of this post.
It causes, that when user change the checked state of checkBox1, pictureBox1 will be forced to be redrawn and the icon will be drawn according to checkBox1 state.
You can avoid using a Graphics object and find another way. I don't know if you are forced in using an icon, but you can try to use a Label this way.
label1.Image = "yourImage.bmp" // you can use a bitmap
There here come your statement.
if(checkBox1.Checked) {
label1.Visible = true;
label1.Location = new Point(x, y); // your coordinate
}
Then you can handle checkBox1_CheckedChanged and code:
Void checkBox1_CheckedChanged(object sender, EventArgs e) {
if(!checkBox1.Checked) {
label1.Visible = false;
}
}
Hope this could help.
I was nicely supplied a code from Alex M, for painting the background image to a panel but realized that if a PictureBox's BackgroundImage has its Center image property set, the drawn image becomes stretched but not centered. I so far have this code:
private void panel1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawImage(pictureBox1.BackgroundImage,
new Rectangle(pictureBox1.Location, pictureBox1.Size));
}
This draws the background image to the panel but if pictureBox1's background image property is set to CENTER, it does not paint the image in the Center of the Rectangle, but instead stretches the image to fit the rectangle.
The only possible solution I've found is here but I can't make any sense of it.
The reason the image is being stretched is because the second parameter to DrawImage specifies the location and size of where you're drawing the image, and you're specifying the entire area of the picture box, not the area of the image itself.
If you want to center it, try something like this:
private void panel1_Paint(object sender, PaintEventArgs e)
{
var hPadding = (pictureBox1.Width - pictureBox1.BackgroundImage.Width) / 2;
var vPadding = (pictureBox1.Height - pictureBox1.BackgroundImage.Height) / 2;
var imgRect = new Rectangle(pictureBox1.Left + hPadding, pictureBox1.Top + vPadding, pictureBox1.BackgroundImage.Width, pictureBox1.BackgroundImage.Height);
e.Graphics.DrawImage(pictureBox1.BackgroundImage, imgRect);
}
I drew some circles on the Form1 using GDI+, and the center of the circle is a small red rectangle of Custom Control which is derived from User Control, the BackgroundImage property ofForm1's a bitmap which is also drawn by GDI+ with several colors.
What I want is that when I move the red rectangle(the center of circle) with a mouse, the circle will also move following the red rectangle. Using the MouseDown, MouseMove event I could move the red rectangle smoothly with the mouse.
My problem is how to move the circle corresponding to the red rectangle(the center of circle).
I enabled the double buffering to solve the flicker problem. CircleCenter is an object of Custom Control class(e.g. the red rectangle). GObject is a Grahpics object.
Here is some key codes:
public Form1()
{
InitializeComponent();
this.SetStyle(ControlStyles.DoubleBuffer | //enables double-buffering
ControlStyles.UserPaint |
ControlStyles.AllPaintingInWmPaint,
true);
}
Point CCenterPoint = new Point();
private int Diameter = 250;
private void CircleCenterMouseDown(object sender, MouseEventArgs e)
{
CCenterPoint = new Point(-e.X, -e.Y);
}
private void CircleCenterMouseMove(object sender, MouseEventArgs e)
{
if (e.Button == MouseButtons.Left)
{
Point MousePos = CircleCenter.MousePosition;
MousePos.Offset(CCenterPoint.X, CCenterPoint.Y);
CircleCenter.Location = CircleCenter.Parent.PointToClient(MousePos);
CircleCenter.BringToFront();
CirclePen.Color = Color.Black;
GObject.DrawEllipse(CirclePen, CircleCenter.Left- Diameter/2, CircleCenter.Top - Diameter/2, Diameter, Diameter);
this.Invalidate();
}
}
How to remove the black circle drawn by GDI+ produced in the MouseMove proceed?
I googled several websites and didn't get a satisfied answer. Hope you could give me some hints,Thx!
Well, As I understand from your question, You just need to draw a circle around the red rectangle, This is quite easy.
In the Paint event of the Form, Add the following (assuming that your red rectangle control has the name "CircleCenter" and your Form was named "Form1"):
private void Form1_Paint(object sender, PaintEventArgs e)
{
// get the Graphics object of the form.
Graphics g = e.Graphics;
// create a think red pen for the circle drawing
Pen redPen = new Pen(Brushes.Red, 4.0f);
// drawing the circle
PointF ctrlCenter = GetCenterOfControl(CircleCenter);
g.DrawEllipse(redPen,
ctrlCenter.X - (Diameter / 2),
ctrlCenter.Y - (Diameter / 2),
Diameter, Diameter);
}
//The following little method to calculate the center point
PointF GetCenterOfControl(Control ctrl)
{
return new PointF(ctrl.Left + (ctrl.Width / 2),
ctrl.Top + (ctrl.Height / 2));
}
Any way, I know it looks long for such a simple task like Circle drawing! here is the ugly one line version of the above code:
e.Graphics.DrawEllipse(new Pen(Brushes.Red, 4.0f), (centerCircle.Left + (centerCircle.Width / 2)) - (Diameter / 2), (centerCircle.Top + (centerCircle.Height / 2)) - (Diameter / 2), Diameter, Diameter);
You will need to always reset the entire GObject (erase the images you drawn on it) and then redraw them all again.
This can be done by simply drawing a rectangle with the color of the object from which you obtained the Graphics object (although you didn't mentioned it, I think GObject is a Graphics object, obtained of some win control?).
So something like:
Control control = CircleCenter.Parent; // Parent control where you get Graphics object from.
System.Drawing.SolidBrush sBrush = new System.Drawing.SolidBrush(control.BackColor); // Brush to be used with the same color like the one of the parent control.
GObject.FilledRectangle(sBrush, new Rectangle(0, 0, control.Width, control.Height); // Erase background.
GObject.DrawEllipse(CirclePen, CircleCenter.Left- Diameter/2, CircleCenter.Top - Diameter/2, Diameter, Diameter); // Do your stuff.
should hide the old drawings and re-draw the circle on the new location.