Panoramica sul controllo ToolTip

  • Articolo

Una descrizione comando è una piccola finestra popup visualizzata quando un utente sospende il puntatore del mouse su un elemento, ad esempio su un oggetto Button. L'argomento introduce la descrizione comando e illustra come creare e personalizzare il relativo contenuto.

Che cos'è una descrizione comando

Quando si sposta il puntatore del mouse su un elemento per cui esiste una descrizione comando, viene visualizzata una finestra con contenuto relativo all'elemento (ad esempio, testo che descrive la funzione di un controllo) per un periodo di tempo specificato. Se si sposta il puntatore del mouse all'esterno del controllo, la finestra scompare perché il contenuto della descrizione comando non può ricevere lo stato attivo.

Il contenuto di una descrizione comando può essere costituito da una o più righe di testo, immagini, forme o altro contenuto visivo. Per definire una descrizione comando per un controllo, impostare una delle proprietà seguenti sul contenuto della descrizione comando.

La proprietà utilizzata dipende dal fatto che il controllo che definisce la descrizione comando eredita dalla FrameworkContentElement classe o FrameworkElement .

Creazione di una descrizione comando

Nell'esempio seguente viene illustrato come creare una descrizione comando semplice impostando la ToolTip proprietà per un Button controllo su una stringa di testo.

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

È anche possibile definire una descrizione comando come ToolTip oggetto . L'esempio seguente usa XAML per specificare un ToolTip oggetto come descrizione comando di un TextBox elemento. Si noti che l'esempio specifica l'oggetto ToolTip impostando la FrameworkElement.ToolTip proprietà .

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

Nell'esempio seguente viene utilizzato il codice per generare un ToolTip oggetto . L'esempio crea un oggetto ToolTip (tt) e lo associa a un oggetto 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)

È anche possibile creare contenuto della descrizione comando non definito come ToolTip oggetto racchiudendo il contenuto della descrizione comando in un elemento di layout, ad esempio .DockPanel Nell'esempio seguente viene illustrato come impostare la ToolTip proprietà di un TextBox oggetto su contenuto racchiuso in un DockPanel controllo .

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

Uso delle proprietà delle classi ToolTip e ToolTipService

È possibile personalizzare il contenuto della descrizione comando impostando proprietà visive e applicando stili. Se si definisce il contenuto della descrizione comando come ToolTip oggetto , è possibile impostare le proprietà visive dell'oggetto ToolTip . In caso contrario, è necessario impostare proprietà associate equivalenti nella ToolTipService classe .

Per un esempio di come impostare le proprietà per specificare la posizione del contenuto della descrizione comando usando le ToolTip proprietà e ToolTipService , vedere Posizionare una descrizione comando.

Applicazione di stili a una descrizione comando

È possibile applicare uno stile a ToolTip definendo un oggetto personalizzato Style. Nell'esempio seguente viene definito un oggetto denominato Simple che illustra come eseguire l'offset della posizione di ToolTip e modificarne l'aspetto Backgroundimpostando , ForegroundFontSize, e FontWeight.Style

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

Uso delle proprietà di ToolTipService relative all'intervallo di tempo

La ToolTipService classe fornisce le proprietà seguenti per impostare i tempi di visualizzazione delle descrizioni comando: InitialShowDelay, BetweenShowDelaye ShowDuration.

Utilizzare le InitialShowDelay proprietà e ShowDuration per specificare un ritardo, in genere breve, prima che venga visualizzato un ToolTip oggetto e anche per specificare per quanto tempo un ToolTip oggetto rimane visibile. Per altre informazioni, vedere Procedura: ritardare la visualizzazione di un oggetto ToolTip.

La BetweenShowDelay proprietà determina se le descrizioni comando per controlli diversi vengono visualizzate senza un ritardo iniziale quando si sposta rapidamente il puntatore del mouse tra di essi. Per altre informazioni sulla BetweenShowDelay proprietà, vedere Utilizzare la proprietà BetweenShowDelay.

L'esempio seguente mostra come impostare queste proprietà per una descrizione comando.

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

Vedi anche