Partager via

Vue d’ensemble de l’info-bulle

Une info-bulle est une petite fenêtre contextuelle qui s’affiche lorsqu’un utilisateur suspend le pointeur de la souris sur un élément, par exemple sur un Button. Cette rubrique présente l’info-bulle et explique comment créer et personnaliser le contenu de l’info-bulle.

Qu’est-ce qu’une info-bulle ?

Lorsqu’un utilisateur déplace le pointeur de la souris sur un élément qui a une info-bulle, une fenêtre qui contient du contenu d’info-bulle (par exemple, du contenu texte qui décrit la fonction d’un contrôle) apparaît pendant une durée spécifiée. Si l’utilisateur déplace le pointeur de la souris loin 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, des images, des formes ou d’autres contenus visuels. Vous définissez une info-bulle pour un contrôle en définissant l’une des propriétés suivantes sur le contenu de l’info-bulle.

La propriété que vous utilisez dépend du fait que le contrôle qui définit l’info-bulle hérite de la classe FrameworkContentElement ou de la classe FrameworkElement.

Création d’une info-bulle

L'exemple suivant montre comment créer une simple info-bulle en définissant la propriété ToolTip d'un contrôle Button comme une chaîne de texte.

<Button ToolTip="Click to submit your information" 
        Click="SubmitCode" Height="20" Width="50">Submit</Button>

Vous pouvez également définir une info-bulle en tant qu’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 paramètre en définissant la FrameworkElement.ToolTip propriété.

<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 ToolTip objet. 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 C#";
button.ToolTip = tt;
cv2.Children.Add(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)

Vous pouvez également créer du contenu d’info-bulle qui n’est pas défini en tant qu’objet ToolTip en plaçant le contenu d’info-bulle dans un élément de disposition, tel qu’un DockPanel. L’exemple suivant montre comment définir la ToolTip propriété d’un TextBox pour un contenu dans un DockPanel élément de contrôle.

<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 des classes ToolTip et ToolTipService

Vous pouvez personnaliser le contenu de l’info-bulle en définissant des propriétés visuelles et en appliquant des styles. Si vous définissez le contenu de l'infobulle en tant qu'objet ToolTip, vous pouvez définir les propriétés visuelles de l'objet ToolTip. Sinon, vous devez définir des propriétés jointes équivalentes sur la ToolTipService classe.

Pour obtenir un exemple de définition des propriétés afin de spécifier la position du contenu d’info-bulle en utilisant les propriétés ToolTip et ToolTipService, consultez Positionner une info-bulle.

Styliser une info-bulle

Vous pouvez styliser un ToolTip en définissant un Style personnalisé. L’exemple suivant définit un Style appelé Simple qui montre comment décaler le positionnement de l’élément ToolTip et modifier son apparence en définissant le Background, , ForegroundFontSizeet 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 ToolTipService classe fournit les propriétés suivantes pour vous permettre de définir les heures d’affichage de l’info-bulle : InitialShowDelay, BetweenShowDelayet 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 la durée pendant laquelle un ToolTip reste visible. Pour plus d’informations, consultez Guide pratique pour retarder l’affichage d’une info-bulle.

La BetweenShowDelay propriété détermine si les info-bulles pour différents contrôles s’affichent sans délai initial lorsque vous déplacez rapidement le pointeur de la souris entre eux. Pour plus d’informations sur la BetweenShowDelay propriété, consultez 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>

Voir aussi