[Controls] 21. Element:Shape (Line:선)

이번강좌에서는 WPF에서 Line(선)에 대해 알아보겠습니다. Line은 두 지점 이어서 직선을 연결을 합니다.  Line역시 Shape 클래스에서 상속을 받게 됩니다. Shape 클래스의 직선을 비롯한 모든 선과 도형 클래스는 간단한 선을 그리는 것에서 복잡한 백터 기반의 그래픽 표현도 가능합니다.

System.Windows.Shapes.Line

Line은 X1, Y1, X2, Y2 4가지의 좌표값을 기준으로 해서 그리기를 합니다.

X1 : 선의 시작 X 좌표 
Y1 : 선의 시작 Y 좌표
X2 : 선의 종료 X 좌표
Y2 : 선의 종료 Y 좌표

위의 4가지 속성은 Line를 그리기 위한 가장 중요하고 핵심적인 속성입니다. 이외에도 다양한 속성이나 이벤트가 있지만 대부분 Shape클래스나 UIElement클래스 등으로부터 상속받는 기능이 대부분입니다.

그럼 위의 4가지 속성을 가지고 대각선을 그려보겠습니다.
그림 1.대각선

<Window x:Class="wpf21.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="450" Width="600">
   
    <Canvas>
   
        <Line    X1="10" 
                Y1="10" 
                X2="100" 
                Y2="100" 
                Stroke="Gold" />
       
        <Line    X1="10" 
                Y1="10" 
                X2="100" 
                Y2="100" 
                Stroke="Gold" 
                Canvas.Left="100"
                Canvas.Top="10" />
    </Canvas>
   
</Window>

첫번째 Line은 Canvas를 기준으로 해서 Line의 외각선의 색은 Gold 입니다.
두번째 Line은 첫번째 Canvas를 기준으로 왼쪽에서 100 픽셀 이동한 위치에 대각선을 그립니다.

다음은 직선의 굵기의 두께를 "5"를 주어보겠습니다.

그림 2.Line 두께 지정

<Window x:Class="wpf21.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="450" Width="600">
   
    <Canvas>
   
        <Line    X1="10" 
                Y1="10" 
                X2="100" 
                Y2="100" 
                Stroke="LightGreen" 
                StrokeThickness="5"/>
       
        <Line    X1="10" 
                Y1="10" 
                X2="100" 
                Y2="100" 
                Stroke="LightBlue"
                StrokeThickness="5" 
                Canvas.Left="100"
                Canvas.Top="10" />
    </Canvas>
   
</Window>

StrokeThickness = "5" 속성은 선의 외곽선 두께를 지정합니다.

Stroke, StrokeThickness 속성 모두  Shape클래스에서 상속을 받습니다. Shape 클래스에는 배경색을 의미하는 Fill이라는 속성도 있습니다. 그럼 선에서 Fill속성에 값을 설정하면 어떤 모양이 나올까 확인해 보겠습니다.

그림 3.Fill 속성 적용

<Window x:Class="wpf21.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="450" Width="600">
   
    <Canvas>
   
        <Line    X1="10" 
                Y1="10" 
                X2="100" 
                Y2="100" 
                Stroke="LightGreen" 
                StrokeThickness="5"
                Fill="Red"/>
       
        <Line    X1="10" 
                Y1="10" 
                X2="100" 
                Y2="100" 
                Stroke="LightBlue"
                StrokeThickness="5" 
                Canvas.Left="100"
                Canvas.Top="10"
                Fill="Blue" />
    </Canvas>
   
</Window>

아무 변화가 없다는 것을 확인할 수 있습니다. 마지막으로 Line에 그라디언트 효과를 주어보겠습니다.

그림 4.그라디언트 효과

<Window x:Class="wpf21.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="450" Width="600">
   
    <Canvas>
     
        <Line X1="10" Y1="10" X2="100" Y2="100" StrokeThickness="5" Fill="LightGreen">
            <Line.Stroke>
                <RadialGradientBrush GradientOrigin="0.5, 0.5" Center="0.5, 0.5"
                    RadiusX="3" RadiusY="3">
                    <RadialGradientBrush.GradientStops>
                        <GradientStop Color="Red" Offset="0" />
                        <GradientStop Color="Blue" Offset="0.25" />
                    </RadialGradientBrush.GradientStops>
                </RadialGradientBrush>   
            </Line.Stroke>       
        </Line>
               
    </Canvas>
   
</Window>

그라디언트 효과는 어디까지나 맛배기 보너스 입니다.. Line에도 다른 도형과 같이 마우스 이벤트를 이용한 효과를 비롯한 다양한 효과를 얻어낼 수 있습니다.

맛배기맛배기(맛-배기) 맛보기의 평안북도 사투리 <= 여기서 맛배기가 평안도 사투리라는 것을 처음 알았습니다. -_-;



※ 테스트 환경
-----------------------------------------------------------------------------------------
운영체체 : Windows Vista Ultimate 32bit
개발툴 : Microsoft Visual C# Codename "Orcas"
-----------------------------------------------------------------------------------------