Geometry 사용법

WPF 에서 Geomtry 란?

벡터 기반 도형을 정의하고 그리기 위한 핵심 클래스
WPF 에서 UI를 구성할 때 종종 다양한 도형을 화면에 출력할 필요가 있습니다. 이럴 때 사용하는 것이 바로 System.Windows.Media.Geometry 입니다.

Geomtry 란?

간단히 말해, Geomtry는 도형의 윤곽(모양)을 수학적으로 정의하는 클래스 입니다.

• 해상도에 독립적인 벡터(Vector) 기반이기 때문에 확대해도 깨지지 않습니다.
• 사각형, 원, 선 등 단순 도형부터, 여러 선과 곡선으로 구성된 복합 도형까지 만들 수 있습니다.
• 주로 Path 컨트롤과 함께 사용하여 시각적으로 도형을 그립니다.

Geomtry의 주요 파생 클래스

클래스	설명
RectangleGeomtry	사각형 도형을 정의
EllipseGeometry	원형 또는 타원 도형
LineGeometry	한 점에서 다른 점으로의 선
PathGeometry	선(Line), 곡선(Arc), Bezier 등을 조합한 복합 도형
CombinedGeometry	두 개의 Geometry 를 합치거나 빼는 등 Boolean 연산

Geometry 사용 예제

1. XAML로 사각형 Geometry 그리기

<Path Stroke="Black" Fill="SkyBlue" StrokeThickness="2">
    <Path.Data>
        <RectangleGeometry Rect="10, 10, 100, 50"/>
    </Path.Data>
</Path>

1. PathGeometry 로 복잡한 도형

<Path Stroke="DarkRed" StrokeThickness="2" Fill="Orange">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="10,100">
                <LineSegment Point="100,100"/>
                <ArcSegment Point="150,50" Size="30,30" SweepDirection="Clockwise"/>
                <LineSegment Point="10,50"/>
                <ClosePath/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

코드에서 Geometry 생성하기

var ellipse = new EllipseGeometry(new Point(50, 50), 40, 20);
var path = new Path
{
    Stroke = Brushes.Blue,
    Fill = Brushes.LightYellow,
    StrokeThickness = 2,
    Data = ellipse
};
canvas.Children.Add(path);

Tip: 코드에서 생성할 경우에는 Canvas, Grid, StackPanel 등에 직접 도형을 추가할 수 있어 유연합니다.

Geometry 가 왜 필요할까?

• 픽셀 단위 그리기 대신, 수학적 좌표 기반으로 깔끔한 UI 구성 가능
• PathGeometry를 활용하면 복잡한 그래픽도 직접 그릴 수 있음
• HitTest 와 Clip 영역 설정 등에도 활용됨

SVG 에서 Geometry 로 활용하기

직접 도형을 수학적으로 정의하는 것도 좋지만, 디자인 감각이 부족하다면?
아이콘 사이트에서 SVG 이미지를 가져와서 Geometry 로 바로 사용할 수 있습니다!

추천 아이콘 사이트

사이트	설명
https://pictogrammers.com	Material Design 기반 아이콘, Path Data 바로 복사 가능

사용 방법

1. https://pictogrammers.com 접속
2. 원하는 아이콘 클릭
3. Path Data 복사 (M 10,20 ... 로 시작하는 문자)
4. XAML 에 붙여넣기:

<Path Stroke="Black" Fill="Black" StrokeThickness="1"
      Data="M12,2C6.48,2 2,6.48 2,12s4.48,10 ... Z"/>

이 Data 속성이 바로 Geometry 입니다. SVG path 요소의 d 속성과 동일합니다.

정리

• Geometry 는 꼭 수작업으로 만들지 않아도 됩니다.
• 아이콘 사이트의 SVG Path를 그대로 활용하면 빠르고 세련된 UI 제작이 가능합니다.
• Path.Data="..." 에 문자열 하나만 넣어도 복잡한 도형이 그려집니다.