WPF 2D Graphics Patterns

WPF 2D Graphics Patterns

Implement vector-based visual elements using WPF's 2D graphics system.

1. Graphics Hierarchy

UIElement
└── Shape (FrameworkElement)        ← Participates in layout, supports events
    ├── Ellipse
    ├── Rectangle
    ├── Line
    ├── Polyline
    ├── Polygon
    └── Path

Drawing                             ← Lightweight, no events
├── GeometryDrawing
├── ImageDrawing
├── VideoDrawing
└── GlyphRunDrawing

---

2. Shape Basics

2.1 Basic Shapes

<!-- Ellipse -->
<Ellipse Width="100" Height="100"
         Fill="Blue"
         Stroke="Black"
         StrokeThickness="2"/>

<!-- Rectangle -->
<Rectangle Width="100" Height="50"
           Fill="Red"
           Stroke="Black"
           StrokeThickness="1"
           RadiusX="10" RadiusY="10"/>

<!-- Line -->
<Line X1="0" Y1="0" X2="100" Y2="100"
      Stroke="Green"
      StrokeThickness="3"/>

<!-- Polyline (connected lines) -->
<Polyline Points="0,0 50,50 100,0 150,50"
          Stroke="Purple"
          StrokeThickness="2"
          Fill="Transparent"/>

<!-- Polygon (closed shape) -->
<Polygon Points="50,0 100,100 0,100"
         Fill="Yellow"
         Stroke="Orange"
         StrokeThickness="2"/>

2.2 Path and Geometry

<!-- Path: complex shapes -->
<Path Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2">
    <Path.Data>
        <PathGeometry>
            <PathFigure StartPoint="10,10" IsClosed="True">
                <LineSegment Point="100,10"/>
                <ArcSegment Point="100,100" Size="50,50"
                            SweepDirection="Clockwise"/>
                <LineSegment Point="10,100"/>
            </PathFigure>
        </PathGeometry>
    </Path.Data>
</Path>

<!-- Mini-Language syntax -->
<Path Data="M 10,10 L 100,10 A 50,50 0 0 1 100,100 L 10,100 Z"
      Fill="LightGreen" Stroke="DarkGreen"/>

2.3 Path Mini-Language

Command	Description	Example
M	MoveTo (start point)	M 10,10
L	LineTo (straight line)	L 100,100
H	Horizontal LineTo	H 100
V	Vertical LineTo	V 100
A	ArcTo (arc)	A 50,50 0 0 1 100,100
C	Cubic Bezier	C 20,20 40,60 100,100
Q	Quadratic Bezier	Q 50,50 100,100
Z	ClosePath	Z

Lowercase = relative coordinates, Uppercase = absolute coordinates

---

3. Geometry

3.1 Basic Geometry

<Path Stroke="Black" StrokeThickness="2">
    <Path.Data>
        <!-- Rectangle Geometry -->
        <RectangleGeometry Rect="10,10,80,60" RadiusX="5" RadiusY="5"/>
    </Path.Data>
</Path>

<Path Stroke="Black" Fill="Yellow">
    <Path.Data>
        <!-- Ellipse Geometry -->
        <EllipseGeometry Center="50,50" RadiusX="40" RadiusY="30"/>
    </Path.Data>
</Path>

<Path Stroke="Black">
    <Path.Data>
        <!-- Line Geometry -->
        <LineGeometry StartPoint="10,10" EndPoint="90,90"/>
    </Path.Data>
</Path>

3.2 CombinedGeometry (Shape Combination)

<Path Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2">
    <Path.Data>
        <CombinedGeometry GeometryCombineMode="Union">
            <CombinedGeometry.Geometry1>
                <EllipseGeometry Center="50,50" RadiusX="40" RadiusY="40"/>
            </CombinedGeometry.Geometry1>
            <CombinedGeometry.Geometry2>
                <EllipseGeometry Center="80,50" RadiusX="40" RadiusY="40"/>
            </CombinedGeometry.Geometry2>
        </CombinedGeometry>
    </Path.Data>
</Path>

GeometryCombineMode:

• Union: Union of shapes
• Intersect: Intersection
• Exclude: Difference (Geometry1 - Geometry2)
• Xor: Exclusive union

3.3 GeometryGroup (Multiple Geometry)

<Path Fill="Coral" Stroke="DarkRed" StrokeThickness="1">
    <Path.Data>
        <GeometryGroup FillRule="EvenOdd">
            <EllipseGeometry Center="50,50" RadiusX="45" RadiusY="45"/>
            <EllipseGeometry Center="50,50" RadiusX="30" RadiusY="30"/>
        </GeometryGroup>
    </Path.Data>
</Path>

FillRule:

• EvenOdd: Even-odd rule (donut shape)
• Nonzero: Non-zero rule (filled)

---

4. Brush (Quick Reference)

<!-- SolidColorBrush -->
<Rectangle Fill="Blue"/>
<Rectangle Fill="#FF2196F3"/>

<!-- LinearGradientBrush -->
<Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
        <GradientStop Color="#2196F3" Offset="0"/>
        <GradientStop Color="#FF9800" Offset="1"/>
    </LinearGradientBrush>
</Rectangle.Fill>

📌 상세 가이드: /creating-wpf-brushes skill 참조

---

5. Stroke Styling

5.1 StrokeDashArray

<!-- Dashed line patterns -->
<Line X1="0" Y1="10" X2="200" Y2="10"
      Stroke="Black" StrokeThickness="2"
      StrokeDashArray="4,2"/>

<!-- Dot-dash pattern -->
<Line X1="0" Y1="30" X2="200" Y2="30"
      Stroke="Black" StrokeThickness="2"
      StrokeDashArray="4,2,1,2"/>

5.2 StrokeLineCap / StrokeLineJoin

<Polyline Points="10,50 50,10 90,50"
          Stroke="Blue"
          StrokeThickness="10"
          StrokeStartLineCap="Round"
          StrokeEndLineCap="Triangle"
          StrokeLineJoin="Round"/>

LineCap: Flat, Round, Square, Triangle LineJoin: Miter, Bevel, Round

---

6. Related Skills

Skill	Description
/creating-wpf-brushes	All Brush patterns (Solid, Linear, Radial, Image, Visual)
/creating-wpf-vector-icons	XAML vector icons, IconButton styles
/creating-graphics-in-code	C# dynamic graphics (ShapeFactory, GeometryBuilder)

---

7. Performance Considerations

Element	Complexity	Recommended Use
Shape	High	Interactive elements (click, drag)
DrawingVisual	Low	Large static graphics
StreamGeometry	Lowest	Fixed complex paths

// StreamGeometry: immutable, optimized
var streamGeometry = new StreamGeometry();
using (var context = streamGeometry.Open())
{
    context.BeginFigure(new Point(0, 0), isFilled: true, isClosed: true);
    context.LineTo(new Point(100, 0), isStroked: true, isSmoothJoin: false);
    context.LineTo(new Point(100, 100), isStroked: true, isSmoothJoin: false);
}
streamGeometry.Freeze(); // Set immutable for performance improvement

---

8. References

• Shapes and Basic Drawing - Microsoft Docs
• Geometry Overview - Microsoft Docs
• Painting with Brushes - Microsoft Docs