共用方式為


工具提示概觀

工具提示是一個小型快顯視窗,會在使用者將滑鼠指標暫停在某個項目 (如 Button) 上時出現。 本主題將介紹工具提示,並說明如何建立和自訂工具提示內容。

這個主題包含下列章節。

  • 什麼是工具提示?
  • 建立工具提示
  • 使用工具提示的屬性和 ToolTipService 類別
  • 設定工具提示樣式
  • 使用 ToolTipService 的時間間隔屬性
  • 相關主題

什麼是工具提示?

當使用者將滑鼠指標移到有工具提示的項目上時,包含工具提示內容 (例如,描述控制項功能的文字內容) 的視窗會出現並持續一段指定的時間。 如果使用者將滑鼠指標移離控制項,視窗就會消失,因為工具提示內容不再接收焦點。

工具提示的內容可包含一或多行文字、一個或多個影像、圖案或其他視覺內容。 要定義控制項的工具提示,可以將下列其中一個屬性設為工具提示內容。

要使用哪個屬性,會視定義工具提示的控制項是繼承自 FrameworkContentElementFrameworkElement 類別而定。

建立工具提示

下列範例顯示如何藉由將 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);

您也可以建立不是定義為 ToolTip 物件的工具提示內容,方式是將工具提示內容封入版面配置項目,例如 DockPanel。 下列範例顯示如何將 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>

使用工具提示的屬性和 ToolTipService 類別

您可以藉由設定視覺屬性和套用樣式,來自訂工具提示內容。 如果您將工具提示內容定義為 ToolTip 物件,可以設定 ToolTip 物件的視覺屬性。 否則,就必須在 ToolTipService 類別上設定對等的附加屬性。

如需範例示範如何使用 ToolTipToolTipService 屬性,以設定屬性來指定工具提示內容的位置,請參閱 HOW TO:置放工具提示

設定工具提示樣式

您可以定義自訂 Style,來設定 ToolTip 的樣式。 下列範例會定義一個名為 Simple 的 Style,顯示如何藉由設定 BackgroundForegroundFontSizeFontWeight,來位移 ToolTip 的位置並變更其外觀。

<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 要顯示多久的時間。 如需詳細資訊,請參閱 HOW TO:延遲工具提示的顯示

BetweenShowDelay 屬性會決定滑鼠指標在不同控制項之間快速移動時,工具提示是否會在沒有初始延遲的情況下出現。 如需 BetweenShowDelay 屬性的詳細資訊,請參閱 HOW TO:使用 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 HOW TO 主題