ToolTip の概要

[アーティクル]
08/09/2011

ツールヒントは、Button などの要素の上にマウスポインターを置いたときに表示される小さいポップアップウィンドウです。ここでは、ツールヒントについて、およびツールヒントのコンテンツを作成およびカスタマイズする方法について説明します。

このトピックは、次のセクションで構成されています。

ツールヒントとは
ツールヒントの作成
ToolTip クラスと ToolTipService クラスのプロパティの使用
ToolTip のスタイル設定
ToolTipService の時間間隔プロパティの使用
関連トピック

ツールヒントとは

ツールヒントを持つ要素の上にマウスポインターを移動すると、ツールヒントのコンテンツ (たとえば、コントロールの機能を説明するテキストコンテンツなど) を含むウィンドウが、指定した時間だけ表示されます。マウスポインターをコントロールの外に移動すると、ツールヒントのコンテンツはフォーカスを受け取ることができないので、ウィンドウは表示されなくなります。

ツールヒントのコンテンツには、1 行または複数行のテキスト、イメージ、図形、またはその他のビジュアルコンテンツを使用できます。コントロールのツールヒントを定義するには、ツールヒントのコンテンツに次のいずれかのプロパティを設定します。

どちらのプロパティを使用するかは、ツールヒントを定義するコントロールが FrameworkContentElement クラスまたは FrameworkElement クラスのどちらを継承するかによります。

ツールヒントの作成

Button コントロールの ToolTip プロパティにテキスト文字列を設定して、簡単なツールヒントを作成する方法を次の例に示します。

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

ToolTip オブジェクトとしてツールヒントを定義することもできます。次の例では、XAML を使用し、TextBox 要素のツールヒントとして ToolTip オブジェクトを指定します。 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 オブジェクトとして定義されていないツールヒントのコンテンツを作成することもできます。次の例では、DockPanel コントロールで囲まれているコンテンツを、TextBox の ToolTip プロパティに設定する方法を示します。

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

視覚プロパティを設定してスタイルを適用することで、ツールヒントのコンテンツをカスタマイズできます。 ToolTip オブジェクトとしてツールヒントのコンテンツを定義する場合は、ToolTip オブジェクトの視覚プロパティを設定できます。それ以外の場合は、ToolTipService クラスで等価の添付プロパティを設定する必要があります。

ToolTip と ToolTipService のプロパティを使用して、ツールヒントのコンテンツの位置を指定するプロパティを設定する方法の例については、「方法 : ToolTip を配置する」を参照してください。

カスタム Style を定義することで、ToolTip のスタイルを設定できます。次の例では、Background、Foreground、FontSize、および FontWeight を設定することで ToolTip の配置をオフセットして外観を変更する、Simple という名前の 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>

ToolTipService の時間間隔プロパティの使用

ToolTipService クラスで提供されている InitialShowDelay、BetweenShowDelay、および ShowDuration の各プロパティを使用すると、ツールヒントの表示時間を設定できます。

ToolTip が表示されるまでの遅延時間 (通常は短時間)、および ToolTip が表示されている時間を指定するには、InitialShowDelay プロパティと ShowDuration プロパティを使用します。詳細については、「方法 : 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>