We Keep Coding

How to increase ToolTip Rectangle size

I am currently implementing a tooltip which has at least two sentences worth inside of it, so I need to somehow create a large rectangle which would hold it.
My issue is the height of the rectangle.
Snip:
As you can see the green rectangle does not have the required size.
Code:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace Discounting.Module
{
public partial class Benefits : UserControl
{
public Benefits()
{
InitializeComponent();
}
private void ToolTip1_Draw(object sender, DrawToolTipEventArgs e)
{
var newEventArgs = new DrawToolTipEventArgs(
e.Graphics,
e.AssociatedWindow,
e.AssociatedControl,
e.Bounds, e.ToolTipText,
this.BackColor,
this.ForeColor,
Font);
DrawToolTip(e);
}
private void DrawToolTip(DrawToolTipEventArgs e)
{
using (var sf = new StringFormat())
{
sf.LineAlignment = StringAlignment.Center;
sf.Alignment = StringAlignment.Center;
using (var graphics = e.Graphics)
{
var linearGradientBrush = new LinearGradientBrush(new Rectangle(e.Bounds.X, e.Bounds.Y,
8000, 1000), Color.GreenYellow, Color.MintCream, 45f);
graphics.FillRectangle(linearGradientBrush, linearGradientBrush.Rectangle);
graphics.DrawString(e.ToolTipText, new Font("Aerial",12.0f, FontStyle.Bold), Brushes.Silver,
new PointF(linearGradientBrush.Rectangle.X + 6, linearGradientBrush.Rectangle.Y + 6)); // shadow layer
graphics.DrawString(e.ToolTipText, new Font("Aerial",12.0f, FontStyle.Bold), Brushes.Black,
new PointF(linearGradientBrush.Rectangle.X + 5, linearGradientBrush.Rectangle.Y + 5)); // top layer
linearGradientBrush.Dispose();
}
}
}
private void ToolTip2_Draw(object sender, DrawToolTipEventArgs e)
{
DrawToolTip(e);
}
private void ToolTip3_Draw(object sender, DrawToolTipEventArgs e)
{
DrawToolTip(e);
}
private void ToolTip4_Draw(object sender, DrawToolTipEventArgs e)
{
DrawToolTip(e);
}
}
}
If you require further details I would be happy to provide them.

Well, since there might be some quirks when mixing TextRenderer and the Graphics object, here's an example:
The ToolTip.PopUp event provides means to set the Size of the ToolTip rectangle. You just need to measure the Text and set its PopupEventArgs.ToolTipSize property to the measured Size.
This allows to use multi-line strings as well, using Environment.NewLine to separate the lines.
The PopupEventArgs object doesn't provide a Graphics object that can be use to measure the Text. We can use TextRenderer.MeasureText instead.
TextRenderer.MeasureText is very precise: it will give back the exact measure of the Text. Since you are using Graphics.DrawString to draw the Text, we better be generous and add some more space to the measured Width, to avoid text wrapping and also because the Text looks better if the container rectangle is not too tight.
In the Popup event, after measuring the Text, I'm adding 5 pixels to both the Width and Height (Size.Add([Measured Size], new Size(5, 5))). Modify as required
Note:
Here, the Font family and Size are hard-coded. Of course you may want to use a more dynamic Font object, possibly linked to a property of your UserControl. The Font can be changed at any time: the PopUp event will use it to measure the test bounds.
TextFormatFlags toolTipFlags = TextFormatFlags.VerticalCenter |
TextFormatFlags.LeftAndRightPadding | TextFormatFlags.HorizontalCenter | TextFormatFlags.NoClipping;
Font toolTipFont = new Font("Arial", 12.0f, FontStyle.Bold);
private void toolTip1_Popup(object sender, PopupEventArgs e)
{
string toolTipText = (sender as ToolTip).GetToolTip(e.AssociatedControl);
using (var g = e.AssociatedControl.CreateGraphics()) {
var textSize = Size.Add(TextRenderer.MeasureText(
g, toolTipText, toolTipFont, Size.Empty, flags), new Size(10, 5));
e.ToolTipSize = textSize;
}
}
private void toolTip1_Draw(object sender, DrawToolTipEventArgs e) => DrawToolTip(e);
private void DrawToolTip(DrawToolTipEventArgs e)
{
using (var linearGradientBrush = new LinearGradientBrush(e.Bounds, Color.GreenYellow, Color.MintCream, 45f)) {
e.Graphics.FillRectangle(linearGradientBrush, e.Bounds);
}
var shadowBounds = new Rectangle(new Point(e.Bounds.X + 1, e.Bounds.Y + 1), e.Bounds.Size);
TextRenderer.DrawText(e.Graphics, e.ToolTipText, toolTipFont, shadowBounds, Color.LightGray, toolTipFlags);
TextRenderer.DrawText(e.Graphics, e.ToolTipText, toolTipFont, e.Bounds, Color.Black, toolTipFlags);
}

