implementing-2d-graphicslisted
Install: claude install-skill christian289/dotnet-with-claudecode
# 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
```xml
<!-- 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
```xml
<!-- Path: complex shapes -->
<Path Fill="LightBlue" Stroke="DarkBlue" StrokeThickness="2">
<Path.Data>
<PathGeometry>
<PathFigure StartPoint="10,10" IsClosed="True">
<LineSegment Point="100,10"/>