ImageEditor | Shapes

Three shape tools – Rectangle, Ellipse and Circle – drag corner to corner onto the image. Each finished shape is one undoable action, exactly like a stroke or a line, and is replayed at export resolution rather than baked into a preview-sized bitmap.

The reason a shape is not just another stroke is the fill. A shape has two independent looks:

	Comes from	Typical use
Border	DrawStrokeColor + DrawStrokeWidth – the same ink settings the draw, line and arrow tools use	The outline of a highlight box
Fill	ShapeFillColor (with its own opacity), or nothing at all	A translucent tint, or an opaque redaction block

Sharing the ink settings for the border is deliberate: switching from the arrow tool to the rectangle tool keeps the colour and weight you were already annotating with, and only the interior is new.

Basic usage

<shiny:ImageEditor Source="{Binding ImageSource}"
                   AllowRectangle="True"
                   AllowEllipse="True"
                   AllowCircle="True"
                   DrawStrokeColor="Red"
                   DrawStrokeWidth="4"
                   ShapeFillColor="{Binding ShapeFillColor}"
                   ShowShapeFillPicker="True" />

@* Blazor -- the fill is a #rrggbb string, and its alpha rides in ShapeFillOpacity
   because <input type="color"> cannot express one *@
<ImageEditor Source="@url"
             AllowRectangle="true"
             AllowEllipse="true"
             AllowCircle="true"
             DrawStrokeColor="#ff0000"
             DrawStrokeWidth="4"
             ShapeFillColor="#ffcc00"
             ShapeFillOpacity="0.3" />

Fill or no fill

ShapeFillColor of null – the default – draws the outline only, which is what you want over a photograph. Set a colour and the interior is painted:

// Highlight box: translucent fill, contrasting border
editor.CurrentToolMode = ImageEditorToolMode.Rectangle;
editor.ShapeFillColor = Colors.Yellow.WithAlpha(0.3f);
editor.DrawStrokeColor = Colors.Yellow;

// Redaction block: opaque fill, same-colour border
editor.ShapeFillColor = Colors.Black;
editor.DrawStrokeColor = Colors.Black;

The default toolbar carries the same two decisions as a swatch and a toggle: while a shape tool is active, the options row gains a fill swatch and a fill on/off button beside the border swatch and the pen weights. Turning fill off keeps the colour, so turning it back on restores what you picked rather than resetting to white. Hide the pair with ShowShapeFillPicker="False" when the fill is driven from your own UI.

Alpha reaches the fill differently on each host, because the platform pickers differ:

• MAUI – the fill’s ColorPickerButton shows its opacity slider, so the alpha lives in the Color itself.
• Blazor – <input type="color"> has no alpha channel, so the toolbar puts an opacity slider next to the swatch and the parameter pair is ShapeFillColor + ShapeFillOpacity (0-1).

Circles and squares

The circle tool constrains the drag so width and height match, taking the smaller of the two extents – never the larger, so the shape can never escape the bounds the drag was already clamped to. On Blazor, holding Shift applies the same constraint to the rectangle and ellipse tools, and it is read live: take or release Shift mid-drag and the shape follows.

A circle is stored and rendered as an ellipse in a square box. If a later crop changes the image’s aspect ratio, that box stretches with everything else on the image – the same way a freehand stroke does. Crop first, annotate second.

Properties

Property	Type	Default	Description
AllowRectangle	bool	true	Enable the rectangle tool and its toolbar button
AllowEllipse	bool	true	Enable the ellipse tool and its toolbar button
AllowCircle	bool	true	Enable the circle tool and its toolbar button
ShapeFillColor	Color? (MAUI) / string? (Blazor)	null	Shape interior; null draws the outline only
ShapeFillOpacity	double	0.35	Alpha for the fill. Blazor only – MAUI carries it in the Color
ShowShapeFillPicker	bool	true	Fill swatch, opacity and on/off toggle in the options row
DrawStrokeColor	Color / string	White	Border colour, shared with the ink tools
DrawStrokeWidth	double	3	Border width, shared with the ink tools. 0 leaves the shape unstroked

Commands

Command	Description
RectangleCommand	Toggle the rectangle tool on/off
EllipseCommand	Toggle the ellipse tool on/off
CircleCommand	Toggle the circle tool on/off

On Blazor, drive the same tools with SetModeAsync("rect"), SetModeAsync("ellipse") and SetModeAsync("circle"), and SetModeAsync("none") to return to Move.