Table of Contents

Class SkiaShape

Namespace
DrawnUi.Draw
Assembly
DrawnUi.Maui.dll

Extension of SkiaShape that adds bevel and emboss functionality

public class SkiaShape : SkiaLayout, INotifyPropertyChanged, IEffectControlProvider, IToolTipElement, IContextFlyoutElement, IAnimatable, IVisualElementController, IElementController, IView, ITransform, IElement, IVisualTreeElement, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISkiaGestureListener, IHasAfterEffects, ISkiaDisposable, ISkiaGridLayout, ISkiaLayout, ISkiaControl, IDrawnBase, ICanBeUpdatedWithContext, ICanBeUpdated, ILayoutInsideViewport, IInsideViewport, IVisibilityAware, IDisposable
Inheritance
SkiaShape
Implements
Derived
Inherited Members
Extension Methods

Remarks

SkiaShape can be used to create a wide variety of UI elements such as:

  • Buttons, cards, and panels with custom shapes and effects
  • Visual indicators, gauges, and progress bars
  • Custom decorative elements with shadows and gradients
  • Clipping containers for complex layouts
  • Path-based icons and vector graphics

Use properties like Type, CornerRadius, StrokeWidth, and BackgroundColor to customize appearance. For complex shapes, use PathData or Points properties to define custom geometries.

Fields

BevelProperty 

public static readonly BindableProperty BevelProperty

Field Value

BindableProperty

BevelTypeProperty 

public static readonly BindableProperty BevelTypeProperty

Field Value

BindableProperty

ClipBackgroundColorProperty 

public static readonly BindableProperty ClipBackgroundColorProperty

Field Value

BindableProperty

CornerRadiusProperty 

public static readonly BindableProperty CornerRadiusProperty

Field Value

BindableProperty

PathDataProperty 

public static readonly BindableProperty PathDataProperty

Field Value

BindableProperty

PointsProperty 

public static readonly BindableProperty PointsProperty

Field Value

BindableProperty

ShadowsProperty 

public static readonly BindableProperty ShadowsProperty

Field Value

BindableProperty

SmoothPointsProperty 

public static readonly BindableProperty SmoothPointsProperty

Field Value

BindableProperty

StrokeBlendModeProperty 

public static readonly BindableProperty StrokeBlendModeProperty

Field Value

BindableProperty

StrokeCapProperty 

public static readonly BindableProperty StrokeCapProperty

Field Value

BindableProperty

StrokeColorProperty 

public static readonly BindableProperty StrokeColorProperty

Field Value

BindableProperty

StrokeGradientProperty 

public static readonly BindableProperty StrokeGradientProperty

Field Value

BindableProperty

StrokePathProperty 

public static readonly BindableProperty StrokePathProperty

Field Value

BindableProperty

StrokeWidthProperty 

public static readonly BindableProperty StrokeWidthProperty

Field Value

BindableProperty

TypeProperty 

public static readonly BindableProperty TypeProperty

Field Value

BindableProperty

Properties

Bevel

Gets or sets the bevel configuration for the shape.

public SkiaBevel Bevel { get; set; }

Property Value

SkiaBevel

Remarks

This property allows configuring the appearance of the bevel or emboss effect, including depth, light color, shadow color, and opacity.

Example XAML usage:

<draw:SkiaShape BevelType="Bevel">
  <draw:SkiaShape.Bevel>
    <draw:SkiaBevel Depth="3" LightColor="White" ShadowColor="Gray" Opacity="0.7" />
  </draw:SkiaShape.Bevel>
</draw:SkiaShape>

Must be used with the BevelType property set to Bevel or Emboss.

BevelType

Gets or sets the type of bevel effect to apply to the shape.

public BevelType BevelType { get; set; }

Property Value

BevelType

Remarks

  • None: No bevel effect is applied
  • Bevel: Creates a raised effect with light on top/left and shadow on bottom/right
  • Emboss: Creates an inset effect with shadow on top/left and light on bottom/right

This property must be used with the Bevel property for the effect to be visible.

