ToolTip 概述

工具提示是用户将鼠标指针暂停在元素上(例如暂停在 Button 上)时出现的小型弹出窗口。 本主题介绍工具提示并讨论如何创建和自定义工具提示内容。

本主题包括下列各节。

  • 什么是工具提示?
  • 创建工具提示
  • 使用 ToolTip 和 ToolTipService 类的属性
  • 设置 ToolTip 的样式
  • 使用 ToolTipService 的时间间隔属性
  • 相关主题

什么是工具提示?

当用户将鼠标指针移到具有工具提示的元素上时,包含工具提示内容(如描述控件功能的文本内容)的窗口将会出现,该窗口在经过指定的时间后将会消失。 如果用户从控件中移走鼠标指针,则该窗口将会消失,因为工具提示内容无法接收焦点。

工具提示的内容可以包含一个或多个文本行、图像、图形或其他可视内容。 通过将以下属性之一设置为工具提示内容,您可以为控件定义工具提示。

所使用的属性取决于用于定义工具提示的控件是继承自 FrameworkContentElement 类还是继承自 FrameworkElement 类。

创建工具提示

下面的示例演示如何通过将 Button 控件的 ToolTip 属性设置为文本字符串来创建一个简单的工具提示。

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

您也可以将工具提示定义为 ToolTip 对象。 下面的示例使用 XAML 将 ToolTip 对象指定为 TextBox 元素的工具提示。 请注意,该示例通过设置 FrameworkElement.ToolTip 属性来指定 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>

下面的示例使用代码来生成 ToolTip 对象。 此示例创建一个 ToolTip (tt) 并将它与 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)
button = new Button();
button.Content = "Hover over me.";
tt = new ToolTip();
tt.Content = "Created with C#";
button.ToolTip = tt;
cv2.Children.Add(button);

通过将工具提示内容包括在布局元素(如 DockPanel)中,您也可以创建未定义为 ToolTip 对象的工具提示内容。 下面的示例演示如何将 TextBoxToolTip 属性设置为 DockPanel 控件中所包含的内容。

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

使用 ToolTip 和 ToolTipService 类的属性

您可以通过设置可视属性并应用样式来自定义工具提示内容。 如果将工具提示内容定义为 ToolTip 对象,则可以设置 ToolTip 对象的可视属性。 否则,必须在 ToolTipService 类上设置等效的附加属性。

关于如何设置属性以使用 ToolTipToolTipService 属性指定工具提示内容的位置的示例,请参见如何:定位 ToolTip

设置 ToolTip 的样式

您可以通过定义一个自定义的 Style 来设置 ToolTip 的样式。 下面的示例定义了一个名为 Simple 的 Style,它说明如何偏移 ToolTip 的位置以及如何通过设置 BackgroundForegroundFontSizeFontWeight 来更改其外观。

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

使用 ToolTipService 的时间间隔属性

ToolTipService 类提供以下属性供您设置工具提示的显示时间:InitialShowDelayBetweenShowDelayShowDuration

使用 InitialShowDelayShowDuration 属性指定 ToolTip 出现之前的延迟时间(通常很短),并指定 ToolTip 保持可见的时间长度。 有关更多信息,请参见如何:延迟 ToolTip 的显示

BetweenShowDelay 属性决定了在不同控件之间快速移动鼠标指针时,是否不经历初始延迟便可显示这些控件的工具提示。 有关 BetweenShowDelay 属性的更多信息,请参见 如何:使用 BetweenShowDelay 属性

下面的示例演示如何设置工具提示的这些属性。

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

请参见

参考

ToolTipService

ToolTip

ToolTipEventArgs

ToolTipEventHandler

其他资源

ToolTip 帮助主题