도구 설명 개요

  • 아티클

도구 설명은 사용자가 마우스 포인터를 요소 위(예: Button 위)에서 멈출 때 표시되는 작은 팝업 창입니다. 이 항목에서는 도구 설명을 소개하고 도구 설명 콘텐츠를 만들고 사용자 지정하는 방법을 설명합니다.

도구 설명이란?

사용자가 마우스 포인터를 도구 설명이 있는 요소 위로 이동하면 도구 설명 콘텐츠(예: 컨트롤 함수를 설명하는 텍스트 콘텐츠)가 포함된 창이 지정된 시간 동안 표시됩니다. 사용자가 마우스 포인터를 컨트롤 외부로 이동하면 도구 설명 콘텐츠가 포커스를 받을 수 없기 때문에 창이 사라집니다.

도구 설명 콘텐츠에는 하나 이상의 텍스트 줄, 이미지, 도형 및 기타 시각적 콘텐츠가 포함될 수 있습니다. 컨트롤에 대한 도구 설명을 정의하려면 다음 속성 중 하나를 도구 설명 콘텐츠로 설정합니다.

사용하는 속성은 도구 설명을 정의하는 컨트롤이 FrameworkContentElement 또는 FrameworkElement 클래스에서 상속하는지 여부에 따라 달라집니다.

ToolTip 만들기

다음 예제에서는 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 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)

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 및 ToolTipService 클래스의 속성 사용

시각적 속성을 설정하고 스타일을 적용하여 도구 설명 콘텐츠를 사용자 지정할 수 있습니다. 도구 설명 콘텐츠를 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과 같은 속성을 제공합니다.

InitialShowDelay 및 ShowDuration 속성을 사용하여 ToolTip이 나타날 때까지의 지연 시간(일반적으로 간략함)을 지정하고 ToolTip이 표시되는 기간을 지정합니다. 자세한 내용은 How to: Delay the Display of a 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>

참고 항목