BorderWithPixels 

public double BorderWithPixels { get; }

Property Value

double

ClipBackgroundColor

Gets or sets whether the background color is clipped out, allowing transparent areas with shadows.

public bool ClipBackgroundColor { get; set; }

Property Value

bool

Remarks

When set to true, the shape's background color will be clipped out, creating a "hollow" shape that shows content beneath it while still displaying any shadows applied to the shape.

This is particularly useful for:

  • Creating floating shadows without a visible shape
  • Adding depth effects while preserving transparency
  • Creating cutout effects where only the shape's outline and shadow are visible

Example use case: A floating card shadow effect where the card itself is transparent.

CornerRadius

Gets or sets the corner radius for the shape when Type is Rectangle.

[TypeConverter(typeof(CornerRadiusTypeConverter))]
public CornerRadius CornerRadius { get; set; }

Property Value

CornerRadius

Remarks

You can specify different corner radii for each corner using the format "topLeft,topRight,bottomLeft,bottomRight". For equal corner radius on all corners, just provide a single value.

In XAML, this can be set using string values that will be automatically converted:

  • Single value: "10" (all corners have radius 10)
  • Multiple values: "10,20,15,5" (each corner has its own radius)

DrawPath

Gets or sets the parsed SKPath object created from the PathData property.

protected SKPath DrawPath { get; set; }

Property Value

SKPath

Remarks

This field holds the SkiaSharp path object that is created by parsing the PathData string. It is automatically created when PathData is set and Type is ShapeType.Path. The path is used for both rendering and hit-testing.

The path is stored in its original form and is scaled/transformed during rendering to fit the shape's bounds.

DrawPathAligned 

public SKPath DrawPathAligned { get; }

Property Value

SKPath

DrawPathResized 

public SKPath DrawPathResized { get; }

Property Value

SKPath

DrawPathShape 

protected SKPath DrawPathShape { get; set; }

Property Value

SKPath

DrawRoundedRect

Gets or sets the rounded rectangle used for rendering when Type is Rectangle with CornerRadius.

protected SKRoundRect DrawRoundedRect { get; set; }

Property Value

SKRoundRect

Remarks

This object is created and reused during rendering to represent a rectangle with rounded corners. It is automatically configured with the appropriate dimensions and corner radii based on the shape's properties.

The object is created on demand and may be null until needed for rendering.

MeasuredStrokeAwareChildrenSize

Available size for children content, accounting for padding and stroke

public SKRect MeasuredStrokeAwareChildrenSize { get; protected set; }

Property Value

SKRect

MeasuredStrokeAwareClipSize

Area to use for clipping inside stroke

public SKRect MeasuredStrokeAwareClipSize { get; protected set; }

Property Value

SKRect

MeasuredStrokeAwareSize

Size we must use to draw stroke to fit inside available destination

public SKRect MeasuredStrokeAwareSize { get; protected set; }

Property Value

SKRect

PathData

For Type = Path, use the path markup syntax

public string PathData { get; set; }

Property Value

string

Remarks

This property is used when Type is set to ShapeType.Path. The string should follow standard SVG path syntax, for example: "M0,0L15.825011,8.0009766 31.650999,15.997986 15.825011,23.998993 0,32 0,15.997986z"

Common path commands:

  • M: MoveTo - Starts a new sub-path (x,y)
  • L: LineTo - Draws a line from current position
  • H: Horizontal line - Draws a horizontal line
  • V: Vertical line - Draws a vertical line
  • C: Curve - Cubic Bezier curve
  • Q: Quadratic curve - Quadratic Bezier curve
  • Z: Close path - Closes the current sub-path

The path will be automatically scaled to fit the control dimensions.

Points 

[TypeConverter(typeof(SkiaPointCollectionConverter))]
public IList<SkiaPoint> Points { get; set; }

Property Value

IList<SkiaPoint>

PolygonStar 

public static List<SkiaPoint> PolygonStar { get; }

Property Value

List<SkiaPoint>

RenderingPaint 

