From wpf-dev-pack
Implements WPF 2D graphics with Shape, Geometry, Brush, and Pen classes for vector UIs, icons, charts, and diagrams in WPF apps.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wpf-dev-pack:implementing-2d-graphicssonnetThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Implement vector-based visual elements using WPF's 2D graphics system.
Implement vector-based visual elements using WPF's 2D graphics system.
UIElement
└── Shape (FrameworkElement) ← Participates in layout, supports events
├── Ellipse
├── Rectangle
├── Line
├── Polyline
├── Polygon
└── Path
Drawing ← Lightweight, no events
├── GeometryDrawing
├── ImageDrawing
├── VideoDrawing
└── GlyphRunDrawing
<!-- 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"/>
<!-- 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"/>
| 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
<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>
<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:
<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:
<!-- 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-brushesskill 참조
<!-- 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"/>
<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
| 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) |
| 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
npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packCreates dynamic WPF graphics in C# using Shape, PathGeometry, and PathFigure classes. Useful for charts, diagrams, and procedural graphics.
Implements Makepad 2.0 Vector widget for resolution-independent vector graphics using SVG-like syntax with paths, shapes, gradients, filters, groups, transforms, and tween animations.
Guides custom drawing in .NET MAUI using Microsoft.Maui.Graphics and GraphicsView, covering canvas operations, shapes, paths, text rendering, images, shadows, clipping, and state management with SaveState/RestoreState.