Replacing ToolTip Text with a GIF - c#

I'm working on redesigning an older application to make it more user-friendly. One addition I would like to make is, when hovering over a specific button, a ~(200, 200) demonstrative GIF appears to the bottom right of the cursor (similar to the functionality of a ToolTip).
I looked into the modification of the ToolTip class, which seems excessive. The above mentioned would be ideal, though I am considering a static imageBox that appears after a hovering for 2 or so seconds.
Could anyone lead me in the right direction?

Take a look at this article, it details out the steps of the image in a tooltip https://www.codeproject.com/Articles/42050/ToolTip-With-Image-C
And this method in particular:
void CustomizedToolTip_Draw(object sender, DrawToolTipEventArgs e)
{
e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
myToolTipRectangle.Size = e.Bounds.Size;
e.Graphics.FillRectangle(myBorderBrush, myToolTipRectangle);
myImageRectangle = Rectangle.Inflate(myToolTipRectangle,
-BORDER_THICKNESS, -BORDER_THICKNESS);
e.Graphics.FillRectangle(myBackColorBrush, myImageRectangle);
Control parent = e.AssociatedControl;
Image toolTipImage = parent.Tag as Image;
if (toolTipImage != null)
{
myImageRectangle.Width = myInternalImageWidth;
myTextRectangle = new Rectangle(myImageRectangle.Right, myImageRectangle.Top,
(myToolTipRectangle.Width - myImageRectangle.Right - BORDER_THICKNESS),
myImageRectangle.Height);
myTextRectangle.Location =
new Point(myImageRectangle.Right, myImageRectangle.Top);
e.Graphics.FillRectangle(myBackColorBrush, myTextRectangle);
e.Graphics.DrawImage(toolTipImage, myImageRectangle);
e.Graphics.DrawString(e.ToolTipText, myFont,
myTextBrush, myTextRectangle, myTextFormat);
}
else
{
e.Graphics.DrawString(e.ToolTipText, myFont,
myTextBrush, myImageRectangle, myTextFormat);
}
}

Related

How to property remove (or keep) the background and contents when exporting PDF to PNG using Magic.NET-Q16-AnyCPU

https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf
First time trying the Magic.NET-Q16-AnyCPU and I encounter an issue that I think I just do know the correct method to use I hope someone could lead me to get this corrected. I have a pdf with some existing texts and tables, plus a redline text added by using a pdf editing software.
Attached picture #1: depends on which software I use to view the png, some software shows black background. I like to have the background can show white or show as transparent (which is preferred) for all software. With page containing the red line text, it shows the red line one correctly but the other contents.
Attached picture #2: If I use settings.UseMonochrome = true; then this is no longer an issue but the resulting image I get is not what I prefer. I may sound stupid but with settings.UseMonochrome = false; my eyes feel better, especially when there are some graphics and tables.
Can I set settings. UseMonochrome = false; and still get all the contents shown correctly? And can I ensure the PNG background is either removed or set as White? Already try the image.BackgroundColor = MagickColors.White; but this does not impact the result.
private void button1_Click(object sender, EventArgs e)
{
var settings = new MagickReadSettings();
settings.Density = new Density(100, 100);
//Do not want to use this
//settings.UseMonochrome = true;
var filename = #"C:\Users\USER1\Desktop\dummy.pdf";
using (var images = new MagickImageCollection())
{
if(System.IO.File.Exists(filename))
{
images.Read(filename, settings);
var page = 1;
foreach (var image in images)
{
image.Write("C:\\Users\\USER1\\Desktop\\dummy.PNG");
page++;
}
}
}
}

RichTextBox not showing the text

