Customized ToolTips
If you want to supply more ambitious tooltip content, such as a combination of nested elements, you need to break the ToolTipService.ToolTip property out into a separate element. Here's an example that sets the ToolTip property of a button using more complex nested content:
<Button Content="I have a fancy tooltip"> <ToolTipService.ToolTip> <StackPanel>
<TextBlock Margin="3" Text="Image and text"></TextBlock> <Image Source="happyface.jpg"x/Image> <TextBlock Margin="3" Text="Image and text"></TextBlock> </StackPanel> </ToolTipService.ToolTip> </Button>
As in the previous example, Silverlight implicitly creates a ToolTip element. The difference is that in this case the ToolTip object contains a StackPanel rather than a simple string. Figure 5-9 shows the result.
- Figure 5-9. A fancy tooltip
Note Don't put user-interactive controls in a tooltip because the ToolTip page can't accept focus. For example, if you place a button in a ToolTip, the button will appear, but it isn't clickable. (If you attempt to click it, your mouse click will just pass through to the page underneath.) If you want a tooltip-like page that can hold other controls, consider using the Popup control instead, which is discussed shortly, in the section named "The Popup."
At this point, you might be wondering if you can customize other aspects of the tooltip's appearance, such as the standard gray background. You can get a bit more control by explicitly defining the ToolTip element when setting the ToolTipService.ToolTip property. Because the ToolTip is a content control, it provides a number of useful properties. You can adjust size and alignment properties (like Width, Height, MaxWidth, HoriztontalContentAlignment, Padding, and so on), font (FontFamily, FontSize, FontStyle, and so on), and color (Background and Foreground). You can also use the HorizontalOffset and VerticalOffset properties to nudge the tooltip away from the mouse pointer and into the position you want, with negative or positive values.
Using the ToolTip properties, the following markup creates a tooltip that uses a red background and makes the text inside white by default:
<Button Content="I have a fancy tooltip"> <Button.ToolTip>
<ToolTip Background="DarkRed" Foreground="White">
<StackPanel>
<TextBlock Margin="3" Text="Image and text"></TextBlock> <Image Source="happyface.jpg"></Image> <TextBlock Margin="3" Text="Image and text"></TextBlock> </StackPanel>
</ToolTip> </Button.ToolTip> </Button>
If you assign a name to your tooltip, you can also interact with it programmatically. For example, you can use the IsEnabled property to temporarily disable a ToolTip and IsOpen to programmatically show or hide a tooltip (or just check whether the tooltip is open). You can also handle its Opened and Closed events, which is useful if you want to generate the content for a tooltip dynamically, just as it opens.
Tip If you still want more control over the appearance of a tooltip—for example, you want to remove the black border or change its shape—you simply need to substitute a new control template with the visuals you prefer. Chapter 11 has the details.
Average user rating: 5 stars out of 1 votes
Post a comment