100% Free Forever
AI-Powered Learning
Industry Expert Content
Certificates & Badges
Learn At Your Own Pace
.NET

Shapes and Brushes

Learn how WPF's Shape classes (Rectangle, Ellipse, Path, Polygon) draw vector graphics and how Brush types paint their interiors and outlines.

Graphics and AnimationBeginner8 min readJul 10, 2026
Analogies

Shapes and Brushes in WPF

WPF ships a small family of Shape classes — Rectangle, Ellipse, Line, Polyline, Polygon, and Path — that render vector graphics directly inside the visual tree, unlike bitmap-based drawing in WinForms GDI+. Because a Shape derives from FrameworkElement, it participates fully in layout, data binding, styling, and animation, so a Rectangle can be resized by its parent Grid, bound to a ViewModel property, and animated exactly like a Button. A Brush, separately, is the object that actually paints a region: shapes use Fill for their interior and Stroke for their outline, and both properties accept any Brush subtype.

🏏

Cricket analogy: Just as a scorer marks the field diagram with distinct zones for the boundary rope and the pitch rather than freehand sketching each match, WPF's Shape classes give you named, reusable primitives like Rectangle and Ellipse instead of raw pixel drawing.

The Shape Class Hierarchy

All shapes derive from the abstract Shape class, which exposes Fill, Stroke, StrokeThickness, StrokeDashArray, and StrokeLineJoin. Rectangle and Ellipse take Width/Height plus optional RadiusX/RadiusY for rounded corners; Line takes X1/Y1/X2/Y2 coordinates; Polygon and Polyline take a Points collection, with Polygon automatically closing the last point back to the first. Path is the most powerful member because its Data property accepts any Geometry object — including combinations of geometries via GeometryGroup or CombinedGeometry — so a Path can render arbitrary curves, arcs, and Bezier segments that the simpler shapes cannot express.

🏏

Cricket analogy: Much like a team roster where every player shares base attributes such as jersey number and batting average but specialists like an opening batsman or a death-over bowler add unique skills, every Shape shares Fill and Stroke while Path adds arbitrary Geometry.

xml
<Canvas Width="300" Height="200">
  <Rectangle Width="120" Height="60" RadiusX="8" RadiusY="8"
             Fill="SteelBlue" Stroke="Black" StrokeThickness="2"
             Canvas.Left="20" Canvas.Top="20" />

  <Ellipse Width="80" Height="80" Stroke="DarkRed" StrokeThickness="3"
           Canvas.Left="180" Canvas.Top="20">
    <Ellipse.Fill>
      <RadialGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="OrangeRed" Offset="1.0" />
      </RadialGradientBrush>
    </Ellipse.Fill>
  </Ellipse>

  <Path Stroke="Green" StrokeThickness="2" Fill="LightGreen"
        Data="M 20,150 C 60,100 140,200 180,150 L 180,180 L 20,180 Z" />
</Canvas>

Brush Types

SolidColorBrush paints a single flat Color and is the default for most Fill and Stroke assignments. LinearGradientBrush interpolates colors along a StartPoint/EndPoint axis defined in relative (0-1) or absolute coordinates using GradientStop children, while RadialGradientBrush interpolates outward from a center and focus point, useful for glow or spotlight effects. ImageBrush stretches or tiles a bitmap into the fill region using Stretch and TileMode, and VisualBrush is the most flexible of all because it paints with a live snapshot of any WPF Visual — including another control — which is how WPF implements effects like reflections and magnifiers.

🏏

Cricket analogy: This is like choosing between a single solid team jersey color for a domestic side versus a gradient sponsor design for an IPL franchise kit, where SolidColorBrush is the plain jersey and LinearGradientBrush is the sponsored gradient kit.

ImageBrush and VisualBrush both consume a Viewport and Viewbox pair that control how their source content is scaled and tiled into the target region, and TileMode set to Tile or FlipXY produces repeating pattern fills such as a checkerboard or wallpaper texture. VisualBrush is commonly used to create a live reflection under a control by rendering a ScaleTransform-flipped copy of the source Visual with decreasing Opacity, and it is also the backbone of WPF's magnifier and thumbnail preview scenarios because the brush re-renders whenever its source Visual changes.

🏏

Cricket analogy: Like a stadium's big screen showing a live mirrored replay of the batsman's shot beneath the actual footage, VisualBrush creates a live flipped reflection copy of a control the same way that replay mirrors the live action.

Brushes are Freezable objects. Calling brush.Freeze() (or letting WPF freeze it automatically when possible) makes the brush immutable and shareable across the visual tree, which improves rendering performance and reduces memory because WPF can skip change-notification tracking on a frozen resource.

Geometry and Path Data

The Data property of a Path accepts either a Geometry object graph (LineGeometry, RectangleGeometry, EllipseGeometry, PathGeometry) or a compact mini-language string like "M 20,150 C 60,100 140,200 180,150" where M moves the pen, L draws a line, C draws a cubic Bezier, and Z closes the figure. PathGeometry offers a rich object model with PathFigure and PathSegment collections that supports data binding and animation of individual points, whereas StreamGeometry is a lighter, write-once, non-bindable alternative built with a StreamGeometryContext that renders faster and consumes less memory for static, complex artwork such as icon sets.

🏏

Cricket analogy: This is like the difference between a detailed, editable scorecard app that lets you tweak every ball retroactively versus a printed final scorecard you can only read, where PathGeometry is the editable app and StreamGeometry is the fixed printout.

A common mistake is setting Fill on an open shape like Polyline or a Path whose figure is not closed — WPF will still fill it by implicitly connecting the last point to the first, which often produces an unintended triangular or wedge-shaped fill. If you only want an outline, set Fill to null (or omit it) and rely on Stroke alone.

  • Shape classes (Rectangle, Ellipse, Line, Polygon, Polyline, Path) derive from FrameworkElement and fully participate in layout, binding, and animation.
  • Fill paints the interior and Stroke paints the outline; both accept any Brush subtype.
  • Path is the most flexible shape because its Data property accepts arbitrary Geometry, including Bezier curves and arcs via the XAML mini-language.
  • SolidColorBrush, LinearGradientBrush, RadialGradientBrush, ImageBrush, and VisualBrush cover flat colors, gradients, bitmap fills, and live-content reflections respectively.
  • VisualBrush paints with a live snapshot of any Visual, enabling reflections, magnifiers, and thumbnail previews.
  • Freezing a Brush with Freeze() improves rendering performance by making it immutable and shareable.
  • StreamGeometry is a lighter, non-bindable alternative to PathGeometry, best for static, complex, high-performance artwork.

Practice what you learned

Was this page helpful?

Topics covered

#NET#WPFWindowsPresentationFoundationStudyNotes#MicrosoftTechnologies#ShapesAndBrushes#Shapes#Brushes#WPF#Shape#StudyNotes#SkillVeris