Issue with transparent images with a transparent background

I'm having a problem with displaying transparent images with a transparent background. The transparent background takes the color of the underlying control and that is fine ... bu the problem is that some details (lines) on the underlying background are being covered the the images as can be seen in the image below.
Here is the code I am using.... This is the code for the notes....
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Media;
using System.Drawing;
namespace Simpe_Piano_new
{
class MusicNote: PictureBox
{
public SoundPlayer sp = new SoundPlayer();
Timer tmr = new Timer();
public int pitch; //The no. of the music key (e.g. the sound freuency).
public int noteDuration; //Shape of note.
public string noteShape;
public MusicNote(int iPitch, int iNoteDuration)
: base()
{
pitch = iPitch;
noteDuration = iNoteDuration;
Size = new Size(40, 40);
}
public void ShowNote()
{ if (this.noteDuration == 1) noteShape = "Quaver.png";
if (this.noteDuration == 4) noteShape = "Crotchet.png";
if (this.noteDuration == 7) noteShape = "minim.png";
if (this.noteDuration == 10) noteShape = "DotMin.png";
if (this.noteDuration == 12) noteShape = "SemiBreve.png";
this.BackgroundImage = Image.FromFile(noteShape);
this.BackColor = Color.Transparent;
Location = new Point((pitch * 40) - 40, 100);
}
protected override void OnPaint(PaintEventArgs pe)
{
base.OnPaint(pe);
}
public void PlaySound()
{
sp.SoundLocation = this.pitch + ".wav";
sp.Play();
}
public void StopSound()
{
sp.SoundLocation = this.pitch + ".wav";
sp.Stop();
}
public void Play()
{
sp.SoundLocation = this.pitch + ".wav";
sp.Play();
//Time to play the duration
tmr.Interval = noteDuration;
tmr.Start();
tmr.Tick += new System.EventHandler(ClockTick);
}
void ClockTick(object sender, EventArgs e)
{
sp.Stop();
tmr.Stop();
}
}
}
This is the code for the underlying control..the music staff
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Windows.Forms;
namespace Simpe_Piano_new
{
public class MusicStaff: Panel
{
Pen myPen;
Graphics g;
public MusicStaff()
{
this.Size = new Size(1000, 150);
this.Location = new Point(0, 0);
this.BackColor = Color.Transparent;
this.Paint += new PaintEventHandler(DrawLines);
}
private void DrawLines(object sender, PaintEventArgs pea)
{
myPen = new Pen(Color.Black, 1);
g = this.CreateGraphics();
for (int i = 1; i < 6; i++)
{
g.DrawLine(myPen, 0, (this.Height / 6) * i, this.Width, (this.Height / 6) * i);
}
}
}
}
I have found that C# does not handle transparency really well...
Any help would be greatly appreciated..

add the top control "MusicNote" in the children of the underlying control "MusicStaff"
something like that after -Initializing all components-
// mStaff: the MusicStaff object
// mNote: the MusicNote object
mStaff.Children.Add(mNote);
in old scenario, the form is the parent of both of them, so they display the form background in any transparent area
after modifying the parent of the "MusicNote", it displays the "MusicStaff" background in the transparent area
I hope that help!

