c# - 创建带有箭头的自定义工具提示

Question

是否可以使用箭头制作自定义控件，使其看起来像这样：

我唯一的问题是创建箭头，因为控件的内容很容易插入。

我发现的最接近的是：http: //www.componentone.com/SuperProducts/SuperTooltipWinForms/但我不希望使用预构建的控件，它是一个共享软件。

谢谢。

Answer 1

工具提示是ContentControls，这意味着它们可以采用任何单个对象（例如 a StackPanel），所以是的，这是可能的。

我可能会考虑在没有填充/边距的情况下将三角形Shape和Grid/添加到 StackPanel，因此两者一起运行。StackPanel在内部 Grid/StackPanel 内，按照任何正常的施工工作，放置您的TextBoxes、TextBlocks、 s 或您拥有的东西。LabelMS 的工具提示页面提供了一个带有图像的示例（靠近页面底部）。

或者，您可以使用ControlTemplate自定义工具提示本身

编辑：刚刚注意到你在 WinForms 空间。这适用于 WPF。我不确定共享了多少。

Answer 2

The easiest way I found that works is using a rectangle with a triangle image brush. That's the easy part. There's still two issues I'm figuring out myself, and those are:

1. Positioning the arrowhead so that it is directly below target object. This can partially be remedied by using a solution I found here: How to position tooltip bottom center. It does not, however, move the arrowhead, but the ToolTip itself. You can horizontally align the arrow in center, but if the ToolTip doesn't have enough room to be centered, the arrow will not appear directly under the target object.
2. Getting the arrowhead to appear above ToolTip box when placement is down and below when placement is up. E.g., in order to accommodate free space, the ToolTip may appear above the target instead of below it. You can use triggers to control which row the element is in, assuming the ToolTip layout is a grid and those are the only placement positions you wish to support.

I haven't tested adding a drop shadow yet, but if yours doesn't show, you could try adding a margin to the ToolTip parent border (doesn't matter because it will never conflict with anything).

For a rectangle with an image brush, you can refer to an article I wrote on CodeProject (it's very simple).

http://www.codeproject.com/Articles/1103396/Image-Controls-Using-Dynamic-Colors

The ToolTip in this example is getting cut off because it's at the very edge of the window. The ToolTip target should be the plus icon, but it's placement is being pushed to the right. Ideally, we want a way to move just the arrowhead back so that it's directly underneath. I have edited the example picture to show the ideal result:

As a side note, if your arrowhead requires a border, you can swap the rectangle out with a path object. You'd just have to know which path to draw :p