This video looks at a feature of tooltips that supports alternate UI. This is possible because the tooltip is a content element, which can contain a tree of WPF elements. This means that instead of showing the simple text based tooltip, you can add images and other WPF elements.
- [Instructor] One of my favorite features of tooltips is their support for alternate UI. This is possible because the tooltip is a content element, which can contain a tree of WPF elements. This means that instead of showing the simple text based tooltip, you can add images and other WPF elements. This example, let's start by looking at this add button. In the previous demo, I added a tooltip like this, I said, tooltip = and then I used a string here. What happens, really, when you do this string here, in the tooltip property, WPF creates an instance of the tooltip class, puts a text block on there and then puts the word grapes inside that text block.
If you want to do a more complex UI, you can't do it here. Instead, you need to go and use this syntax, which is called, the property element syntax. So, here I'm saying, this is the tooptip property on the button, using the tooltip service. Then, I'm instantiating an instance of the tooltip class, here. Which is the floating window that you're going to see in a minute. I set some properties on that. The background and the foreground and it's placement. And then inside the beginning and ending tooltip tags, I start defining my alternate UI.
So, here I define the stack panel. Then, I set the stack panel background to an image brush. And then put two text blocks on the stack panel. That's a much more interesting looking tooltip. It still functions as a tooltip. It's based on the location of the mouse when I hover over it long enough, it disappears. When I leave the button, it disappears. Another critical thing to understand is that if you put any interactive controls on the tooltip, like a text box or a button, the user will not be able to interact with them.
This is a floating window that doesn't notice the mouse input or keyboard input. So, it's just a way of showing a floating window when you mouse over something. For the second example, this is some code that I had to use a few years ago when we wanted to have a message balloon pop up like this and we wanted it to be transparent. Now, because I'm using the tooltip class, that's that rectangular window that you see here, I had to figure out how to make the background of the tooltip transparent.
And then I also wanted to be able to see through this image. So, I had to use the opacity level. This time, I'm using the tooltip service again and I'm creating the tooltip and inside the tooltip, I've got this text block that's got my custom message. You put whatever text you want here. Remember you can change that, of course, using code. And then, rather than define everything inside this tooltip, I put them in a style in the resource dictionary. So there's a style called, tooltip style.
Up here. So you see, it applies to tooltips. And here I have a property of setting the background of the tooltip class to transparent. Setting is border value, here. Setting is, padding, here. And then, I'm specifying what's called a control template. That's the alternate UI. And then here's the image. And what I loaded is picture, where is that? It's over here in images. Chat. This is what the picture looks like. And this green area is transparent.
So, I have a transparent background on the tooltip control and then this PNG file also has transparent background, here. And then, in order to see through this part, which is not transparent, I set the opacity level. So go back over to page you see that I set the opacity level to the image to 50%. And then, the content control. This is a way to get, let's go back an review what I have down here. Remember that inside the tooltip, is this text block.
There's a text block in there but there can be all sorts of other UI in there. And I need a way of placing that in my template. Let's go back up here. So, that's what this is doing. So I'm saying, I have this grid that's got the image and then I've got a content control and the content for this content control is coming from a binding. Meaning, go find the information down there in the actual button. Use that UI and draw it here at this location. This is very interesting and makes for some useful and different tooltips.
By making tooltips a content control, Microsoft provides the UI designer with unlimited ways to design a tooltip.
- Interactions and controls
- UIElement family
- FrameworkElement family
- Shape family
- Decorator Family
- Control Fundamentals
- Button family
- Text Editor family