Two mistakes. PictureBox supports transparent images well, as long as you set its BackColor property to Color.Transparent. Which you did for the MusicStaff but not for the MusicNote. Layered transparency does not work, you don't need MusicStaff to be transparent, just the picture boxes.
This kind of transparency is simulated by asking the Parent to paint itself into the control to provide the background pixels. Which is your second mistake, you use CreateGraphics() in your DrawLines() method. Which draws directly to the screen, not the control surface. You must use pea.Graphics here.
Do note that the value-add you get from using PictureBox is a very low one. Controls are expensive and you'll easily burn up hundreds of them to display a sheet of music. You'll notice, it will become slow to paint itself. You avoid this by having MusicStaff just paint the notes itself, using Graphics.DrawImage() gets the job done. Transparency effects are now much simpler as well, just layers of paint. Which is the way WPF does it. The only inconvenience you'll have to deal with is that mouse hit testing isn't as simple anymore, you need to map the panel's MouseDown event's coordinates to a note. Just keep a List that keeps track where every note is displayed. You'll use that for painting as well as mouse hit testing.

Why when resizing the user control graph it's not really resized?

I have a user control chart in my Form1 designer and this is the code to resize it:
private void graphChart1_MouseEnter(object sender, EventArgs e)
{
graphChart1.Size = new Size(600, 600);
}
When I move the mouse to the control area it's not resizing it make it bigger but deleting some other controls.
This is an image before I move the mouse over the control:
And this is an image when I moved the mouse over the control:
This is the code of the user control where the chart is:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Drawing;
using System.Data;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Web;
using System.Windows.Forms.DataVisualization.Charting;
namespace GatherLinks
{
public partial class GraphChart : UserControl
{
public GraphChart()
{
InitializeComponent();
}
private double f(int i)
{
var f1 = 59894 - (8128 * i) + (262 * i * i) - (1.6 * i * i * i);
return f1;
}
private void GraphChart_Load(object sender, EventArgs e)
{
chart1.Series.Clear();
var series1 = new System.Windows.Forms.DataVisualization.Charting.Series
{
Name = "Series1",
Color = System.Drawing.Color.Green,
IsVisibleInLegend = false,
IsXValueIndexed = true,
ChartType = SeriesChartType.Line
};
this.chart1.Series.Add(series1);
for (int i = 0; i < 100; i++)
{
series1.Points.AddXY(i, f(i));
}
chart1.Invalidate();
}
}
}
EDIT:
I did this in the user control class code:
public void ChangeChartSize(int width, int height)
{
chart1.Size = new Size(width, height);
chart1.Invalidate();
}
I had to add chart1.Invalidate(); to make it to take effect but then it sized the chart it self inside the user control. The user control was not changed.
So in the Form1 mouse enter I also changing the graphChart1 the control size:
private void graphChart1_MouseEnter(object sender, EventArgs e)
{
graphChart1.ChangeChartSize(600, 600);
graphChart1.Size = new Size(600, 600);
}
The problem is that now it's taking a lot of time almost 20 seconds or so until it take effect when I'm moving the mouse over the control. If I will remove the second line:
graphChart1.Size = new Size(600, 600);
it will work fast but then it will change the chart only inside the control but it won't change the control size.
Tried also with invalidate:
private void graphChart1_MouseEnter(object sender, EventArgs e)
{
graphChart1.ChangeChartSize(600, 600);
graphChart1.Size = new Size(600, 600);
graphChart1.Invalidate();
}
But still very slow. Maybe I need to change the control it self size also in the user control class code and not in Form1 ?

The problem is that you are resizing the GraphicChart (your user control) but not the Chart itself. You could add the method in your GraphChart class in order to do that. This is the method that will change the chart size:
public void ChangeChartSize(int width, int height)
{
chart1.Size = new Size(width, height);
}
And in your mouse enter event handler you could call something like this:
void graphicChart1_MouseEnter(object sender, EventArgs e)
{
graphChart1.ChangeChartSize(600, 600);
}

With graphChart1.Size = you are resizing your container but not the chart within it.
The easiest work-around is probably to make chart1 public in the control and do graphChart1.chart1.Size = instead.

In the user control class code I did:
public void ChangeChartSize(int width, int height)
{
this.Size = new Size(width, height);
chart1.Size = new Size(width, height);
chart1.Invalidate();
}
In Form1 I did:
private void graphChart1_MouseEnter(object sender, EventArgs e)
{
graphChart1.ChangeChartSize(600, 600);
}
Working smooth.

Draw an object and update it's position on a panel without flickering

