Partager via

Vue d’ensemble de l’info-bulle

  • Article

Une info-bulle est une petite fenêtre contextuelle qui s’affiche lorsqu’un utilisateur interrompt 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 inclure une ou plusieurs lignes de texte, des images, des formes ou tout autre contenu visuel. 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 de si 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 info-bulle simple en définissant la propriété ToolTip pour un contrôle Button en utilisant 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 la 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 une 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 propriété ToolTip d’un TextBox sur le contenu placé 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 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 d'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 classe ToolTipService.

Pour un exemple de la manière de définir des propriétés pour spécifier la position du contenu d'une info-bulle à l'aide des propriétés ToolTip et ToolTipService, consultez Position d'une info-bulle.

Styliser une info-bulle

Vous pouvez appliquer un style à un ToolTip en définissant une Stylepersonnalisée. L’exemple suivant définit une Style appelée Simple qui montre comment décaler le positionnement du ToolTip et modifier son apparence en définissant le Background, Foreground, FontSizeet 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 fournit les propriétés suivantes pour définir les temps 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 brièvement, avant qu’un ToolTip apparaisse et 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 propriété BetweenShowDelay 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 propriété BetweenShowDelay, 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