protected SKPaint RenderingPaint { get; set; }

Property Value

SKPaint

Shadows 

public IList<SkiaShadow> Shadows { get; set; }

Property Value

IList<SkiaShadow>

SmoothPoints

Gets or sets the smoothness level for Line and Polygon shapes.

public float SmoothPoints { get; set; }

Property Value

float

Remarks

This property controls how points are connected when drawing Line and Polygon shapes:

  • 0.0 (default): No smoothing, points are connected with straight lines
  • 0.1 to 0.3: Slight smoothing, good for subtle rounding of corners
  • 0.4 to 0.7: Moderate smoothing, creates natural-looking curves
  • 0.8 to 1.0: Maximum smoothing, creates very rounded curves

When SmoothPoints is greater than 0, quadratic Bezier curves are used to connect points instead of straight lines. This results in smoother, more organic shapes.

The smoothing effect works best with points that form a sequential path and may not produce expected results with arbitrary point configurations.

StrokeBlendMode

Gets or sets the blend mode used when rendering the stroke.

public SKBlendMode StrokeBlendMode { get; set; }

Property Value

SKBlendMode

Remarks

Blend modes control how the stroke color combines with the underlying content:

  • SrcOver (default): Normal alpha blending
  • Multiply: Multiplies colors, resulting in darker colors
  • Screen: Opposite of multiply, resulting in lighter colors
  • Plus: Adds colors together, creating additive blending
  • Difference: Subtracts colors, creating inverted effects
  • Overlay: Combines multiply and screen, enhancing contrast
  • HardLight: Similar to overlay but with stronger effect
  • Darken: Selects the darker of the source and destination colors
  • Lighten: Selects the lighter of the source and destination colors
  • Clear: Makes the destination transparent

Creative uses include glow effects, neon strokes, or color inversion at edges.

StrokeCap

Gets or sets the cap style for stroke line ends and the join style for corners.

public SKStrokeCap StrokeCap { get; set; }

Property Value

SKStrokeCap

Remarks

Available cap styles:

  • Round (default): Rounds the ends of lines and smooths the corners
  • Butt: Creates flat ends exactly at the end points, without extension
  • Square: Creates flat ends that extend beyond the end points by half the stroke width

This property affects:

  • How line segments are joined at corners (as a StrokeJoin)
  • How lines end at termination points
  • The appearance of dashed lines when StrokePath is used

For Line and Path shapes with sharp angles, Round provides the smoothest appearance.

StrokeColor

Gets or sets the color of the shape's outline stroke.

public Color StrokeColor { get; set; }

Property Value

Color

Remarks

  • Default is Transparent (no visible stroke)
  • Must be used with a non-zero StrokeWidth to make the stroke visible
  • Can use MAUI Color resources and predefined colors
  • Can be combined with StrokeGradient for gradient stroke effects
  • Can be animated for dynamic effects

The stroke is rendered on top of the fill and any child elements.

StrokeGradient

Gets or sets the gradient to be applied to the shape's stroke.

public SkiaGradient StrokeGradient { get; set; }

Property Value

SkiaGradient

Remarks

When set, this gradient will be used for the stroke color instead of the solid StrokeColor. The gradient can be defined with multiple colors, stops, and a gradient direction.

Example XAML usage:

<draw:SkiaShape>
  <draw:SkiaShape.StrokeGradient>
    <draw:SkiaGradient StartColor="Blue" EndColor="Green" Type="Linear" />
  </draw:SkiaShape.StrokeGradient>
</draw:SkiaShape>

The StrokeWidth property must be set to a non-zero value for the gradient to be visible.

StrokePath

Gets or sets the dash pattern for the shape's stroke.

[TypeConverter(typeof(StringToDoubleArrayTypeConverter))]
public double[] StrokePath { get; set; }

Property Value

double[]

Remarks

Allows for creating dashed or dotted lines by specifying an array of numbers that define the pattern of dashes and gaps:

  • A pattern like [3,1] creates dashes of length 3 followed by gaps of length 1
  • [5,2,1,2] creates a dash of 5, gap of 2, dash of 1, gap of 2, then repeats
  • Empty or null array means a solid line with no dashes