I want to avoid the flickering, and I also don't want to use a timer. Is there a method for when the form updates or when the graphics get refreshed that I can use instead of a timer?
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
namespace test
{
public partial class Form1 : Form
{
SolidBrush sb = new SolidBrush(Color.White);
Pen p = new Pen(Color.LightGray, 3);
Graphics g;
int xpos;
int ypos;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
g = panel1.CreateGraphics();
this.DoubleBuffered = true;
}
void Draw(string Shape, int x, int y)
{
panel1.Invalidate();
switch (Shape)
{
case "Circle":
g.FillEllipse(sb, x, y, 20, 20);
g.DrawEllipse(p, x, y, 20, 20);
break;
}
}
private void tmrAnimaion_Tick(object sender, EventArgs e)
{
xpos += 2;
Draw("Circle", xpos, ypos);
if (xpos >= 700)
{
xpos = 0;
ypos += 20;
}
}
}
}

Could you just draw in Paint or OnPaint()?
C# WinForms - Paint method questions
Best practice for custom control painting in Winforms?
WinForms paint cycle documentation?

How to make tooltip move with mouse (winforms)

I want it to move when the mouse moves, and disappear when the pointer isn't over the label.
This doesn't work:
private void lblRevisionQuestion_MouseMove(object sender, MouseEventArgs e)
{
toolTip1.Show("test", this, PointToClient(MousePosition), Int32.MaxValue);
}
private void lblRevisionQuestion_MouseLeave(object sender, EventArgs e)
{
toolTip1.Hide(this);
}
As soon as the tooltip appears, it steals focus away from the form, evoking MouseLeave. Then the tooltip hides, and the pointer is once again over the label, invoking MouseMove. This results in a choppy, flashing tooltip.
Is there any way to do this?

toolTip1.Show(_toolTipText, this, new Point(lblRevisionQuestion.Left + e.X + 1, lblRevisionQuestion.Top + e.Y + 1), int.MaxValue);
Oddly enough, when I tried displaying it to some arbitrary coordinates eariler, it had the same problem as above. I don't know why this works and that didn't.

Since your are working with a list view, I would like to bring to your notice that the listview items have some tooltip specific properties like ToolTipText. This will make it easier to display the data when you hover over a item as shown below
toolTip1.ToolTipTitle = string.Format("Item: {0}",e.Item.Text);
toolTip1.Show(e.Item.ToolTipText,listView1);
toolTip1.ShowAlways = true;

This is how I did:
MyToolTip.cs :
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
public class MyToolTip : ToolTip
{
public MyToolTip()
{
OwnerDraw = true;
Draw += MyToolTip_Draw;
}
private void MyToolTip_Draw(object sender, DrawToolTipEventArgs e)
{
using (StringFormat sf = new StringFormat())
{
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;
sf.HotkeyPrefix = System.Drawing.Text.HotkeyPrefix.None;
sf.FormatFlags = StringFormatFlags.NoWrap;
using (Font f = new Font("Arial", 7.5F))
{
SizeF s = new SizeF();
s = e.Graphics.MeasureString(e.ToolTipText, f);
e.Graphics.FillRectangle(new SolidBrush(Color.FromArgb(225, 225, 245)), e.Bounds);
e.DrawBorder();
e.Graphics.DrawString(e.ToolTipText, f, SystemBrushes.ActiveCaptionText, e.Bounds, sf);
}
}
}
}
Using it somewhere in a class:
private MyToolTip ttp;
private int LastX;
private int LastY;
public string Caption { get; set; }
private void MyObjectWhichNeedsMovingToolTip_MouseLeave(object sender, EventArgs e)
{
ttp.Hide(this);
}
private void MyObjectWhichNeedsMovingToolTip_MouseMove(object sender, MouseEventArgs e)
{
// This is for stop flickering tooltip
if (e.X != this.lastX || e.Y != this.lastY)
{
// depending on parent of the object you must add or substract Left and Top information in next line
ttp.Show(Caption, this, new Point(MyObjectWhichNeedsMovingToolTip.Left + e.X + 10, MyObjectWhichNeedsMovingToolTip.Top + e.Y + 20), int.MaxValue);
this.lastX = e.X;
this.lastY = e.Y;
}
}
And the result is: