Vue d'ensemble de l'info-bulle
Une info-bulle est une petite fenêtre indépendante qui apparaît lorsqu'un utilisateur place le pointeur de la souris sur un élément, tel qu'un Button. Cette rubrique présente l'info-bulle et explique comment créer et personnaliser son contenu.
Cette rubrique comprend les sections suivantes.
- Qu'est-ce qu'une info-bulle ?
- Création d'une info-bulle
- Utilisation des propriétés de l'info-bulle et des classes ToolTipService
- Application d'un style à une info-bulle
- Utilisation des propriétés d'intervalle de temps de ToolTipService
- Rubriques connexes
Qu'est-ce qu'une info-bulle ?
Lorsqu'un utilisateur déplace le pointeur de la souris sur un élément doté d'une info-bulle, une fenêtre comprenant le contenu de l'info-bulle (par exemple, contenu de texte qui décrit la fonction d'un contrôle) apparaît pendant une période spécifiée. Si l'utilisateur éloigne le pointeur de la souris du contrôle, la fenêtre disparaît car le contenu de l'info-bulle ne peut pas recevoir le focus.
Le contenu d'une info-bulle peut contenir une ou plusieurs lignes de texte, images, formes ou autre contenu visuel. Vous définissez une info-bulle pour un contrôle en affectant à l'une des propriétés suivantes le contenu de l'info-bulle.
La propriété que vous utilisez varie selon que le contrôle qui définit l'info-bulle hérite de la classe FrameworkContentElement ou FrameworkElement.
Création d'une info-bulle
L'exemple suivant montre comment créer une info-bulle simple en affectant une chaîne de texte à la propriété ToolTip pour un contrôle Button.
<Button ToolTip="Click to submit your information"
Click="SubmitCode" Height="20" Width="50">Submit</Button>
Vous pouvez également définir une info-bulle comme un objet ToolTip. L'exemple suivant utilise XAML pour spécifier un objet ToolTip comme info-bulle d'un élément TextBox. Notez que l'exemple spécifie le ToolTip en définissant la propriété FrameworkElement.ToolTip.
<TextBox HorizontalAlignment="Left">ToolTip with non-text content
<TextBox.ToolTip>
<ToolTip>
<DockPanel Width="50" Height="70">
<Image Source="data\flower.jpg"/>
<TextBlock>Useful information goes here.</TextBlock>
</DockPanel>
</ToolTip>
</TextBox.ToolTip>
</TextBox>
L'exemple suivant utilise du code pour générer un objet ToolTip. L'exemple crée un ToolTip (tt) et l'associe à un Button.
button = New Button()
button.Content = "Hover over me."
tt = New ToolTip()
tt.Content = "Created with Visual Basic"
button.ToolTip = tt
cv2.Children.Add(button)
button = new Button();
button.Content = "Hover over me.";
tt = new ToolTip();
tt.Content = "Created with C#";
button.ToolTip = tt;
cv2.Children.Add(button);
Vous pouvez également créer un contenu d'info-bulle qui n'est pas défini comme un objet ToolTip en englobant le contenu d'info-bulle dans un élément de disposition, tel qu'un DockPanel. L'exemple suivant montre comment affecter à la propriété ToolTip d'un TextBox le contenu qui est englobé dans un contrôle DockPanel.
<TextBox>
ToolTip with image and text
<TextBox.ToolTip>
<StackPanel>
<Image Source="data\flower.jpg"/>
<TextBlock>Useful information goes here.</TextBlock>
</StackPanel>
</TextBox.ToolTip>
Utilisation des propriétés de l'info-bulle et des classes ToolTipService
Vous pouvez personnaliser le contenu d'info-bulle en définissant des propriétés visuelles et en appliquant des styles. Si vous définissez le contenu d'info-bulle comme un objet ToolTip, vous pouvez définir les propriétés visuelles de l'objet ToolTip. Dans le cas contraire, vous devez définir des propriétés attachées équivalentes sur la classe ToolTipService.
Pour obtenir un exemple de définition des propriétés pour spécifier la position du contenu d'info-bulle à l'aide des propriétés ToolTip et ToolTipService, consultez Comment : positionner une info-bulle.
Application d'un style à une info-bulle
Vous pouvez appliquer un style à un ToolTip en définissant un Style personnalisé. L'exemple suivant définit un Style appelé Simple qui indique comment décaler le positionnement du ToolTip et modifier son apparence en définissant Background, Foreground, FontSize et FontWeight.
<Style TargetType="ToolTip">
<Setter Property = "HorizontalOffset" Value="10"/>
<Setter Property = "VerticalOffset" Value="10"/>
<Setter Property = "Background" Value="LightBlue"/>
<Setter Property = "Foreground" Value="Purple"/>
<Setter Property = "FontSize" Value="14"/>
<Setter Property = "FontWeight" Value="Bold"/>
</Style>
Utilisation des propriétés d'intervalle de temps de ToolTipService
La classe ToolTipService vous fournit les propriétés suivantes afin de définir des temps d'affichage d'info-bulle : InitialShowDelay, BetweenShowDelay et ShowDuration.
Utilisez les propriétés InitialShowDelay et ShowDuration pour spécifier un délai, généralement bref, avant qu'un ToolTip apparaisse et également pour spécifier combien de temps un ToolTip reste visible. Pour plus d'informations, consultez Comment : différer l'affichage d'une info-bulle.
La propriété BetweenShowDelay détermine si les info-bulles des différents contrôles apparaissent sans délai initial lorsque vous déplacez rapidement le pointeur de la souris entre eux. Pour plus d'informations sur la propriété BetweenShowDelay, consultez Comment : utiliser la propriété BetweenShowDelay.
L'exemple suivant montre comment définir ces propriétés pour une info-bulle.
<Ellipse Height="25" Width="50"
Fill="Gray"
HorizontalAlignment="Left"
ToolTipService.InitialShowDelay="1000"
ToolTipService.ShowDuration="7000"
ToolTipService.BetweenShowDelay="2000">
<Ellipse.ToolTip>
<ToolTip Placement="Right"
PlacementRectangle="50,0,0,0"
HorizontalOffset="10"
VerticalOffset="20"
HasDropShadow="false"
Opened="whenToolTipOpens"
Closed="whenToolTipCloses"
>
<BulletDecorator>
<BulletDecorator.Bullet>
<Ellipse Height="10" Width="20" Fill="Blue"/>
</BulletDecorator.Bullet>
<TextBlock>Uses the ToolTip Class</TextBlock>
</BulletDecorator>
</ToolTip>
</Ellipse.ToolTip>
</Ellipse>