Develop Reference

Scroll an image quickly and smoothly

When scrolling an image in a browser using the scrollbars - the image scrolls quickly and smoothly. On the other hand, making a tight loop with Graphics.DrawImage, incrementing the location's X-coordinate by 1 each iteration - returns a slow motion. (It's also somewhat jerky even after making the Control DoubleBuffered.)
How can I get fast rendering like a browser's?
EDIT
void DoNow()
{
Rectangle rec1 = new Rectangle(Point.Empty, panel1.BackgroundImage.Size);
Rectangle rec2 = new Rectangle(Point.Empty, panel1.BackgroundImage.Size);
using (Graphics g = Graphics.FromImage(panel1.BackgroundImage))
{
for (int i = 0; i < 100; i++)
{
rec2.Location = new Point(rec2.Location.X + 1, rec2.Location.Y);
g.DrawImage(image, rec1, rec2, GraphicsUnit.Pixel);
panel1.Refresh();
}
}
}

It seems from the comments like the answer to my question is that browsers use hardware acceleration which is unavailable to Winforms. (Please feel free to correct me if I'm wrong.)

The easiest solution is to use a Panel object with the scroll bars set to Auto. Place a picturebox as a child object with the size mode set to Auto. The picture box will expand to the size of the image that you assign to it. Since the picture box will expand to be larger than the panel, the panel's scroll bars will appear. When you scroll the image using the panel, it will be smooth.
If you still want to manually provide the drawing yourself, you are getting the "flicker" because the Invalidate method automatically performs background erasing which is not performed during the OnPaint event. You need to subclass the parent control that you are drawing on and override the OnPaintBackground event. Like below:
protected override void OnPaintBackground(PaintEventArgs pevent)
{
// base.OnPaintBackground(pevent);
}
Also, remember to perform ALL drawing during the OnPaint event and use the e.Graphics object.

Why Isn't ControlPaint.DrawGrid Function not Displaying Anything to a PictureBox

I want to make a graph paper grid and set the drawing to the image of a picture box. Now I might even be using the wrong thing for drawing a graph paper grid but I have asked around and some people said that the DrawGrid method would work. None of the code below is returning any errors, but when I run the button1_Click method, it doesn't display anything to the picturebox.
private void button1_Click(object sender, EventArgs e)
{
button2.Visible = true;
Bitmap bmp = new Bitmap(pictureBox1.ClientSize.Width, pictureBox1.ClientSize.Height);
Size yourGridspacing = new Size((int)numericUpDown1.Value, (int)numericUpDown2.Value);
using (Graphics G = Graphics.FromImage(bmp))
{
ControlPaint.DrawGrid(G, new Rectangle(Point.Empty, bmp.Size), yourGridspacing , Color.Black);
}
pictureBox1.Image = bmp;
}
Any idea what the problem might be?

Your PictureBox probably has a White Background.. If so, please tell the ControlPaint.DrawGrid method so..:
ControlPaint.DrawGrid(G, new Rectangle(Point.Empty, bmp.Size),
yourGridspacing , Color.White);
The param doesn't control the color of the dots; it is supposed to help find a Color that will contrast. So maybe the best way to write it will be:
ControlPaint.DrawGrid(G, new Rectangle(Point.Empty, bmp.Size),
yourGridspacing, pictureBox1.BackColor);
This will work for all colors except Color.Transparent.. (in which case the Color of the control below will decide if the dots are visible..)
You may wonder, why such a roundabout way is chosen? Well, the method DrawGrid is not really meant as a normal drawing method, like the ones in Graphics. It is one of several methods that are meant to construct a robust display of Windows controls like Button or CheckBox.. Now, the Background over which the Grid is drawn need not have only one Color; it could be an Image or a Gradient and it could change..
You are supposed to pick a typical color to represent that background. The system will then choose a Color with good contrast for the dots.
For a way to control the grid's color see the last option in my other answer!

Remove button border when entered

When I hover over buttons on my C# form I have them highlighted yellow like how Microsoft office products but I don't want it to show the button border. I've seen people mention FlatStyle or FlatAppearance but it doesn't seem to recognize those commands. I'm looking into rendering now but I'm new to C# and I'm certain there must be a simple way to do it, It's not something I want to spend a lot of time on if possible.
I must stress I've been reading through books on windows forms programming and haven't found any answers its not that I'm lazy but I often find SO a very good source with really good input.
Tried this:
this.TSVehicleButton.BorderStyle = None;
Tried this:
this.TSVehicleButton.System.Windows.Forms.BorderStyle = None;
I tried lots of things but didn't mention it as part of my question, I'm new to C# and didn't want to come across as stupid. People get a little bitchy when people put things that they tried and isn't right.

Use following on
public class CustomButton : Button
{
public CustomButton()
: base()
{
// Prevent the button from drawing its own border
FlatAppearance.BorderSize = 0;
FlatStyle = System.Windows.Forms.FlatStyle.Flat;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
// Draw Border using color specified in Flat Appearance
Pen pen = new Pen(FlatAppearance.BorderColor, 1);
Rectangle rectangle = new Rectangle(0, 0, Size.Width - 1, Size.Height - 1);
e.Graphics.DrawRectangle(pen, rectangle);
}
}
I might help you.

just use this.FlatStyle = FlatStyle.Flat;

Just set the following Button properties, for example at design time in the properties window:
FlatStyle=Flat
FlatAppearance.BorderSize=0
Or run the following code, for example for a button named button1:
button1.FlatStyle=True
button1.FlatAppearance.BorderSize=0

This worked perfectly for me, and it's so simple!
button.FlatAppearance.BorderColor = Color.FromArgb(0, 255, 255, 255); // transparent
button.FlatAppearance.BorderSize = 0;
Now the button has no borders, even when you enter the cursor. This worked perfectly on Visual Studio 2015.

there is a way of taking the border away from the button and its in the button properties.
First make sure you have clicked on the button so that the properties belong to the button.
on the properties pane go and find Flat Appearance and expand it by clicking on the + sign in front of it.
This will open more option for you, one of the option is border size which is set to 1, change this to 0,
Next, 3 lines below that there is a property called FlatStyle and its set to standard, this needs to be changed to Flat.
Flat
Job done!
Hope this helps

Windows Forms Custom Control not painting correctly

So i'm trying to make a nice rounded switch that when clicked it will slide either left or right to basically turn something on or off (it could be used for other things). I have a rectangle version working somewhat ok (i have a few tweaks in mind that I want to make for it) but the problem I'm running into is by using rounded rectangles. I made a few classes to help my self in this. I have one called RoundRectanglePath. Using the Create method I give it a Rectangle (or x,y,w,h) and a radius for the corners and it returns a closed GraphicsPath that I can then use Graphics.[Fill|Draw]Path with. I then have a RoundRectangle class which is a just a control that acts very similar to a Label. I found that if I override the OnPaintBackground and not send the event to the base, but instead paint a rectangle the same color as it's Parent.BackColor than I get the illusion that the control is really round. (as a related side note I allow transparent)
For my RoundMovableSwitch class I use 2 RoundRectanglePaths to split the Control in half. The left is a green Color and the right is Pink (thinking about it now I could have just used a horizontal LinearGradient brush...ooops oh well) I then draw the string On and Off on opposing sides. To that control I add a RoundRectangle. When the user clicks on either the RoundRectangle or the MoveableSwitch the Control then moves the RoundRectangle left or right 1 pixel at a time. The movement works great. The problem I am having is this. The outside Edge of the RoundRectangle is the correct Transparent color. The inside edge is the wrong color. See RoundMovingSwitch 1 and 2 in picture below. Once I get the code working correctly I'll go back and reorganize the code a bit more.
The code is hosted on GitHub: Here

"The problem I am having is this. The outside Edge of the RoundRectangle is the correct Transparent color. The inside edge is the wrong color."
Not sure I understand the problem...
Are you trying to get rid of the blue corners that are outside the rounded edges?
If so, then try this in RoundRectangle:
public RoundRectangle()
{
this.ResizeRedraw = true;
this.VisibleChanged += new EventHandler(RoundRectangle_VisibleChanged);
}
private bool RegionSet = false;
void RoundRectangle_VisibleChanged(object sender, EventArgs e)
{
if (this.Visible && !RegionSet)
{
RegionSet = true;
var r = new RectangleEx(this.ClientRectangle);
var path = RoundRectanglePath.Create(r.ToRectangle(), this.Radius, this.Corners);
this.Region = new Region(path);
}
}
*If the size of the control changes then you should reset the Region() property to the new size.
Edit: To make it reset the Region when the size changes:
protected override void OnSizeChanged(EventArgs e)
{
base.OnSizeChanged(e);
var r = new RectangleEx(this.ClientRectangle);
var path = RoundRectanglePath.Create(r.ToRectangle(), this.Radius, this.Corners);
this.Region = new Region(path);
}

Why do my WinForms controls flicker and resize slowly?

I'm making a program where I have a lot of panels and panels in panels.
I have a few custom drawn controls in these panels.
The resize function of 1 panel contains code to adjust the size and position of all controls in that panel.
Now as soon as I resize the program, the resize of this panel gets actived. This results in a lot of flickering of the components in this panel.
All user drawn controls are double buffered.
Can some one help me solve this problem?

To get rid of the flicker while resizing the win form, suspend the layout while resizing. Override the forms resizebegin/resizeend methods as below.
protected override void OnResizeBegin(EventArgs e) {
SuspendLayout();
base.OnResizeBegin(e);
}
protected override void OnResizeEnd(EventArgs e) {
ResumeLayout();
base.OnResizeEnd(e);
}
This will leave the controls intact (as they where before resizing) and force a redraw when the resize operation is completed.

Looking at the project you posted, the flickering is really bad when you have the first tab selected, with the gradient-filled group boxes. With the second or third tab showing, there's hardly any flicker, if at all.
So clearly the problem has something to do with the controls you're showing on that tab page. A quick glance at the code for the custom gradient-filled group box class gives away the more specific cause. You're doing a lot of really expensive processing each time you draw one of the groupbox controls. Because each groupbox control has to repaint itself each time the form is resized, that code is getting executed an unbelievable number of times.
Plus, you have the controls' background set to "Transparent", which has to be faked in WinForms by asking the parent window to draw itself first inside the control window to produce the background pixels. The control then draws itself on top of that. This is also more work than filling the control's background with a solid color like SystemColors.Control, and it's causing you to see the form's pixels being drawn while you resize the form, before the groupboxes have a chance to paint themselves.
Here's the specific code I'm talking about from your custom gradient-filled groupbox control class:
protected override void OnPaint(PaintEventArgs e)
{
if (Visible)
{
Graphics gr = e.Graphics;
Rectangle clipRectangle = new Rectangle(new Point(0, 0), this.Size);
Size tSize = TextRenderer.MeasureText(Text, this.Font);
Rectangle r1 = new Rectangle(0, (tSize.Height / 2), Width - 2, Height - tSize.Height / 2 - 2);
Rectangle r2 = new Rectangle(0, 0, Width, Height);
Rectangle textRect = new Rectangle(6, 0, tSize.Width, tSize.Height);
GraphicsPath gp = new GraphicsPath();
gp.AddRectangle(r2);
gp.AddRectangle(r1);
gp.FillMode = FillMode.Alternate;
gr.FillRectangle(new SolidBrush(Parent.BackColor), clipRectangle);
LinearGradientBrush gradBrush;
gradBrush = new LinearGradientBrush(clipRectangle, SystemColors.GradientInactiveCaption, SystemColors.InactiveCaptionText, LinearGradientMode.BackwardDiagonal);
gr.FillPath(gradBrush, RoundedRectangle.Create(r1, 7));
Pen borderPen = new Pen(BorderColor);
gr.DrawPath(borderPen, RoundedRectangle.Create(r1, 7));
gr.FillRectangle(gradBrush, textRect);
gr.DrawRectangle(borderPen, textRect);
gr.DrawString(Text, base.Font, new SolidBrush(ForeColor), 6, 0);
}
}
protected override void OnPaintBackground(PaintEventArgs pevent)
{
if (this.BackColor == Color.Transparent)
base.OnPaintBackground(pevent);
}
And now that you've seen the code, red warning flags ought to go up. You're creating a bunch of GDI+ objects (brushes, pens, regions, etc.), but failing to Dispose any of them! Almost all of that code should be wrapped in using statements. That's just sloppy coding.
Doing all of that work costs something. When the computer is forced to devote so much time to rendering controls, other things lag behind. You see a flicker as it strains to keep up with the resize. It's no different than anything else that overloads a computer (like a computing the value of pi), it's just really easy to do so when you use as many custom drawn controls like you do here. Transparency is hard in Win32, and so is a lot of custom 3D painting. It makes the UI look and feel clunky to the user. Yet another reason that I don't understand the rush away from native controls.
You really only have three options:
Deal with the flicker. (I agree, this is not a good option.)
Use different controls, like the standard, built-in ones. Sure, they may not have a fancy gradient effect, but that's going to look broken half of the time anyway if the user has customized their Windows theme. It's also reasonably hard to read black text on a dark gray background.
Change the painting code within your custom controls to do less work. You may be able to get by with some simple "optimizations" that don't cost you any of the visual effects, but I suspect this is unlikely. It's a tradeoff between speed and eye candy. Doing nothing is always faster.

I successfully eliminate flicker when form resize using this code. Thanks.
VB.NET
Public Class Form1
Public Sub New()
Me.SetStyle(ControlStyles.UserPaint Or ControlStyles.OptimizedDoubleBuffer Or ControlStyles.AllPaintingInWmPaint Or ControlStyles.SupportsTransparentBackColor, True)
End Sub
Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Resize
Me.Update()
End Sub
End Class
C#
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
Resize += Form1_Resize;
this.SetStyle(ControlStyles.UserPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.AllPaintingInWmPaint | ControlStyles.SupportsTransparentBackColor, true);
}
private void Form1_Resize(object sender, System.EventArgs e)
{
this.Update();
}
}

