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

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 static readonly BindableProperty StrokeCapProperty

Field Value

BindableProperty

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.

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 

public CornerRadius CornerRadius { get; set; }

Property Value

CornerRadius

DrawPath 

protected SKPath DrawPath { get; set; }

Property Value

SKPath

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 

protected SKRoundRect DrawRoundedRect { get; set; }

Property Value

SKRoundRect

MeasuredStrokeAwareChildrenSize 

public SKRect MeasuredStrokeAwareChildrenSize { get; protected set; }

Property Value

SKRect

MeasuredStrokeAwareClipSize 

public SKRect MeasuredStrokeAwareClipSize { get; protected set; }

Property Value

SKRect

MeasuredStrokeAwareSize 

public SKRect MeasuredStrokeAwareSize { get; protected set; }

Property Value

SKRect

PathData 

public string PathData { get; set; }

Property Value

string

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 

public Color StrokeColor { get; set; }

Property Value

Color

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 

public double StrokeWidth { get; set; }

Property Value

double

Type 

public ShapeType Type { get; set; }

Property Value

ShapeType

WillStroke 

public virtual bool WillStroke { get; }

Property Value

bool

Methods

AddPaintArguments(DrawingContext) 

public override DrawingContext AddPaintArguments(DrawingContext ctx)

Parameters

ctx DrawingContext

Returns

DrawingContext

AlignResizedPath(SKRect) 

protected virtual void AlignResizedPath(SKRect outRect)

Parameters

outRect SKRect

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

CreateScaledRadii(float) 

protected virtual SKPoint[] CreateScaledRadii(float scale)

Parameters

scale float

Returns

SKPoint[]

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>

DisposeSharedShapeResources() 

protected void DisposeSharedShapeResources()

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) 

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

Parameters

originalRadii SKPoint[]
strokeRect SKRect
backgroundRect SKRect

Returns

SKPoint[]

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

TryCreateBasicClip(object, bool, SKPath) 

protected virtual bool TryCreateBasicClip(object arguments, bool usePosition, SKPath path)

Parameters

arguments object
usePosition bool
path SKPath

Returns

bool

TryPaintBasicShape(SKCanvas, SKRect, SKPoint[], float, SKPaint) 

protected virtual bool TryPaintBasicShape(SKCanvas canvas, SKRect rect, SKPoint[] radii, float minSize, SKPaint paint)

Parameters

canvas SKCanvas
rect SKRect
radii SKPoint[]
minSize float
paint SKPaint

Returns

bool
Edit this page