In XAML, this property can be set with a comma-separated list of values: StrokePath="3,1" or StrokePath="5,2,1,2"

StrokeWidth

Gets or sets the width of the stroke (outline) in device-independent units. If you set it negative it will be in PIXELS instead of point.

public double StrokeWidth { get; set; }

Property Value

double

Remarks

  • A value of 0 (default) means no stroke will be drawn
  • The stroke is drawn centered on the shape's path
  • For thin lines (e.g., single-pixel), use values around 1-2
  • For thicker borders, use larger values
  • Must be combined with a non-transparent StrokeColor to be visible
  • Affects the layout calculations to preserve the interior area of the shape

The stroke is always drawn on top of the shape's fill and any child elements.

Type

Gets or sets the type of shape to render.

public ShapeType Type { get; set; }

Property Value

ShapeType

Remarks

Available shape types:

  • Rectangle: A rectangle with optional corner radius (default)
  • Circle: A perfect circle that fits within the bounds
  • Ellipse: An oval shape that fills the bounds
  • Path: A custom shape defined by the PathData property
  • Polygon: A multi-point shape defined by the Points collection
  • Line: An open path connecting points in the Points collection
  • Arc: A curved segment defined by Value1 (start angle) and Value2 (sweep angle)

Changing the Type property may require setting additional properties for proper rendering, such as PathData for Path type or Points for Polygon/Line types.

WillStroke 

public virtual bool WillStroke { get; }

Property Value

bool

Methods

AddPaintArguments(DrawingContext) 

public override DrawingContext AddPaintArguments(DrawingContext ctx)

Parameters

ctx DrawingContext

Returns

DrawingContext

ApplyBindingContext()

https://github.com/taublast/DrawnUi/issues/92#issuecomment-2408805077

public override void ApplyBindingContext()

Arrange(SKRect, float, float, float)

destination in PIXELS, requests in UNITS. resulting Destination prop will be filed in PIXELS. DrawUsingRenderObject wil call this among others..

public override void Arrange(SKRect destination, float widthRequest, float heightRequest, float scale)

Parameters

destination SKRect

PIXELS

widthRequest float

UNITS

heightRequest float

UNITS

scale float

CalculateClipSizeForStroke(SKRect, float) 

protected SKRect CalculateClipSizeForStroke(SKRect destination, float scale)

Parameters

destination SKRect
scale float

Returns

SKRect

CalculateContentSizeForStroke(SKRect, float) 

protected SKRect CalculateContentSizeForStroke(SKRect destination, float scale)

Parameters

destination SKRect
scale float

Returns

SKRect

CalculateShapeSizeForStroke(SKRect, float) 

protected SKRect CalculateShapeSizeForStroke(SKRect destination, float scale)

Parameters

destination SKRect
scale float

Returns

SKRect

CalculateSizeForStroke(SKRect, float) 

protected void CalculateSizeForStroke(SKRect destination, float scale)

Parameters

destination SKRect
scale float

CalculateSizeForStrokeFromContent(SKRect, float) 

protected SKRect CalculateSizeForStrokeFromContent(SKRect destination, float scale)

Parameters

destination SKRect
scale float

Returns

SKRect

CreateClip(object, bool, SKPath)

Create this control clip for painting content. Pass arguments if you want to use some time-frozen data for painting at any time from any thread..

public override SKPath CreateClip(object arguments, bool usePosition, SKPath path = null)

Parameters

arguments object
usePosition bool
path SKPath

Returns

SKPath

CreateStarPoints(int, double) 

public static List<SkiaPoint> CreateStarPoints(int numberOfPoints, double innerRadiusRatio = 0.5)

Parameters

numberOfPoints int
innerRadiusRatio double

Returns

List<SkiaPoint>

CreateStarPointsCrossed(int) 

public static List<SkiaPoint> CreateStarPointsCrossed(int numberOfPoints)

