1

Is it possible to make a custom control with an arrow head so it looks something like this: enter image description here

The only problem I have is creating the arrow head, because the content of the control will be easy to insert.

The closest I have found is this: http://www.componentone.com/SuperProducts/SuperTooltipWinForms/ but I do not wish to use a pre-built control and it's a shareware.

Thanks.

Alex
  • 242
  • 3
  • 5
  • 16

2 Answers2

0

Tooltips are ContentControls, meaning they can take any single object (such as a StackPanel), so yes it is possible.

I would maybe look at adding a triangle Shape and a Grid/StackPanel to a StackPanel with no padding/margin, so the two run together. Inside the inner Grid/StackPanel, put your TextBoxes, TextBlocks, Labels or what have you as per any normal construction job. MS' Tooltip page gives an example with an Image (near the bottom of the page).

Alternatively, you can customise the ToolTip itself using a ControlTemplate

Edit: Just noticed you're in WinForms space. This works for WPF. I'm not sure how much is shared.

mcalex
  • 6,628
  • 5
  • 50
  • 80
  • Can you provide me with any examples or something that I can start with since I have no experience in WPF ? – Alex Feb 18 '13 at 17:22
  • Sorry, missed this. Are you doing a WPF app or are you doing WinForms ? – mcalex Feb 21 '13 at 04:05
  • It's a WinForms but I can switch over to WPF if you can provide me with step by step since I haven't really used it before. – Alex Feb 23 '13 at 13:46
0

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

enter image description here

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:

enter image description here

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

Community
  • 1
  • 1