I am trying to create a Bitmap from a RichTextBox and set it as the background image for a panel, but unfortunately the text is not shown.
Bitmap l_bitmap = new Bitmap(m_control.Width, m_control.Height);
m_control.DrawToBitmap(l_bitmap, new Rectangle(0, 0, l_bitmap.Width, l_bitmap.Height));
m_panel.BackgroundImage = l_bitmap;
m_panel.Refresh();
m_control is my RichTextBox. When I debug, I can see that the control contains the text I wrote, but the bitmap just shows an empty RichTextBox.
I use the same code for other types of controls (Button, CheckBox, TextBox...). The text is shown with no problems.
Well you are trying to create a bitmap from the control. The text you put in there isn't the control, so it won't bother to chow it as bitmap. Try to create a picture from screen (like a screenshot).
Example:
Graphics gr = Graphics.FromImage(l_bitmap);
gr.CopyFromScreen(m_control.PointToScreen(Point.Empty), point.Empty, m_control.Size);
This will make a bitmap from your given points. This will additional show you the text.
EDIT
Maybe you can use this instead. In addition to your idea, I simply put a label onto my panel. (L for Label and P for Panel)
As you can see, the label is empty because I cleared the Text property. Now, when you click one of the buttons below the panel, it will update the label.Text propertie and there will be the text you gave the control.
Here is some example:
As you can see, the label shows the Name of the control. Completly custom as you can see on my source code:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
public RichTextBox tmpRtf = new RichTextBox();
//Poor button name incoming...
private void button1_Click(object sender, EventArgs e)
{
if (tmpRtf == null)
tmpRtf = new RichTextBox();
//You can add any text here and it will be shown on the label.
this.tmpRtf.Text = "Richtextbox";
this.UpdatePanel(this.tmpRtf);
}
//Custom method to update the panel for any control. Can pobably be done way better than this, but hey.
private void UpdatePanel(object pControl)
{
//Checks if control is a rtf
if(pControl is RichTextBox)
{
//This is your code! Ay.
Bitmap l_bitmap = new Bitmap(this.panel1.Width / 2, this.panel1.Height / 2);
(pControl as RichTextBox).DrawToBitmap(l_bitmap, new Rectangle(0, 0, l_bitmap.Width, l_bitmap.Height));
this.tmpRtf.BackColor = Color.LightGray;
this.panel1.BackgroundImage = l_bitmap;
this.panel1.BackgroundImageLayout = ImageLayout.Center;
this.labelControlName.Text = this.tmpRtf.Text;
this.panel1.Refresh();
}
}
}
Its not possible to show text on a control thats not visualized. But you can build a workaround! Or, instead of taking a picture you can simply create the control on top of it, that will also show the Text and maybe the user can test it (e.g. click on buttons, look at the control behaviour).
Hopefully this is something to get you inspired that there are always more ways to accomplish.

'Nice' options style winforms dialog control

Here and there I've seen nicely styled dialog controls, similar to this one which appears in Beyond Compare v4:
My own implementation of this gets vaguely close, and consists of a listbox on the left and usercontrols which change when the listbox selected item changes. However no amount of putting lipstick on that pig will get it looking like the above. I can picture how I might undertake this with custom painting of things and so forth, but my real intent is to generate the left hand entries at runtime not design time (there will be one for each column in a datafile).
I was wondering if anyone had any ideas on how to reasonably easily implement such a thing, either with a component (commercial is fine) or some other ingenious method.
Thanks!
Here is an example of mimicking your design. I have one large panel1 to house both sides and in it one panel2 to house the left side. Inside panel2 there are the search controls and the listview.
The search controls are a Label1 containing a TextBox and another Label2. The Label.Images are aligned and the Textbox has no Border. The Labels are AutoSize=false and Label1 has a 3D-border.
Panel1 has a singleLine border, panel2 and the ListView have no borders. The ListView has View=Details and one column, HeaderStyle=None. It also has OwnerDraw=true.
I have added a Paint event for the ListView but have to call it in code.
Please note that I haven't taken the time to create nice images. Also note: Their height will determine the Items' Height (!) so leave a little transparent border above and below; their good looks will be key to the overall looks!
They are contained in an Imagelist with appropriate Size and BitDepth. You may need to adapt the DrawIamge numbers..
The stuff on the right side is pretty much standard; for the horizontal bar I use a Panel with height=1 and Border=Single. If you have more than one group of RadioButtons make sure to put each group in a separate Panel, transparent and no Borders, of course..
public Form1()
{
InitializeComponent();
listView1.Width = panel2.ClientSize.Width;
listView1.Columns[0].Width = listView1.ClientSize.Width;
listView1.Paint += listView1_Paint;
listView1.BackColor = panel2.BackColor;
leftBrush = new SolidBrush(panel2.BackColor);
rightBrush = new SolidBrush(panel1.BackColor);
}
Pen borderPen = new Pen(SystemColors.ActiveBorder);
SolidBrush leftBrush, rightBrush;
private void listView1_DrawItem(object sender, DrawListViewItemEventArgs e)
{
if (e.ItemIndex == 0) listView1_Paint(
null, new PaintEventArgs(e.Graphics, listView1.ClientRectangle));
if (!e.Item.Selected)
{
e.Graphics.FillRectangle(leftBrush, e.Bounds);
e.Graphics.DrawLine(borderPen,
listView1.Width-1, e.Bounds.Y, listView1.Width-1, e.Bounds.Bottom);
}
else
{
e.Graphics.FillRectangle(rightBrush , e.Bounds);
e.Graphics.DrawLine(borderPen, 0, e.Bounds.Top, e.Bounds.Width, e.Bounds.Top);
e.Graphics.DrawLine(borderPen,
0, e.Bounds.Bottom-1, e.Bounds.Width, e.Bounds.Bottom-1);
}
e.Graphics.DrawString( e.Item.Text, listView1.Font,
Brushes.Black, 35, e.Bounds.Y + 5 );
e.Graphics.DrawImage(imageList1.Images[e.Item.ImageIndex], 2, e.Bounds.Y );
}
void listView1_Paint(object sender, PaintEventArgs e)
{
int hh = listView1.Items.Count * imageList1.ImageSize.Height;
e.Graphics.DrawLine(borderPen,
listView1.Width - 1, hh, listView1.Width - 1, listView1.Height);
}
private void panel2_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawLine(borderPen, panel2.Width-1, 0, panel2.Width-1, listView1.Top);
}
}
Here is a screenshot of my Q&D version:

Displaying different controls on different button events

I'm not entirely sure this is possible using C# and Windows Forms, but here goes:
I want to split my window into two. On the left is a series of buttons arranged vertically.
On clicking each button, the stuff on the right side has to change. I want different controls displaying for different buttons clicks.
(Kind of like web browser tabs, just on the left pane instead of on top)
I'm guessing I have to use split container, but most of the split container tutorials I've seen have them using the same control on the right, just with different data displaying every time something is clicked.
I hope I'm being clear with what I need. Any help or pointers would be greatly appreciated.
You can get the job done with a TabControl, as explained on MSDN. It shows an example on how to put the tabs on the right side but switching "right" with "left" should provide the behavior you seek.
I tried it in a WinForms app and it seems to work fine, despite the ugly colors used in the example... The following takes ~30 secs to implement.
Quoting from the link:
To display right-aligned tabs
Add a TabControl to your form.
Set the Alignment property to Right. if you set Left it goes on the left no problem
Set the SizeMode property to Fixed, so that all tabs are the same width.
Set the ItemSize property to the preferred fixed size for the tabs. Keep in mind that the ItemSize property behaves as though the tabs were on top, although they are right-aligned. As a result, in order to make the tabs wider, you must change the Height property, and in order to make them taller, you must change the Width property.
Set the DrawMode property to OwnerDrawFixed.
Define a handler for the DrawItem event of TabControl that renders the text from left to right.
And this is the code (converted to C# since MSDN only shows VB):
private void tabControl1_DrawItem(object sender, DrawItemEventArgs e)
{
Graphics g = e.Graphics;
Brush _TextBrush = default(Brush);
// Get the item from the collection.
TabPage _TabPage = tabControl1.TabPages[e.Index];
// Get the real bounds for the tab rectangle.
Rectangle _TabBounds = tabControl1.GetTabRect(e.Index);
if ((e.State == DrawItemState.Selected))
{
// Draw a different background color, and don't paint a focus rectangle.
_TextBrush = new SolidBrush(Color.Red);
g.FillRectangle(Brushes.Gray, e.Bounds);
}
else
{
_TextBrush = new System.Drawing.SolidBrush(e.ForeColor);
e.DrawBackground();
}
// Use our own font.
Font _TabFont = new Font("Arial", 10, FontStyle.Bold, GraphicsUnit.Pixel);
// Draw string. Center the text.
StringFormat _StringFlags = new StringFormat();
_StringFlags.Alignment = StringAlignment.Center;
_StringFlags.LineAlignment = StringAlignment.Center;
g.DrawString(_TabPage.Text, _TabFont, _TextBrush, _TabBounds, new StringFormat(_StringFlags));
}
Just put your content in the TabControl and you're (sorta) good to go.
It is possible and one way is to create new user controls for each of the right-hand interfaces. When you click a button it can load a new instance of one of these controls into the right-hand panel:
if (splitContainer.Panel2.Controls.Count > 0)
{
splitContainer.Panel2.Controls[0].Dispose(); // Edit
splitContainer.Panel2.Controls.Clear();
}
splitContainer.Panel2.Controls.Add(new RightHandControl());
This seems to work when I have tried in the past.
EDIT: As has been pointed out in the comments, this example does not properly dispose of the user controls when cleared! To solve this, call Dispose() prior to clearing the list.
The exact layout and the controls you need will be up to you.This is meant as an simplistic starting point to make you see the options you have(here of course 1 option is provided):
1) add splitcontainer to the form.
2) add flowLayoutPanel to left panel of splitcontainer and dock in parent container
3) since you asked for vertical layout set FlowDirection on the
flowLayoutPanel to topdown
4) in my example i used 6 buttons and named them(instead could be
their text) btncontrol1,2,3...so on, do the same.
5) set all buttons click handler to the same(in this case
buttons_Click)
6) copy this code and paste
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void buttons_Click(object sender, EventArgs e)
{
Button b = sender as Button;
switch (b.Name)
{
//of course after each ClearPanel what i do is only for
//demonstration.
case "btnControl1":
splitContainer1.Panel2.SuspendLayout();
ClearPanel();
splitContainer1.Panel2.Controls.Add(new ListBox());
splitContainer1.Panel2.ResumeLayout();
break;
case "btnControl2":
splitContainer1.Panel2.SuspendLayout();
ClearPanel();
splitContainer1.Panel2.Controls.Add(new RadioButton());
splitContainer1.Panel2.ResumeLayout();
break;
case "btnControl3":
splitContainer1.Panel2.SuspendLayout();
ClearPanel();
splitContainer1.Panel2.Controls.Add(new Button());
splitContainer1.Panel2.ResumeLayout();
break;
case "btnControl4":
splitContainer1.Panel2.SuspendLayout();
ClearPanel();
splitContainer1.Panel2.Controls.Add(new DateTimePicker());
splitContainer1.Panel2.ResumeLayout();
break;
case "btnControl5":
splitContainer1.Panel2.SuspendLayout();
ClearPanel();
splitContainer1.Panel2.Controls.Add(new DataGridView());
splitContainer1.Panel2.ResumeLayout();
break;
case "btnControl6":
splitContainer1.Panel2.SuspendLayout();
ClearPanel();
splitContainer1.Panel2.Controls.Add(new TextBox());
splitContainer1.Panel2.ResumeLayout();
break;
default:
break;
}
}
private void ClearPanel()
{
if (splitContainer1.Panel2.HasChildren)
{
foreach (Control c in splitContainer1.Panel2.Controls)
{
c.Dispose();
}
splitContainer1.Panel2.Controls.Clear();
}
}
}
Hope it help you.