Parameters

numberOfPoints int

Returns

List<SkiaPoint>

GetCompensatedStrokeWidth(float, float)

Calculates compensated stroke width for curved shapes to fix antialiasing at rounded corners

protected float GetCompensatedStrokeWidth(float originalStrokeWidth, float scale)

Parameters

originalStrokeWidth float

The original stroke width in pixels

scale float

The current rendering scale

Returns

float

Adjusted stroke width that compensates for antialiasing differences

GetContentSizeForAutosizeInPixels()

Override this if you need to adjust the measured ContentSize for the parent to adapt to it. For example SkiaShape overrides this to expand by adding the needed size for stroke.

protected override SKSize GetContentSizeForAutosizeInPixels()

Returns

SKSize

GetCorrectedBackgroundRadii(SKPoint[], SKRect, SKRect)

Calculates corrected corner radii for the background rectangle to maintain visual consistency with the stroke

protected SKPoint[] GetCorrectedBackgroundRadii(SKPoint[] originalRadii, SKRect strokeRect, SKRect backgroundRect)

Parameters

originalRadii SKPoint[]

The original radii used for the stroke

strokeRect SKRect

The rectangle used for drawing the stroke

backgroundRect SKRect

The contracted rectangle used for drawing the background

Returns

SKPoint[]

Corrected radii array for the background

GetDashArray(double[], float) 

protected static float[] GetDashArray(double[] input, float scale)

Parameters

input double[]
scale float

Returns

float[]

GetHalfStroke(float) 

protected float GetHalfStroke(float scale)

Parameters

scale float

Returns

float

GetInflationForStroke(float) 

protected float GetInflationForStroke(float halfStroke)

Parameters

halfStroke float

Returns

float

GetSmallUnderStroke(float) 

protected float GetSmallUnderStroke(float scale)

Parameters

scale float

Returns

float

GetStrokePixels(float) 

protected float GetStrokePixels(float scale)

Parameters

scale float

Returns

float

MapStrokeCapToStrokeJoin(SKStrokeCap) 

protected virtual SKStrokeJoin MapStrokeCapToStrokeJoin(SKStrokeCap strokeCap)

Parameters

strokeCap SKStrokeCap

Returns

SKStrokeJoin

MeasureContent(IEnumerable<SkiaControl>, SKRect, float)

Measuring as absolute layout for passed children

protected override ScaledSize MeasureContent(IEnumerable<SkiaControl> children, SKRect rectForChildrenPixels, float scale)

Parameters

children IEnumerable<SkiaControl>
rectForChildrenPixels SKRect
scale float

Returns

ScaledSize

OnDisposing()

Base performs some cleanup actions with Superview

public override void OnDisposing()

Paint(DrawingContext)

This is the main drawing routine you should override to draw something. Base one paints background color inside DrawingRect that was defined by Arrange inside base.Draw. Pass arguments if you want to use some time-frozen data for painting at any time from any thread..

protected override void Paint(DrawingContext ctx)

Parameters

ctx DrawingContext

PaintBackground(SkiaDrawingContext, SKRect, SKPoint[], float, SKPaint) 

protected virtual void PaintBackground(SkiaDrawingContext ctx, SKRect outRect, SKPoint[] radii, float minSize, SKPaint paint)

Parameters

ctx SkiaDrawingContext
outRect SKRect
radii SKPoint[]
minSize float
paint SKPaint

PaintBevelEffect(SkiaDrawingContext, SKRect, SKPoint[], float)

Paints the bevel or emboss effect for the shape

protected virtual void PaintBevelEffect(SkiaDrawingContext ctx, SKRect outRect, SKPoint[] radii, float depth)

Parameters

ctx SkiaDrawingContext
outRect SKRect
radii SKPoint[]
depth float

PaintWithShadows(DrawingContext, Action) 

protected override void PaintWithShadows(DrawingContext ctx, Action render)

Parameters

ctx DrawingContext
render Action

SetupType() 

public virtual void SetupType()
Edit this page