Once again it seems that I had what I thought was a great idea only to find out that someone else had it before I did.
I don’t even know how I got to thinking about ToolTips and how boring they look, but I did and that got me to wondering what could be accomplished with Windows Presentation Foundation (WPF).
What I eventually ended up with was using a Border which I would create custom messages in and display when the mouse was hovered over the object that the ToolTip was for.
All in all I was fairly pleased with how it all looked and worked though it was kind of fiddly to implement. I wasn’t really sure, however, how to incorporate this tooltip idea into an application I did want to use it.
That was, however, before I found out about the versatility of a WPF tooltip.
In WPF, the tooltip is actually just a container like a panel or grid and pretty much anything that you can put into a container you can now use in a tooltip. This expanded capability leads to endless possibilities for how a tooltip looks and how the user can now interact with it.
We all know how boring tooltips look in a WinForms application.
With just a few lines of code, this plain tooltip can be transformed into something a little more visually exciting.
The tooltip in the next image was formatted with just six lines of code.
The code for this was pretty straight forward.
A gradient was applied to the background of the tooltip. Creating a gradient colour is the same process as creating a gradient for anything in a WPF application. You can have as few as two colours up to a virtually endless number of colours. A gradient is also applied to the border of the tooltip as well.
The thickness of the border was increased so the colouring is more noticeable.
The content is filled with what we wanted to have the tooltip say and added a drop shadow effect to give the tooltip a little bit of a 3D effect.
The last property that is set is the Placement property. The placement property allows you to set where the tooltip is displayed in relation to the control that it is for. Some of the positions that you can place the tooltip are Top, Left, Right and Bottom. You can also set an Absolute or Relative position for the tooltip.
The last thing to do is set the tooltip that has just been defined as the tooltip of the control it is to be displayed for.
In addition to being able to customize the tooptip itself I mentioned earlier that you can place WPF content into the tooltip itself. One drawback to putting WPF content into a tooptip you do still will see the thin border of the tooltip behind the WPF content. I’m sure that there must be a way to get rid of the border, and with Vista it is not as noticeable, I just have not found the way to do it yet.
So with this in mind we will forge ahead with making an even more visual tooltip.
The first component required for creating a tooltip for WPF content would be some sort of container. In this example I am going to start with a StackPanel.
In the stackpanel there is going to be some text and an image so the code is going to start with declarations for the three objects.
Add some formatting to the stackpanel. In this case there are only two changes which are going to be applied to the stackpanel. A LinearGradientBrush is going to be applied to the background and the Orientation of the stackpanel is also set.
For the Image there are just three properties that are going to be set. The source, height and width of the image are defined.
For the textblock the content is set as well as some text formatting and the text is also centered in the textblock.
All that is left now is to add the image and textblock to the stackpanel then apply the stackpanel to be the tooltip of the textbox on the Form.
All this work now gives a much more fancy tooltip, looking like the following image.
So you can see that the boring old tooltip is now a thing of the past.
This post has only scratched the surface of what can be done with a tooltip in a WPF application. I plan on investigating this tool much more to see just what can be done with it.
You will need to keep in mind that you can’t put content into the tooltip that can have user interaction because the tooltip can’t get focus. If you put something like a button in a tooltip, which you can do with WPF, the click would just go through the button and click onto the control on the form.