Vue d’ensemble de l’info-bulle

  • Article

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élément. Cette rubrique présente l’info-bulle et explique comment créer et personnaliser son contenu.

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

Lorsqu’un utilisateur déplace le pointeur de la souris sur un élément qui contient une info-bulle, une fenêtre qui renferme le contenu de l’info-bulle (par exemple, le contenu texte qui décrit la fonction d’un contrôle) apparaît pendant un laps de temps spécifié. 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.

Une info-bulle peut contenir une ou plusieurs lignes de texte, des images, des formes ou un autre contenu visuel. Pour définir une info-bulle pour un contrôle, vous devez définir l’une des propriétés suivantes pour le contenu de l’info-bulle.

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

Création d’une info-bulle

L’exemple suivant montre comment créer une info-bulle simple en définissant la ToolTip propriété d’un Button contrôle sur 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 ToolTip objet comme info-bulle d’un TextBox élément. 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 contenu placé entre un DockPanel 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 de l’info-bulle et des classes 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’info-bulle 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 à l’aide des propriétés et des ToolTip propriétés, consultez Position d’une info-bulle.ToolTipService

Application d’un style à une info-bulle

Vous pouvez mettre en forme un ToolTip style en définissant un fichier personnalisé Style. 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 et ShowDuration les InitialShowDelay propriétés pour spécifier un délai, généralement bref, avant un ToolTip affichage et également pour spécifier la durée pendant laquelle un ToolTip reste visible. Pour plus d’informations, consultez la page Comment : différer 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