We Keep Coding

How to prevent flickering in WinForms when quickly updating a value?

I have a simple Winforms GUI which has a TrackBar in a GroupBox its title I'm using to display the value of the contained TrackBar:
private void trackBar1_Scroll(object sender, EventArgs e)
{
UpdateTrackBarPositionText();
}
private void Form1_Load(object sender, EventArgs e)
{
UpdateTrackBarPositionText();
}
private void UpdateTrackBarPositionText()
{
groupBox1.Text = ORIGINAL_TRACKBAR_TEXT + qualitySelector.Value.ToString();
}
The problem is that when scrubbing over the bar, both it and the label of the group are flickering, especially when scrubbing quickly. Also CPU usage is fairly high for such a simple action. How can I improve this implementation? I want to update the value in real time, not just after letting go, so that the users sees the value while selecting it. DoubleBuffered = true; does nothing.
EDIT:
I used reflection at instantiation to set the GroupBox and the bar to double buffered. That helped with the Box, but the slider still flickers :(

Do you have Double Buffering set. If not start there and then other methods as needed.

This is a classical use case for a timer. Make it update the label at, say, 10 times per second. Any more than that is really an overkill because nobody can read it that fast anyway.
You can have the timer permanently enabled, or (as an optimization) you can enable it at trackBar1_Scroll and disable it in the timer itself, if the value hasn't changed for the past few ticks. In fact, if the value hasn't changed since the last update, don't update the label either (might save some extra flickering).

This does not address this question, but it creates a workaround with a custom control that does the same thing.
public partial class SliderControl : Control
{
public event EventHandler ValueChanged;
public int MinValue { get; set; }
public int MaxValue { get; set; }
public int Value { get; set; }
public SliderControl()
{
InitializeComponent();
SetStyle(ControlStyles.AllPaintingInWmPaint|ControlStyles.OptimizedDoubleBuffer, true);
this.MinValue=0;
this.MaxValue=100;
this.Value=50;
this.Text="Value";
}
protected override void OnResize(EventArgs e)
{
base.OnResize(e);
SetBoundsCore(Left, Top, Width, 32, BoundsSpecified.Height);
}
protected override void OnPaint(PaintEventArgs pe)
{
base.OnPaint(pe);
pe.Graphics.DrawRectangle(Pens.Black, 0, 0, Width-1, Height-16);
using (var gp = new GraphicsPath())
{
var rect = new Rectangle(0, 0, Value*(Width-1)/MaxValue-1, Height-16);
gp.AddRectangle(rect);
using (var br = new LinearGradientBrush(rect, Color.SteelBlue, Color.LightBlue, LinearGradientMode.Horizontal))
{
pe.Graphics.FillPath(br, gp);
pe.Graphics.DrawPath(Pens.DarkBlue, gp);
}
}
var text = $"{this.Text} = {this.Value}";
var sz = pe.Graphics.MeasureString(text, SystemFonts.SmallCaptionFont);
pe.Graphics.DrawString(text, SystemFonts.SmallCaptionFont, Brushes.Black, Width/2-sz.Width/2, Height-16);
}
private void SetClickValue(Point click_point)
{
int x = (click_point.X+1)*MaxValue/Width;
this.Value=x;
this.Refresh();
this.ValueChanged?.Invoke(this, new EventArgs());
}
protected override void OnMouseClick(MouseEventArgs e)
{
base.OnMouseClick(e);
if (e.Button==MouseButtons.Left)
{
SetClickValue(e.Location);
}
}
protected override void OnMouseMove(MouseEventArgs e)
{
base.OnMouseMove(e);
if (e.Button==MouseButtons.Left)
{
SetClickValue(e.Location);
}
}
}

Panel background image flickering

I've a Panel which fills the parent Form.
And I used a Timer to capture screen ,
and set the screenshot as background image of Panel periodically.
However, it runs into crazy flickering. What can I do to solve it?
//Part of code
public partial class Form1 : Form
{
DxScreenCapture sc = new DxScreenCapture();
public Form1()
{
InitializeComponent();
panelMain.BackgroundImageLayout = ImageLayout.Zoom;
}
private void Form1_Load(object sender, EventArgs e)
{
}
void RefreshScreen()
{
Surface s = sc.CaptureScreen();
DataStream ds = Surface.ToStream(s, ImageFileFormat.Bmp);
panelMain.BackgroundImage = Image.FromStream(ds);
s.Dispose();
}
private void timer1_Tick(object sender, EventArgs e)
{
RefreshScreen();
}
}

Try using a double buffered panel. Inherit panel, set DoubleBuffered to true and use that panel instead of default panel:
namespace XXX
{
/// <summary>
/// A panel which redraws its surface using a secondary buffer to reduce or prevent flicker.
/// </summary>
public class PanelDoubleBuffered : System.Windows.Forms.Panel
{
public PanelDoubleBuffered()
: base()
{
this.DoubleBuffered = true;
}
}
}
EDIT
Additionally I want to encourage you to take care a little more about the resources you use. Whenever an object implements the IDisposable interface - dispose the object when not needed any more. This is very important when dealing with unmanaged resources, such as streams!
void RefreshScreen()
{
using (Surface s = sc.CaptureScreen())
{
using (DataStream ds = Surface.ToStream(s, ImageFileFormat.Bmp))
{
Image oldBgImage = panelMain.BackgroundImage;
panelMain.BackgroundImage = Image.FromStream(ds);
if (oldBgImage != null)
oldBgImage.Dispose();
}
}
}

There is actually an easier solution in Visual Studio that requires no code!
If you go to Solution Explorer and then double click on your form (Form1) there will be a list that pops up (If it does not pop up you just have to right click on your form and go to Properties and double click again). Then, go to DoubleBuffered and change it to True.

I found the answer by myself from other site. It sets some ControlStyles on the panel like the following code. And no flickering any more.
class SomePanel : Panel
{
public SomePanel()
{
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
this.SetStyle(ControlStyles.UserPaint, true);
}
}

This is worked for me , Try this
protected override CreateParams CreateParams
{
get
{
CreateParams handleParms = base.CreateParams;
handleParms.ExStyle |= 0x02000000;
return handleParms;
}
}

ToolTip.Show for an inactive window doesn't works

Why tooltip, displayed manually with ToolTip.Show, is not shown, when window, containing control, is inactive?
public class MyControl : Button
{
private _tip;
public string ToolTip
{
get { return _tip; }
set { _tip = value; }
}
private ToolTip _toolTip = new ToolTip();
public MyControl()
{
_toolTip.UseAnimation = false;
_toolTip.UseFading = false;
_toolTip.ShowAlways = true;
}
protected override void OnMouseHover(EventArgs e)
{
_toolTip.Show(_tip, this, 0, Height);
base.OnMouseHover(e);
}
protected override void OnMouseLeave(EventArgs e)
{
_toolTip.Hide(this);
base.OnMouseLeave(e);
}
}
I went for ToolTip.Show because I must have tooltip onscreen for unlimited time, which is not possible with normal ToolTip. I also love the idea of having tooltip text as a part of control itself. But unfortunately, when showing tooltip this way for inactive window (despite ShowAlways = true), it simply doesn't work.
The OnMouseHower event is rised, but _toolTip.Show does nothing.. unless window is activated, then everything works.
Bounty
Adding bounty for a solution to display tooltip for an inactive form (preferably with solution when tooltip text is a property of control, not IContainer).

There is a private method that does what you want, so to access it, you would have to use reflection to call it:
using System.Reflection;
public class MyControl : Button {
private ToolTip toolTip = new ToolTip() {
UseAnimation = false,
UseFading = false
};
public string ToolTip { get; set; }
protected override void OnMouseHover(EventArgs e) {
base.OnMouseHover(e);
Point mouse = MousePosition;
mouse.Offset(10, 10);
MethodInfo m = toolTip.GetType().GetMethod("SetTool",
BindingFlags.Instance | BindingFlags.NonPublic);
m.Invoke(toolTip, new object[] { this, this.ToolTip, 2, mouse });
}
protected override void OnMouseLeave(EventArgs e) {
base.OnMouseLeave(e);
toolTip.Hide(this);
}
}
The tip will display on an inactive window and it will stay on the screen indefinitely until the mouse moves off the control.

toolStrip to have menuStrip gradient background

I have a form with a menu and a toolstrip at the top. The menuStrip has a nice looking gradient background, how can I get the same effect on the toolStrip control? I know about the RenderMode property but changing this doesn't have the desired result.

You can achieve this with a custom renderer.
public class CustomToolStripRenderer : ToolStripProfessionalRenderer
{
public CustomToolStripRenderer() { }
protected override void OnRenderToolStripBackground(ToolStripRenderEventArgs e)
{
//you may want to change this based on the toolstrip's dock or layout style
LinearGradientMode mode = LinearGradientMode.Horizontal;
using (LinearGradientBrush b = new LinearGradientBrush(e.AffectedBounds, ColorTable.MenuStripGradientBegin, ColorTable.MenuStripGradientEnd, mode))
{
e.Graphics.FillRectangle(b, e.AffectedBounds);
}
}
}
Then set your toolstrip to use an instance of this renderer.
public Form1()
{
InitializeComponent();
CustomToolStripRenderer r = new CustomToolStripRenderer();
r.RoundedEdges = false;
toolStrip1.Renderer = r;
}

Adding controls to a custom form

I created a custom form (FormBorderStyle = FormBorderStyle.None).
I draw my own caption bar at the top with my own custom caption buttons (Close, Maximize ...).
Now my only problem is adding normal user controls to that form. If I give these controls a location, the locations are relative to the form's top (including the caption bar).
I override the default ClientSize & ClientRectangle using the 'new' keyword, which allows me to adjust it (thus removing the caption bar out of it).
This does not seem to work and I haven't been able to figure out how to do this properly without 'hacking' the ControlAdded event (which is still buggy).
protected override void OnControlAdded(ControlEventArgs e)
{
base.OnControlAdded(e);
if (e.Control.GetType() != typeof(VlufiCaptionButton /* Caption buttons: close, minimize & maximize, should not be included */))
{
e.Control.Location = new Point(e.Control.Location.X + ClientRectangle.X, e.Control.Location.Y + ClientRectangle.Y);
e.Control.LocationChanged += Control_LocationChanged;
}
}
private void Control_LocationChanged(object sender, EventArgs e)
{
if (!childControlLocationChangedHandled)
{
System.Diagnostics.Debug.WriteLine("changing");
Control cControl = (Control)sender;
childControlLocationChangedHandled = true;
cControl.Location = new Point(cControl.Location.X + ClientRectangle.X, cControl.Location.Y + ClientRectangle.Y);
}
else
childControlLocationChangedHandled = false;
}
This is the code I currently use, but it's superbuggy & I'm still having other problems with my customly drawn border.
Does anybody know how I should correctly handle this ?
I found a decent solution: I added a ContainerControl to the form & I position & size this according to the form, then whenever adding a control to the form, it should be added to the ContainerControl. Still not a proper solution, but it's the best one so far.
I'd still appreciate if someone came up with another solution.

read comments for detail:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
namespace WindowsApplication1
{
public partial class Form1 : Form
{
int dy = 0;
public Form1()
{
InitializeComponent();
//i add a panel to top form
//( for simulating your caption bar) and get its height
dy = panel1.Height; //for yours its your caption bar height
}
private void button1_Click(object sender, EventArgs e)
{
//adding button control between form top and panel end area
//( simulate in your caption bar )
Button btn = new Button();
btn.Location = new Point(panel1.Location.X+40,panel1.Location.Y+10);
btn.Text = "Salam";
this.Controls.Add(btn);
}
//in control added event i add dy ( height of ignored area) to control Location
private void Form1_ControlAdded(object sender, ControlEventArgs e)
{
e.Control.Location = new Point(e.Control.Location.X, e.Control.Location.Y + dy);
}
private void button2_Click(object sender, EventArgs e)
{
this.Close();
}
}
}

Ok after all, I have finally found a working and pretty nice solution.
What I did is override the Controls property of my custom Form, using my own custom ControlCollection.
So this is what I got in my custom form:
public Control.ControlCollection RealControls
{
get
{
return base.Controls;
}
}
public new CustomControlCollection Controls { get; private set; }
public ContainerControl ControlContainer { get; set; }
And this is the custom ControlCollection:
public class CustomControlCollection
{
public VlufiForm Owner { get; private set; }
public CustomControlCollection (VlufiForm pOwner)
{
Owner = pOwner;
}
public void Add(Control c)
{
Add(c, false);
}
public int Count
{
get
{
return Owner.ControlContainer.Controls.Count;
}
}
public Control this[int index]
{
get
{
return Owner.ControlContainer.Controls[index];
}
}
public void Add(Control c, bool isUsable)
{
if (isUsable)
Owner.RealControls.Add(c);
else
Owner.ControlContainer.Controls.Add(c);
}
public void SetChildIndex(Control c, int nIndex)
{
Owner.ControlContainer.Controls.SetChildIndex(c, nIndex);
}
}
This is just an example custom control collection, you could add more methods in it (thus kind of inheriting ControlCollection more).
I haven't found any bugs in this system yet, it works perfectly at the moment.
EDIT: found a bug, if you dock a control in Visual Studio's Designer Mode, it will dock in the whole form, this doesn't appear when running though.