WPF에서 Shape 및 기본 그리기 개요

아티클
08/20/2008

업데이트: 2007년 11월

이 항목에서는 Shape 개체를 사용하여 그리는 방법에 대해 간략하게 설명합니다. Shape은 화면에 도형을 그릴 수 있도록 하는 UIElement의 한 형식입니다. 이러한 개체는 UI 요소이므로 Shape 개체를 Panel 요소 및 대부분의 컨트롤 내에 사용할 수 있습니다.

WPF(Windows Presentation Foundation)은 그래픽 및 렌더링 서비스에 대한 여러 계층의 액세스를 제공합니다. 최상위 계층에서 Shape 개체는 사용이 간편하고 레이아웃 및 WPF(Windows Presentation Foundation) 이벤트 시스템 참여와 같은 여러 유용한 기능을 제공합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

도형 개체
경로 및 기하 도형 사용
도형 그리기
확장 가능한 도형
도형 변환
관련 항목

도형 개체

WPF는 사용할 수 있는 여러 Shape 개체를 제공합니다. 모든 도형 개체는 Shape 클래스에서 상속됩니다. 사용 가능한 도형 개체에는 Ellipse, Line, Path, Polygon, Polyline 및 Rectangle이 있습니다. Shape 개체는 다음과 같은 공용 속성을 공유합니다.

Stroke: 도형의 윤곽선을 그리는 방식을 기술합니다.
StrokeThickness: 도형의 윤곽선 두께를 기술합니다.
Fill: 도형의 내부를 그리는 방식을 기술합니다.
장치 독립적 픽셀 단위로 측정되는 좌표 및 꼭지점을 지정하는 데이터 속성

도형 개체는 UIElement에서 파생되므로 패널 및 대부분의 컨트롤 내에 사용될 수 있습니다. Canvas 패널은 자식 개체의 절대 위치 지정을 지원하므로 복잡한 그리기에 특히 적합합니다.

Line 클래스를 사용하면 두 점 사이에 선을 그릴 수 있습니다. 다음 예제에서는 선 좌표 및 스트로크 속성을 지정하는 여러 가지 방법을 보여 줍니다.

<Canvas Height="300" Width="300">

  <!-- Draws a diagonal line from (10,10) to (50,50). -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />

  <!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. -->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    StrokeThickness="4"
    Canvas.Left="100">
    <Line.Stroke>
      <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
        <RadialGradientBrush.GradientStops>
          <GradientStop Color="Red" Offset="0" />
          <GradientStop Color="Blue" Offset="0.25" />
        </RadialGradientBrush.GradientStops>
      </RadialGradientBrush>
    </Line.Stroke>
  </Line>

  <!-- Draws a horizontal line from (10,60) to (150,60). -->
  <Line
     X1="10" Y1="60"
     X2="150" Y2="60"
     Stroke="Black"
     StrokeThickness="4"/>

</Canvas>

' Add a Line Element
Dim myLine As New Line()
myLine.Stroke = Brushes.LightSteelBlue
myLine.X1 = 1
myLine.X2 = 50
myLine.Y1 = 1
myLine.Y2 = 50
myLine.HorizontalAlignment = HorizontalAlignment.Left
myLine.VerticalAlignment = VerticalAlignment.Center
myLine.StrokeThickness = 2
myGrid.Children.Add(myLine)

// Add a Line Element
myLine = new Line();
myLine.Stroke = System.Windows.Media.Brushes.LightSteelBlue;
myLine.X1 = 1;
myLine.X2 = 50;
myLine.Y1 = 1;
myLine.Y2 = 50;
myLine.HorizontalAlignment = HorizontalAlignment.Left;
myLine.VerticalAlignment = VerticalAlignment.Center;
myLine.StrokeThickness = 2;
myGrid.Children.Add(myLine);

다음 그림에서는 렌더링된 Line을 보여 줍니다.

선 설명

Line 클래스가 Fill 속성을 제공하지만 Line에는 영역이 없으므로 해당 속성을 설정해도 효과가 없습니다.

또 다른 일반적인 도형은 Ellipse입니다. 도형의 Width 및 Height 속성을 정의하여 Ellipse를 만듭니다. 원을 그리려면 Width 값과 Height 값이 같은 Ellipse를 지정합니다.

<Ellipse
Fill="Yellow"
Height="100"
Width="200"
StrokeThickness="2"
Stroke="Black"/>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;

namespace SDKSample
{
    public partial class SetBackgroundColorOfShapeExample : Page
    {
        public SetBackgroundColorOfShapeExample()
        {
            // Create a StackPanel to contain the shape.
            StackPanel myStackPanel = new StackPanel();

            // Create a red Ellipse.
            Ellipse myEllipse = new Ellipse();

            // Create a SolidColorBrush with a red color to fill the 
            // Ellipse with.
            SolidColorBrush mySolidColorBrush = new SolidColorBrush();

            // Describes the brush's color using RGB values. 
            // Each value has a range of 0-255.
            mySolidColorBrush.Color = Color.FromArgb(255, 255, 0, 0);
            myEllipse.Fill = mySolidColorBrush; 

            // Set the width and height of the Ellipse.
            myEllipse.Width = 100;
            myEllipse.Height = 100;

            // Add the Ellipse to the StackPanel.
            myStackPanel.Children.Add(myEllipse);

            this.Content = myStackPanel;
        }

    }
}

