首页 > 解决方案 > 关于 C# 中带有图像的工具提示的问题

问题描述

所以我正在制作一个带有交互式元素周期表的程序,但我对 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

标签: c#formswinformstooltip

解决方案


我很长时间没有使用 WinForms,所以如果有更好的方法,请提前道歉。正如评论中的答案所暗示的,我们需要为此制作自己的工具提示。

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

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

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");
}

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

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

工具提示结果


推荐阅读