So I ran into this same problem - my control with a transparent background was repainting like 34 times, and what worked for me was:
On my form that contained the control
protected override void OnResize(EventArgs e)
{
myControl.Visible = false;
base.OnResize(e);
myControl.Visible = true;
}
And the same in the control:
protected override void OnResize(EventArgs e)
{
this.Visible = false;
base.OnResize(e);
this.Visible = true;
}
This reduced the amount of repainting to 4, which effectively eliminated any flicker when the control was being resized.

Maybe a good solution for you will be to use Form.ResizeBegin and Form.ResizeEnd events.
On ResizeBegin set main panel visibility to false, on ResizeEnd set main panel visibility to true.
This way panels will not be redrawn while someone is resizing your form.

While hooking into ResizeBegin and ResizeEnd is the right idea, instead of hiding the main panel's visibility I'd instead delay any resize calculations until ResizeEnd. In this case, you don't even need to hook into ResizeBegin or Resize - all the logic goes into ResizeEnd.
I say this for two reasons. One, even though the panel is hidden, the resize operation will likely still be expensive and so the form won't feel as responsive as it should unless the resize calculations are delayed. Two, hiding the pane's contents while resizing can be jarring to the user.

I had the same problem.
It seams that this is happening because you are using rounded corners. When I set CornerRadius property to 0, the flickering was gone.
So far I have only found the following workaround. Not the nicest one, but it stops the flickering.
private void Form_ResizeBegin(object sender, EventArgs e)
{
rectangleShape.CornerRadius = 0;
}
private void Form_ResizeEnd(object sender, EventArgs e)
{
rectangleShape.CornerRadius = 15;
}

I Had A Similar Issue Like This. My Entire Form Was Resizing Slowly And The Controls Painted Them In An Ugly Manner. So This Helped Me:
//I Added This To The Designer File, You Can Still Change The WindowState In Designer View If You Want. This Helped Me Though.
this.WindowState = FormWindowState.Maximized;
And In The Resize Event, Add This Code To The Beginning
this.Refresh();