다음 그림에서는 렌더링된 Ellipse 예제를 보여 줍니다.

타원 설명

경로 및 기하 도형 사용

Path 클래스를 사용하면 곡선 및 복잡한 도형을 그릴 수 있습니다. 이러한 곡선 및 도형은 Geometry 개체를 사용하여 기술됩니다. Path를 사용하려면 Geometry를 만들고 이를 사용하여 Path 개체의 Data 속성을 설정합니다.

선택할 수 있는 다양한 Geometry 개체가 있습니다. LineGeometry, RectangleGeometry 및 EllipseGeometry 클래스는 상대적으로 단순한 도형을 기술합니다. 보다 복잡한 도형을 만들거나 곡선을 만들려면 PathGeometry를 사용합니다.

PathGeometry 및 PathSegment

PathGeometry 개체는 하나 이상의 PathFigure 개체로 구성되며 각 PathFigure는 서로 다른 "모양"이나 도형을 나타냅니다. 각 PathFigure는 각각 모양 또는 도형의 연결된 부분을 나타내는 하나 이상의 PathSegment 개체로 구성됩니다. 세그먼트 종류에는 LineSegment, BezierSegment 및 ArcSegment가 있습니다.

다음 예제에서는 Path를 사용하여 정방형 3차원 곡선을 그립니다.

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

다음 그림에서는 렌더링된 도형을 보여 줍니다.

경로 설명

PathGeometry 및 기타 Geometry 클래스에 대한 자세한 내용은 Geometry 개요를 참조하십시오.

XAML 약식 구문

XAML(Extensible Application Markup Language)에서는 특수 약식 구문을 사용하여 Path를 기술할 수도 있습니다. 다음 예제에서는 약식 구문을 사용하여 복잡한 도형을 그립니다.

<Path Stroke="DarkGoldenRod" StrokeThickness="3" 
Data="M 100,200 C 100,25 400,350 400,175 H 280" />

다음 그림에서는 렌더링된 Path를 보여 줍니다.

경로 설명

Data 특성 문자열은 M으로 표시되는 "moveto" 명령으로 시작됩니다. 이 명령은 Canvas 좌표계에서 경로의 시작점을 설정합니다. Path 데이터 매개 변수는 대/소문자를 구분합니다. 대문자 M은 새로운 현재 지점의 절대 위치를 나타내고 소문자 m은 상대 좌표를 나타냅니다. 첫 번째 세그먼트는 (100,200)에서 시작해서 (400,175)에서 끝나는 입방형 3차원 곡선으로, 두 개의 제어점인 (100,25)와 (400,350)을 사용하여 그려집니다. 이 세그먼트는 Data 특성 문자열에서 C 명령으로 표시됩니다. 여기서도 대문자 C는 절대 경로를 나타내고 소문자 c는 상대 경로를 나타냅니다.

두 번째 세그먼트는 이전 하위 경로의 끝점인 (400,175)에서 새로운 끝점인 (280,175)로 그려지는 선을 지정하는 절대 가로 "lineto" 명령 H로 시작됩니다. 이는 가로 "lineto" 명령이므로 지정된 값은 x 좌표입니다.

전체 경로 구문은 Data 참조 및 방법: PathGeometry를 사용하여 도형 만들기를 참조하십시오.

도형 그리기

Brush 개체는 도형의 Stroke 및 Fill을 그리는 데 사용됩니다. 다음 예제에서는 Ellipse의 스트로크와 채우기를 지정합니다. 브러시 속성의 유효한 입력은 키워드 또는 16진수 색 값일 수 있습니다. 사용 가능한 색 키워드에 대한 자세한 내용은 System.Windows.Media 네임스페이스에서 Colors 클래스의 속성을 참조하십시오.

<Canvas Background="LightGray"> 
   <Ellipse
      Canvas.Top="50"
      Canvas.Left="50"
      Fill="#FFFFFF00"
      Height="75"
      Width="75"
      StrokeThickness="5"
      Stroke="#FF0000FF"/>
</Canvas>

다음 그림에서는 렌더링된 Ellipse를 보여 줍니다.

모든 타원

속성 요소 구문을 사용하여 SolidColorBrush 개체를 명시적으로 만든 다음 도형을 단색으로 그릴 수도 있습니다.

<!-- This polygon shape uses pre-defined color values for its Stroke and
     Fill properties. 
     The SolidColorBrush's Opacity property affects the fill color in 
     this case by making it slightly transparent (opacity of 0.4) so 
     that it blends with any underlying color. -->
   
<Polygon
    Points="300,200 400,125 400,275 300,200"
    Stroke="Purple" 
    StrokeThickness="2">
    <Polygon.Fill>
       <SolidColorBrush Color="Blue" Opacity="0.4"/>
    </Polygon.Fill>
