Delen via

Overzicht van tooltips

Een tooltip is een klein pop-upvenster dat wordt weergegeven wanneer een gebruiker de muisaanwijzer boven een element houdt, zoals boven een Button. In dit onderwerp worden de knopinfo geïntroduceerd en wordt besproken hoe u knopinfo-inhoud maakt en aanpast.

Wat is knopinfo?

Wanneer een gebruiker de muisaanwijzer over een element met knopinfo beweegt, wordt een venster met knopinfo-inhoud (bijvoorbeeld tekstinhoud waarin de functie van een besturingselement wordt beschreven) gedurende een opgegeven tijd weergegeven. Als de gebruiker de muisaanwijzer van het bedieningselement verplaatst, verdwijnt het pop-upvenster omdat de inhoud van het opmerkingvak de focus niet kan krijgen.

De inhoud van een tooltip kan een of meer regels tekst, afbeeldingen, vormen of andere visuele inhoud bevatten. U definieert knopinfo voor een besturingselement door een van de volgende eigenschappen in te stellen op de inhoud van de knopinfo.

Welke eigenschap u gebruikt, is afhankelijk van of het besturingselement dat de knopinfo definieert, afkomstig is van de FrameworkContentElement- of FrameworkElement-klasse.

Tooltip maken

In het volgende voorbeeld ziet u hoe u een eenvoudige hulpmiddelentip maakt door de eigenschap ToolTip voor een Button-element in te stellen op een tekstreeks.

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

U kunt ook een tooltip definiëren als een ToolTip-object. In het volgende voorbeeld wordt XAML gebruikt om een ToolTip-object op te geven als knopinfo van een TextBox-element. In het voorbeeld wordt ToolTip gespecificeerd door de eigenschap FrameworkElement.ToolTip in te stellen.

<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>

In het volgende voorbeeld wordt code gebruikt om een ToolTip-object te genereren. In het voorbeeld wordt een ToolTip (tt) gemaakt en gekoppeld aan een 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)

U kunt ook knopinfo-inhoud maken die niet is gedefinieerd als een ToolTip-object door de inhoud van de knopinfo in een indelingselement, zoals een DockPanel, in te sluiten. In het volgende voorbeeld ziet u hoe u de eigenschap ToolTip van een TextBox instelt op inhoud die is ingesloten in een DockPanel besturingselement.

<TextBox>
  ToolTip with image and text
  <TextBox.ToolTip>
       <StackPanel>
        <Image Source="data\flower.jpg"/>
        <TextBlock>Useful information goes here.</TextBlock>
      </StackPanel>
  </TextBox.ToolTip>

De eigenschappen van de klassen ToolTip en ToolTipService gebruiken

U kunt knopinfo-inhoud aanpassen door visuele eigenschappen in te stellen en stijlen toe te passen. Als u de inhoud van de knopinfo definieert als een ToolTip-object, kunt u de visuele eigenschappen van het ToolTip-object instellen. Anders moet u gelijkwaardige gekoppelde eigenschappen instellen op de ToolTipService-klasse.

Zie ToolTipvoor een voorbeeld van het instellen van eigenschappen om de positie van knopinfo-inhoud op te geven met behulp van de eigenschappen ToolTipService en .

Een tooltip stylen

U kunt een ToolTip stijl geven door een aangepaste Stylete definiëren. In het volgende voorbeeld wordt een Style met de naam Simple gedefinieerd die laat zien hoe de plaatsing van de ToolTip wordt verschoven en het uiterlijk ervan wijzigt door de Background, Foreground, FontSizeen FontWeightin te stellen.

<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>

De eigenschappen van het tijdsinterval van ToolTipService gebruiken

De ToolTipService-klasse bevat de volgende eigenschappen waarmee u weergavetijden voor knopinfo kunt instellen: InitialShowDelay, BetweenShowDelayen ShowDuration.

Gebruik de eigenschappen InitialShowDelay en ShowDuration om een vertraging op te geven, meestal kort voordat een ToolTip wordt weergegeven en om op te geven hoe lang een ToolTip zichtbaar blijft. Voor meer informatie, zie Hoe: het weergeven van een tooltip vertragen.

De eigenschap BetweenShowDelay bepaalt of tooltips voor verschillende besturingselementen direct zonder enige initiële vertraging worden weergegeven wanneer u de muisaanwijzer snel hiertussen beweegt. Voor meer informatie over de eigenschap BetweenShowDelay, zie Gebruik de eigenschap BetweenShowDelay.

Het volgende voorbeeld laat zien hoe u deze eigenschappen instelt voor een tooltip.

<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>

Zie ook

  • Last updated on