도구 설명 개요
도구 설명은 마우스 포인터를 Button과 같은 요소 위에 잠시 올려 두면 나타나는 작은 팝업 창입니다. 이 항목에서는 도구 설명을 소개하고 도구 설명의 콘텐츠를 만들고 사용자 지정하는 방법을 설명합니다.
이 항목에는 다음 단원이 포함되어 있습니다.
- 도구 설명 정의
- 도구 설명 만들기
- ToolTip 및 ToolTipService 클래스의 속성 사용
- 도구 설명에 스타일 적용
- 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 개체로 정의되지 않은 도구 설명 콘텐츠를 만들 수도 있습니다. 다음 예제에서는 TextBox의 ToolTip 속성을 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 클래스에 동일한 연결된 속성을 설정해야 합니다.
ToolTip 및 ToolTipService 속성을 사용하여 도구 설명 콘텐츠의 위치를 지정하기 위해 속성을 설정하는 방법에 대한 예제는 방법: 도구 설명 배치를 참조하십시오.
도구 설명에 스타일 적용
사용자 지정 Style을 정의하여 ToolTip에 스타일을 적용할 수 있습니다. 다음 예제에서는 ToolTip의 배치를 오프셋하고, Background, Foreground, FontSize 및 FontWeight를 설정하여 모양을 변경하는 방법을 보여 주는 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이 표시되는 시간을 지정합니다. 자세한 내용은 방법: 도구 설명 표시 지연을 참조하십시오.
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>