컨트롤 ToolTips

도구 설명, 정보팁 또는 힌트 등, 다양한 이름이지만 개념은 동일합니다. 이것은 특정 컨트롤이나 링크에 마우스를 올려 놓으면 추가 정보를 얻을 수있는 기능입니다. WPF는 이 개념을 지원하고 대부분 WPF 컨트롤은 FrameworkElement 클래스를 상속하고 여기에 있는 ToolTip 속성을 사용할 수 있습니다.

다음의 두개의 기본 예제에서 볼 수 있듯이 컨트롤에 대한 ToolTip을 지정하는 것은 매우 쉽습니다.

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsSimpleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsSimpleSample" Height="150" Width="400">
    <Grid VerticalAlignment="Center" HorizontalAlignment="Center">

        <Button ToolTip="Click here and something will happen!">Click here!</Button>

    </Grid>
</Window>

스크린 샷에서 볼 수 있듯이 마우스를 버튼 위로 가져 가면 지정한 문자열이 있는 고정되지 않은 상자가 생깁니다. 이것은 대부분의 UI 프레임 워크가 제공하는 것이고, 단순한 텍스트 문자열 표시일 뿐입니다.

그러나 WPF에서 ToolTip 속성은 실제로는 단순 문자열이 아니라 객체 유형입니다. 즉, 우리가 원하는 모든 것을 넣을 수 있습니다. 덕분에 우리는 훨씬 풍부하고 유용한 툴팁을 사용자에게 제공할 수 있습니다. 예를 들어 다음 예제를 위의 예제와 비교해 보십시오.

<Window x:Class="WpfTutorialSamples.Control_concepts.ToolTipsAdvancedSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="ToolTipsAdvancedSample" Height="200" Width="400" UseLayoutRounding="True">
    <DockPanel>
        <ToolBar DockPanel.Dock="Top">
            <Button ToolTip="Create a new file">
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/page_white.png" Width="16" Height="16" />
                </Button.Content>
            </Button>
            <Button>
                <Button.Content>
                    <Image Source="/WpfTutorialSamples;component/Images/folder.png" Width="16" Height="16" />
                </Button.Content>
                <Button.ToolTip>
                    <StackPanel>
                        <TextBlock FontWeight="Bold" FontSize="14" Margin="0,0,0,5">Open file</TextBlock>
                        <TextBlock>
                        Search your computer or local network
                        <LineBreak />
                        for a file and open it for editing.
                        </TextBlock>
                        <Border BorderBrush="Silver" BorderThickness="0,1,0,0" Margin="0,8" />
                        <WrapPanel>
                            <Image Source="/WpfTutorialSamples;component/Images/help.png" Margin="0,0,5,0" />
                            <TextBlock FontStyle="Italic">Press F1 for more help</TextBlock>
                        </WrapPanel>
                    </StackPanel>
                </Button.ToolTip>
            </Button>
        </ToolBar>

        <TextBox>
            Editor area...
        </TextBox>
    </DockPanel>
</Window>

첫번째 예제가 버튼에 간단한 문자열 툴팁을 사용한 반면, 두 번째 예제에서 버튼에 훨씬 더 고급 툴팁을 사용하는 방법을 살펴보십시오. 고급 예제에서는 루트 컨트롤로 패널을 사용한 다음, 원하는대로 컨트롤을 추가 할 수 있습니다. 결과는 헤더, 설명 텍스트 및 도움말 아이콘을 포함하여 F1을 눌러 더 많은 도움을 얻을 수 있다는 힌트까지 넣어 매우 멋있습니다.

고급 옵션

ToolTipService 클래스에는 tooltip의 동작을 제어하는 흥미로운 속성이 많이 있습니다. 밑의 예제에서는 도구 설명이 있는 컨트롤에 직접 설정합니다. 여기서 ShowDuration 속성을 사용하여 tooltip이 표시되는 시간을 조절합니다 (이 값은 5.000밀리세컨드 에서 5초 까지 설정 가능합니다).

<Button ToolTip="Create a new file" ToolTipService.ShowDuration="5000" Content="Open" />

HasDropShadow 속성을 사용하여 팝업의 그림자 여부를 제어하거나 ShowOnDisabled 속성을 사용하여 비활성화 된 컨트롤에 대한 tooltip을 표시할지 여부를 결정할 수도 있습니다. 다른 여러 가지 흥미로운 속성이 있으므로 전체 목록을 보려면 아래 링크를 참조하십시오. http://msdn.microsoft.com/en-us/library/system.windows.controls.tooltipservice.aspx

요약

Tooltip은 사용자에게 큰 도움이 되고, WPF에서는 사용하기 쉽고 유연성이 뛰어납니다. ToolTipService 클래스의 속성을 사용하여 Tooltip의 디자인과 내용을 마음대로 제어 해서 응용 프로그램에서 보다 사용자 친화적인 인라인 도움말을 만들어 보십시오.