</Polygon>

다음 그림에서는 렌더링된 도형을 보여 줍니다.

SolidColorBrush 설명

그라데이션, 이미지, 패턴 등을 사용하여 도형의 스트로크나 채우기를 그릴 수도 있습니다. 자세한 내용은 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오.

확장 가능한 도형

Line, Path, Polygon, Polyline 및 Rectangle 클래스에는 모두 Stretch 속성이 있습니다. 이 속성은 Shape 개체의 콘텐츠(그릴 도형)를 확장하여 Shape 개체의 레이아웃 공간을 채우는 방식을 결정합니다. Shape 개체의 레이아웃 공간은 명시적인 Width 및 Height 설정 또는 해당 HorizontalAlignment 및 VerticalAlignment 설정으로 인해 레이아웃 시스템이 Shape에 할당한 공간입니다. Windows Presentation Foundation의 레이아웃에 대한 자세한 내용은 레이아웃 시스템 개요를 참조하십시오.

Stretch 속성의 값은 다음 중 하나입니다.

None: Shape 개체의 콘텐츠가 확장되지 않습니다.
Fill: Shape 개체의 콘텐츠를 확장하여 해당 레이아웃 공간을 채웁니다. 가로 세로 비율은 유지되지 않습니다.
Uniform: Shape 개체의 콘텐츠를 최대한 확장하여 해당 레이아웃 공간을 채웁니다. 원래의 가로 세로 비율이 유지됩니다.
UniformToFill: Shape 개체의 콘텐츠를 확장하여 해당 레이아웃 공간을 완전히 채웁니다. 원래의 가로 세로 비율이 유지됩니다.

Shape 개체의 콘텐츠를 확장하면 확장 후에 Shape 개체의 윤곽선이 그려집니다.

다음 예제에서는 Polygon을 사용하여 (0,0)에서 (0,1)과 (1,1)로 이어지는 매우 작은 삼각형을 그립니다. Polygon 개체의 Width 및 Height는 100으로 설정되고 해당 확장 속성은 Fill로 설정됩니다. 그 결과 Polygon 개체의 콘텐츠(삼각형)가 확장되어 더 큰 공간을 채우게 됩니다.

...
<Polygon
  Points="0,0 0,1 1,1"
  Fill="Blue"
  Width="100"
  Height="100"
  Stretch="Fill"
  Stroke="Black"
  StrokeThickness="2" />
...

...
PointCollection myPointCollection = new PointCollection();
myPointCollection.Add(new Point(0,0));
myPointCollection.Add(new Point(0,1));
myPointCollection.Add(new Point(1,1));

Polygon myPolygon = new Polygon();
myPolygon.Points = myPointCollection;
myPolygon.Fill = Brushes.Blue;
myPolygon.Width = 100;
myPolygon.Height = 100;
myPolygon.Stretch = Stretch.Fill;
myPolygon.Stroke = Brushes.Black;
myPolygon.StrokeThickness = 2;
...

도형 변환

Transform 클래스는 2차원 평면에서 도형을 변환할 수 있는 방법을 제공합니다. 여러 가지 변환의 종류에는 회전(RotateTransform), 배율 조정(ScaleTransform), 기울이기(SkewTransform) 및 변환(TranslateTransform)이 있습니다.

도형에 가장 많이 적용하는 변환은 회전입니다. 도형을 회전하려면 RotateTransform을 만들고 해당 Angle을 지정합니다. Angle이 45이면 해당 요소가 시계 방향으로 45도 회전되고, 90이면 90도 회전되는 방식입니다. 요소가 회전되는 중심점을 제어하려면 CenterX 및 CenterY 속성을 설정합니다. 이러한 속성 값은 변환할 요소의 좌표 공간으로 표현됩니다. CenterX 및 CenterY의 기본값은 0입니다. 마지막으로 RotateTransform을 요소에 적용합니다. 변환으로 인해 레이아웃이 변경되지 않도록 하려면 도형의 RenderTransform 속성을 설정합니다.

다음 예제에서는 RotateTransform을 사용하여 도형의 왼쪽 위 모퉁이인 (0,0)을 중심으로 도형을 45도 회전합니다.

<!-- Rotates the Polyline 45 degrees about the point (0,0). -->
<Polyline Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50">
  <Polyline.RenderTransform>
    <RotateTransform CenterX="0" CenterY="0" Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

다음 예제에서는 다른 도형을 45도 회전합니다. 이번에는 (25,50) 지점을 중심으로 회전합니다.

<!-- Rotates the Polyline 45 degrees about its center. -->
<Polyline 
  Points="25,25 0,50 25,75 50,50 25,25 25,0" 
  Stroke="Blue" StrokeThickness="10"
  Canvas.Left="75" Canvas.Top="50"
  RenderTransformOrigin="0.5,0.5">
  <Polyline.RenderTransform>
    <RotateTransform Angle="45" />
  </Polyline.RenderTransform>
</Polyline>

다음 그림에서는 두 가지 변환을 적용한 결과를 보여 줍니다.

여러 중심점을 사용한 45도 회전