display image on mouseover in windows form?

I am working on a project in c# using windows forms.
me and the group I am in want to make it so that when the user hovers their mouse over an image, in our case a card, that a larger image of that card appears next to the mouse arrow, much in the same way a tool tip would work.
I don't think you can use a tool tip to do this i have tried looking everywhere,
any advice or examples would be great thank you very much
You may want to look at this Code Project Article
It shows you how to create an OwnerDrawn ToolTip with an Image.
Thanks for the responses I got everything figured out.
What I wanted to do was that when I moused over a certain area a different image for that area would popup in the same way that a tool tip did. So after some research I figured out how to create my own tool tip class.
here's an example.
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
CustomToolTip tip = new CustomToolTip();
tip.SetToolTip(button1, "text");
tip.SetToolTip(button2, "writing");
button1.Tag = Properties.Resources.pelican; // pull image from the resources file
button2.Tag = Properties.Resources.pelican2;
}
}
class CustomToolTip : ToolTip
{
public CustomToolTip()
{
this.OwnerDraw = true;
this.Popup += new PopupEventHandler(this.OnPopup);
this.Draw +=new DrawToolTipEventHandler(this.OnDraw);
}
private void OnPopup(object sender, PopupEventArgs e) // use this event to set the size of the tool tip
{
e.ToolTipSize = new Size(600, 1000);
}
private void OnDraw(object sender, DrawToolTipEventArgs e) // use this to customzie the tool tip
{
Graphics g = e.Graphics;
// to set the tag for each button or object
Control parent = e.AssociatedControl;
Image pelican = parent.Tag as Image;
//create your own custom brush to fill the background with the image
TextureBrush b = new TextureBrush(new Bitmap(pelican));// get the image from Tag
g.FillRectangle(b, e.Bounds);
b.Dispose();
}
}
}
A simple way to do is to hide/show a picture box at specified location. Another method is to load & draw (paint) an image using GDI API.

Categories