关于 C# 中带有图像的工具提示的问题

Posted 2023-04-11

【中文标题】关于 C# 中带有图像的工具提示的问题

【英文标题】：Question about toolTips with an Image in C#

【发布时间】：2021-06-22 00:45:58

【问题描述】：

所以我正在制作一个带有交互式元素周期表的程序，但我对 programmin 非常陌生，尤其是在 C# 中，我希望在每个元素上都有一个工具提示，以显示其图片和一些细节。但我不知道如何用图像制作工具提示。我需要鼠标进入和鼠标离开事件的代码。顺便说一句，所有元素都是按钮。 这是我的代码

    private void Element_H_Click(object sender, EventArgs e)
    

    

    private void Element_H_MouseEnter(object sender, EventArgs e)
    

    

    private void toolTip1_Popup(object sender, PopupEventArgs e)
    

    

    private void toolTip1_Draw(object sender, DrawToolTipEventArgs e)
    
        
    

class CustomToolTip : ToolTip // This code i copied from someone online but i dont even know where to paste it or how to use it//

    public CustomToolTip()
    
        this.OwnerDraw = true;
        this.Popup += new PopupEventHandler(this.OnPopup);
        this.Draw += new DrawToolTipEventHandler(this.OnDraw);
    

    private void OnPopup(object sender, PopupEventArgs e)
    
        e.ToolTipSize = new Size(200, 100);
    

    private void OnDraw(object sender, DrawToolTipEventArgs e)
    
       
    

这就是悬停的样子 [1]：https://i.stack.imgur.com/RKguS.png

【问题讨论】：

这能回答你的问题吗？ How to create a custom ToolTip with an image?

这是我在发布问题之前正在阅读的内容，但我不明白我需要将代码粘贴到哪里我告诉过你我是新手

Yersss，我不确定使用工具提示是否真的会给您带来很多好处

对，答案是在控件Paint 中绘制图像的通用代码。有关工具提示，请参阅example on msdn。原则上使用e.Graphics.DrawImage() 是相同的代码。不要只是粘贴代码，要经常研究你被告知的每一个新事物。

ToolTip With Image C#.

【参考方案1】：

我很久没有使用 WinForms，如果有更好的方法，请提前道歉。正如 cmets 中的答案所暗示的那样，我们需要为此制作自己的 ToolTip。

我已经这样做了，这是一个非常快速的敲门，您可以计算出数学以使事情正确排列，添加更多信息并更改颜色字体等。

我建议你把它放在它自己的文件中。 （右键单击解决方案资源管理器中的项目文件，然后转到“添加”->“类”

public 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)
    
        e.ToolTipSize = new Size(200, 100);
    

    private void OnDraw(object sender, DrawToolTipEventArgs e)
    
        Graphics g = e.Graphics;

        LinearGradientBrush b = new LinearGradientBrush(e.Bounds, Color.DarkGray, Color.LightGray, 45f);
        g.FillRectangle(b, e.Bounds);

        //Now we need to get the element information..
        var element = PeriodicTableHelper.Elements.Where(_ => _.Symbol == e.ToolTipText).First();

        var img = Image.FromFile(element.ImagePath);
        g.DrawImage(img, 2, 2, 32, e.Bounds.Height - 4);

        //Name
        g.DrawString("Name: ", new Font(e.Font, FontStyle.Bold), Brushes.White, new PointF(e.Bounds.X + 38, e.Bounds.Y + 2));
        g.DrawString(element.Name, new Font(e.Font, FontStyle.Regular), Brushes.White, new PointF(e.Bounds.X + 80, e.Bounds.Y + 2));

        //Melting point
        g.DrawString("Melting Point: ", new Font(e.Font, FontStyle.Bold), Brushes.White, new PointF(e.Bounds.X + 38, e.Bounds.Y + 20));
        g.DrawString(element.MeltingPoint.ToString(), new Font(e.Font, FontStyle.Regular), Brushes.White, new PointF(e.Bounds.X + 120, e.Bounds.Y + 20));

        //Atomic number
        g.DrawString("Atomic Number: ", new Font(e.Font, FontStyle.Bold), Brushes.White, new PointF(e.Bounds.X + 38, e.Bounds.Y + 40));
        g.DrawString(element.AtomicNumber.ToString(), new Font(e.Font, FontStyle.Regular), Brushes.White, new PointF(e.Bounds.X + 140, e.Bounds.Y + 40));

        b.Dispose();
    

这依赖于一个名为 PeriodicTableHelper 的类，它基本上是所有可能元素的集合，我假设您已经拥有类似的东西，但这是我的非常基本的版本。再说一次，我会把它放在它自己的文件中。

public class PeriodicTableElement

    public string Symbol  get; set; 
    public int AtomicNumber  get; set; 
    public string Name  get; set; 
    public decimal MeltingPoint  get; set; 
    public string ImagePath  get; set; 


public static class PeriodicTableHelper

    public static List<PeriodicTableElement> Elements  get; 
    static PeriodicTableHelper()
    
        //Load up the elements however you want to do this. Maybe deserialse a JSON file?
        //Also you wouldn't have hardcoded file paths like this obviously!
        //You could use a Bitmap type instead and have the image in the project resources
        Elements = new List<PeriodicTableElement>();

        Elements.Add(new PeriodicTableElement
        
            Symbol = "Mg",
            AtomicNumber = 12,
            Name = "Magnesium",
            MeltingPoint = 923,
            ImagePath = @"D:\Downloads\magnesium.png"
        );

        Elements.Add(new PeriodicTableElement
        
            Symbol = "Ca",
            AtomicNumber = 20,
            Name = "Calcium",
            MeltingPoint = 1115,
            ImagePath = @"D:\Downloads\calcium.png"
        );
    

现在我们需要将按钮连接到这个类。我已经这样做了。这在表单代码中。

private CustomToolTip _toolTip; 

public Form1()

    InitializeComponent();
    _toolTip = new CustomToolTip();
    SetupToolTip();


private void SetupToolTip()

    _toolTip.SetToolTip(btnMagnesium, "Mg");
    _toolTip.SetToolTip(btnCalcium, "Ca");

希望这可以为您提供一个起点。任何问题/问题在下面留下评论。 :)

结果看起来像这样。忽略图片，我从我的下载文件夹中随机选择一张哈。

【讨论】：

嗯，如果我能理解任何东西就好了你的代码我的代码看起来像这样imgur.com/NmvLaDd

技术上没有正确或错误的地方放置这些。我已经更新了答案。我会将 CustomToolTip 和 PeriodicTableHelper 放在您的项目中的单独文件中。

好的，所以我决定不使用它，因为有很多我不理解的错误，但我使用了你代码的第一部分并删除了 HelperThingy，我不会使用你代码的最后一部分这就是我在表单类中的内容顺便说一句我写的代码在悬停时不会激活所以 IDK 问题是什么我尝试使用 toolTip1.Show 只显示框和下面写的文本但它不起作用我必须指定一些东西like ("Some words here", button_name) imgur.com/Zjs1ldN 这就是我的元素周期表的样子：imgur.com/wU88qgS

另外，我为每个具有名称熔点原子序数的元素制作了一张特定的图片，上面有一些文字等，所以我不需要一个特定的代码，我只需要它来显示图片字面上只显示一个像 500x400 像素的图片，所以我认为代码应该像 3 4lines