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>
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"를 주어보겠습니다.
<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>
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속성에 값을 설정하면 어떤 모양이 나올까 확인해 보겠습니다.
<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>
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에 그라디언트 효과를 주어보겠습니다.
<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>
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"
-----------------------------------------------------------------------------------------
'닷넷 프로그래밍(~2012)' 카테고리의 다른 글
| [Controls] 24. Element:Shape (Path - 2) (0) | 2007.02.01 |
|---|---|
| [Controls] 23. Element:Shape (Path - 1) (0) | 2007.02.01 |
| [Controls] 22. Element:Shape (Polyline/Polygon) (0) | 2007.01.31 |
| [Controls] 21. Element:Shape (Line:선) (0) | 2007.01.30 |
| [Controls] 20. Element:Shape (Ellipse:원) (0) | 2007.01.28 |
| [Controls] 19. Border (0) | 2007.01.14 |
| [Controls] 16. Expender (0) | 2007.01.12 |
| [Controls] 15. Treeview (0) | 2007.01.11 |