From wpf-dev-pack
Creates dynamic WPF graphics in C# using Shape, PathGeometry, and PathFigure classes. Useful for charts, diagrams, and procedural graphics.
How this skill is triggered — by the user, by Claude, or both
Slash command
/wpf-dev-pack:creating-graphics-in-codesonnetThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Programmatically create shapes and geometry for dynamic graphics.
Programmatically create shapes and geometry for dynamic graphics.
namespace MyApp.Graphics;
using System.Windows;
using System.Windows.Media;
using System.Windows.Shapes;
public static class ShapeFactory
{
/// <summary>
/// Create circular marker
/// </summary>
public static Ellipse CreateCircle(double size, Brush fill, Brush? stroke = null)
{
var ellipse = new Ellipse
{
Width = size,
Height = size,
Fill = fill
};
if (stroke is not null)
{
ellipse.Stroke = stroke;
ellipse.StrokeThickness = 1;
}
return ellipse;
}
/// <summary>
/// Create rectangle with optional corner radius
/// </summary>
public static Rectangle CreateRectangle(
double width,
double height,
Brush fill,
double cornerRadius = 0)
{
return new Rectangle
{
Width = width,
Height = height,
Fill = fill,
RadiusX = cornerRadius,
RadiusY = cornerRadius
};
}
/// <summary>
/// Create line between two points
/// </summary>
public static Line CreateLine(Point start, Point end, Brush stroke, double thickness = 1)
{
return new Line
{
X1 = start.X,
Y1 = start.Y,
X2 = end.X,
Y2 = end.Y,
Stroke = stroke,
StrokeThickness = thickness
};
}
}
namespace MyApp.Graphics;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media;
public static class GeometryBuilder
{
/// <summary>
/// Create polygon from points
/// </summary>
public static PathGeometry CreatePolygon(IReadOnlyList<Point> points)
{
if (points.Count < 3)
return new PathGeometry();
var figure = new PathFigure
{
StartPoint = points[0],
IsClosed = true,
IsFilled = true
};
for (var i = 1; i < points.Count; i++)
{
figure.Segments.Add(new LineSegment(points[i], isStroked: true));
}
var geometry = new PathGeometry();
geometry.Figures.Add(figure);
return geometry;
}
/// <summary>
/// Create polyline (open path)
/// </summary>
public static PathGeometry CreatePolyline(IReadOnlyList<Point> points)
{
if (points.Count < 2)
return new PathGeometry();
var figure = new PathFigure
{
StartPoint = points[0],
IsClosed = false
};
for (var i = 1; i < points.Count; i++)
{
figure.Segments.Add(new LineSegment(points[i], isStroked: true));
}
var geometry = new PathGeometry();
geometry.Figures.Add(figure);
return geometry;
}
/// <summary>
/// Create cubic Bezier curve
/// </summary>
public static PathGeometry CreateBezierCurve(
Point start,
Point control1,
Point control2,
Point end)
{
var figure = new PathFigure { StartPoint = start };
figure.Segments.Add(new BezierSegment(control1, control2, end, isStroked: true));
var geometry = new PathGeometry();
geometry.Figures.Add(figure);
return geometry;
}
/// <summary>
/// Create arc
/// </summary>
public static PathGeometry CreateArc(
Point start,
Point end,
Size size,
SweepDirection direction = SweepDirection.Clockwise)
{
var figure = new PathFigure { StartPoint = start };
figure.Segments.Add(new ArcSegment(end, size, 0, false, direction, isStroked: true));
var geometry = new PathGeometry();
geometry.Figures.Add(figure);
return geometry;
}
}
/// <summary>
/// Create arrow with head
/// </summary>
public static Path CreateArrow(Point start, Point end, Brush stroke, double headSize = 10)
{
var geometry = new PathGeometry();
// Arrow body
var bodyFigure = new PathFigure { StartPoint = start };
bodyFigure.Segments.Add(new LineSegment(end, isStroked: true));
geometry.Figures.Add(bodyFigure);
// Calculate arrow head direction
var direction = end - start;
direction.Normalize();
var perpendicular = new Vector(-direction.Y, direction.X);
var headBase = end - direction * headSize;
var headLeft = headBase + perpendicular * (headSize / 2);
var headRight = headBase - perpendicular * (headSize / 2);
// Arrow head
var headFigure = new PathFigure { StartPoint = end, IsClosed = true, IsFilled = true };
headFigure.Segments.Add(new LineSegment(headLeft, isStroked: true));
headFigure.Segments.Add(new LineSegment(headRight, isStroked: true));
geometry.Figures.Add(headFigure);
return new Path
{
Data = geometry,
Stroke = stroke,
Fill = stroke,
StrokeThickness = 2
};
}
/// <summary>
/// Create optimized geometry using StreamGeometry
/// </summary>
public static StreamGeometry CreateOptimizedPolygon(IReadOnlyList<Point> points)
{
var geometry = new StreamGeometry();
using (var context = geometry.Open())
{
context.BeginFigure(points[0], isFilled: true, isClosed: true);
for (var i = 1; i < points.Count; i++)
{
context.LineTo(points[i], isStroked: true, isSmoothJoin: false);
}
}
geometry.Freeze(); // Make immutable for performance
return geometry;
}
/// <summary>
/// Create optimized smooth curve
/// </summary>
public static StreamGeometry CreateOptimizedCurve(IReadOnlyList<Point> points)
{
var geometry = new StreamGeometry();
using (var context = geometry.Open())
{
context.BeginFigure(points[0], isFilled: false, isClosed: false);
context.PolyBezierTo(points.Skip(1).ToList(), isStroked: true, isSmoothJoin: true);
}
geometry.Freeze();
return geometry;
}
public void AddShapesToCanvas(Canvas canvas, IReadOnlyList<DataPoint> data)
{
canvas.Children.Clear();
foreach (var point in data)
{
var marker = ShapeFactory.CreateCircle(10, Brushes.Blue);
Canvas.SetLeft(marker, point.X - 5);
Canvas.SetTop(marker, point.Y - 5);
canvas.Children.Add(marker);
}
// Add connecting line
var linePoints = data.Select(d => new Point(d.X, d.Y)).ToList();
var linePath = new Path
{
Data = GeometryBuilder.CreatePolyline(linePoints),
Stroke = Brushes.Blue,
StrokeThickness = 2
};
canvas.Children.Add(linePath);
}
| Approach | Use Case | Performance |
|---|---|---|
| Shape | Interactive elements | Lower (full layout) |
| PathGeometry | Complex dynamic shapes | Medium |
| StreamGeometry | Static complex shapes | Higher |
| DrawingVisual | Large datasets | Highest |
Always call Freeze() on geometry, brushes, and pens for static graphics.
npx claudepluginhub christian289/dotnet-with-claudecode --plugin wpf-dev-packImplements WPF 2D graphics with Shape, Geometry, Brush, and Pen classes for vector UIs, icons, charts, and diagrams in WPF apps.
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.
Draws vector shapes and paths in PixiJS v8 using the Graphics API: shape-then-fill methods, path methods, gradients, patterns, SVG import/export, hit testing, and GraphicsContext sharing.