Tooltip

Een tooltip is een klein pop-upvenster dat wordt weergegeven wanneer een gebruiker de muisaanwijzer boven een element houdt, zoals boven een Button. 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 venster omdat de inhoud van de tooltip de focus van de cursor niet kan krijgen.

In de volgende afbeelding ziet u een muisaanwijzer die wijst naar de knop SluitenButton, waarin de identificatie ToolTipwordt weergegeven.

Sluitknop met de tooltip weergegeven

Een tooltip die wordt getoond bij het aanwijzen van een besturingselement selectievakje in WPF.

De inhoud van een tooltip kan uit één of meerdere regels tekst, afbeeldingen, vormen of andere visuele elementen bestaan. 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 tooltip definieert, erft van de FrameworkContentElement of FrameworkElement klasse.

ToolTip aanmaken

In het volgende voorbeeld ziet u hoe u een eenvoudige tooltips maakt door de ToolTip eigenschap voor een Button controle in te stellen naar 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 het ToolTip opgegeven door de FrameworkElement.ToolTip eigenschap 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 te zetten, zoals een DockPanel. In het volgende voorbeeld wordt uitgelegd hoe u de ToolTip-eigenschap van een TextBox kunt instellen 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>

Tooltip aanpassen

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 voor de ToolTipService klasse instellen.

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

Eigenschappen van tijdsinterval

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

Gebruik de InitialShowDelay en ShowDuration eigenschappen om een vertraging op te geven, meestal kort, voordat een ToolTip wordt weergegeven en om op te geven hoe lang een ToolTip zichtbaar blijft. Zie Hoe: De weergave van knopinfo vertragen voor meer informatie.

De BetweenShowDelay eigenschap bepaalt of de knopinfo voor verschillende bedieningselementen zonder initiële vertraging wordt weergegeven wanneer u de muisaanwijzer ertussen beweegt. Zie BetweenShowDelay voor meer informatie over de eigenschap.

In het volgende voorbeeld zie je hoe je 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>

Stijlen en sjablonen

U kunt de standaardinstelling ControlTemplate wijzigen om het ToolTip besturingselement een uniek uiterlijk te geven. Zie Wat zijn stijlen en sjablonen voor meer informatie en hoe u een sjabloon voor een besturingselement maakt.

Stijl een ToolTip

U kunt een ToolTip opmaken door een aangepaste Style te definiëren. In het volgende voorbeeld wordt een Style met de naam Simple gedefinieerd die laat zien hoe u de plaatsing van de ToolTip en de weergave ervan kunt aanpassen door de Background, Foreground, FontSize en FontWeight in 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>

Inhoudseigenschap

De ContentControl.Content eigenschap is de inhoudseigenschap van het ToolTip besturingselement. U kunt deze eigenschap rechtstreeks in XAML instellen zonder expliciet de naam van de eigenschap op te geven.

Onderdelen

Dit besturingselement definieert geen sjabloononderdelen.

Visuele statussen

De volgende tabel bevat de visuele statussen voor het ToolTip besturingselement.

VisualState-naam VisualStateGroup-naam Description
Closed OpenStates De tooltip is gesloten en niet zichtbaar.
Openen OpenStates De tooltip is geopend en zichtbaar.
Geldig Validatiestatussen Het besturingselement is geldig en heeft geen validatiefouten.
Ongeldige focus Validatiestatussen Het besturingselement heeft een validatiefout en heeft de focus op het toetsenbord.
Ongeldige ongeconcentreerdheid Validatiestatussen Het besturingselement heeft een validatiefout maar heeft geen toetsenbordfocus.

Zie ook

  • Last updated on