Silverlight 컨틀롤 (버튼이나, 이미지 등의)에 혹시나 tooltip을 적용 할 수 있을지 갑자기 굼금 해져서
한번 조사 해본 결과, Silverlight 에 tooltip 기능이 있었습니다.


그럼 이제 tooltip 기능을 한번 사용해 봅시다.

먼저 실행결과를 먼저 보고 silverlight 컨트롤에 tooltip을 추가 하는 방법에 대해서 알아보도록 합시다.




위의 실행 결과를 보면 조석 이라는 tooltip이 나타 나는 것을 볼 수 있습니다. ㅋㅋㅋ

그럼 이제 코드를 하나 하나 씩 살펴 보도록 하겠습니다. (매우 간단 합니다.)
각각의 그림마다 tooltip을 추가 하는 방법을 다르게 해봤습니다.
(그렇다고 tooltip을 추가 하는 방법이 3가지 라는 것은 아닙니다.)

첫번째, tooltip "조석"은 다음과 같이 작업 했습니다.

<Image Margin="24,48,32,48" Width="104" Height="104"
               Source="image1.jpg" HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch" Grid.Row="1"
               d:LayoutOverrides="Width, Height"
               Grid.ColumnSpan="1" x:Name="image1">
           
            <ToolTipService.ToolTip>
                <ToolTip>
                    <ToolTip.Content>
                        <TextBlock x:Name="tooltip1" Text="조석"></TextBlock>
                    </ToolTip.Content>
                </ToolTip>
            </ToolTipService.ToolTip>
            
</Image>

<Image> 컨트롤을 이용하여 이미지를 로드 했고, 그 이미지에 <ToolTipService.ToolTip> 태그와
<ToolTip>, <ToolTip.Content>를 사용하여 tooltip을 추가 했습니다.
그리고 실제로 "조석" 이라고 나오는 tooltip은 <TextBlock> 컨트롤을 이용하여 작성 하였습니다.
매우 간단 합니다.

두번째, tooltip "낢" 은 다음과 같이 작업 했습니다.


<Image Margin="32,48,40,48" Width="104" Height="104"
               Source="image2.jpg" HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch" Grid.Row="1"
               d:LayoutOverrides="Width, Height"
               Grid.ColumnSpan="1" Grid.Column="2" x:Name="image2">
           
            <ToolTipService.ToolTip>
                <TextBlock x:Name="tooltip2" Text="낢"></TextBlock>
            </ToolTipService.ToolTip>
            
           
</Image>

첫번째, 방법과 똑같습니다. <ToolTipService.ToolTip> 태그와 <ToolTip> 태그 를 적을 때,
혹시 <ToolTip>와 <ToolTip.Content> 태그를 생략 해도 되지 않을까 해서 해봤는데,
문제 없이 잘 실행 되었습니다. 이게 간단하고 좋은것 같습니다.


마지막으로 세번째, "와탕카"는 다음과 같이 작업 했습니다.

<Image Margin="24,48,20,48" Width="104" Height="104"
               Source="image3.jpg" HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch" Grid.Row="1"
               d:LayoutOverrides="Width, Height"
               Grid.ColumnSpan="1" Grid.Column="4" x:Name="image3">
           
            <ToolTipService.ToolTip>
                        <TextBlock x:Name="tooltip3"></TextBlock> 
            </ToolTipService.ToolTip>
            
            
</Image>

마지막 방법도 비슷 하지만 여기서는 tooltip으로 사용할 <TextBlock>  컨트롤에 Text 속성을 기입 하지 않았다.
즉,  tooltip으로 나타날 TextBlock 컨트롤에 text를 넣지 않았습니다.. 실행해 보니 tooltip으로 그냥 작은 <TextBlock>
컨트롤만 나왔습니다. (당연한 결과라 생각 됨니다.)
이번 방법은 tooltip으로 사용되는 tooltip3 이라는 textblock 컨트롤의 Loaded 라는 이벤트를 이용하여,
tooltip에 text를 넣었습니다.
cs 코드는 다음과 같습니다.


tooltip3.Loaded += new RoutedEventHandler(ToolTip_Event);  

private void ToolTip_Event(object sender, RoutedEventArgs e)
{
           
        
            switch (((TextBlock)sender).Name)
            {
                case "tooltip1": ((TextBlock)sender).Text = "조석";
                    break;
                case "tooltip2": ((TextBlock)sender).Text = "낢";
                    break;
                case "tooltip3": ((TextBlock)sender).Text = "와탕카";
                    break;
            }


 }

설명을 드리면 tooltip3 이라는 textblock 컨트롤이 로드되면(화면에 나타나면) ToolTip_Event 가 발생 하고,
이벤트 처리 부분에서 Text 속성 값으로 "와탕카"를 넣었습니다.


마지막으로 전체 소스를 올리 겠습니다.


Posted by JMSOFT

댓글을 달아 주세요

  1. 좋은 내용 잘 보고 갑니다.
    감사합니다.

티스토리 툴바