creating-graphics-in-code

Creating WPF Graphics in Code

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "creating-graphics-in-code" with this command: npx skills add christian289/dotnet-with-claudecode/christian289-dotnet-with-claudecode-creating-graphics-in-code

Creating WPF Graphics in Code

Programmatically create shapes and geometry for dynamic graphics.

  1. Shape Factory Pattern

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;
}

/// &#x3C;summary>
/// Create rectangle with optional corner radius
/// &#x3C;/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
    };
}

/// &#x3C;summary>
/// Create line between two points
/// &#x3C;/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
    };
}

}

  1. Geometry Builder Pattern

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 &#x3C; points.Count; i++)
    {
        figure.Segments.Add(new LineSegment(points[i], isStroked: true));
    }

    var geometry = new PathGeometry();
    geometry.Figures.Add(figure);
    return geometry;
}

/// &#x3C;summary>
/// Create polyline (open path)
/// &#x3C;/summary>
public static PathGeometry CreatePolyline(IReadOnlyList&#x3C;Point> points)
{
    if (points.Count &#x3C; 2)
        return new PathGeometry();

    var figure = new PathFigure
    {
        StartPoint = points[0],
        IsClosed = false
    };

    for (var i = 1; i &#x3C; points.Count; i++)
    {
        figure.Segments.Add(new LineSegment(points[i], isStroked: true));
    }

    var geometry = new PathGeometry();
    geometry.Figures.Add(figure);
    return geometry;
}

/// &#x3C;summary>
/// Create cubic Bezier curve
/// &#x3C;/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;
}

/// &#x3C;summary>
/// Create arc
/// &#x3C;/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;
}

}

  1. Arrow Creation

/// <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
};

}

  1. StreamGeometry (Performance)

/// <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 &#x3C; 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;

}

  1. Adding to Canvas

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);

}

  1. Performance Guidelines

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.

  1. References
  • Geometry Overview - Microsoft Docs

  • StreamGeometry - Microsoft Docs

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

converting-html-css-to-wpf-xaml

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

publishing-wpf-apps

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

managing-styles-resourcedictionary

No summary provided by upstream source.

Repository SourceNeeds Review