Shapes & Brushes

Implemented Shapes

Shape	Android	iOS	macOS	Wasm (1)
Ellipse	Yes	Yes	Yes	Yes	Documentation
Line	Yes	Yes	Yes	Yes	Documentation
Path	Yes	Yes	Yes	Yes (2)	Documentation
Polygon	Yes	Yes	Yes	Yes	Documentation
Polyline	Yes	Yes	Yes	Yes	Documentation
Rectangle	Yes (3)	Yes (3)	Yes (3)	Yes	Documentation

Notes:

1. All shapes on Wasm platform (including Rectangle) are rendered as SVG elements.

2. On Wasm, only the Data= text format is implemented. On other platforms, you can use either the data or the geometries.

3. Rectangles on Android, iOS, and macOS are rendered as a simple border.

Implemented Shapes properties

Shape	Android	iOS	macOS	Wasm
Fill (1)	Yes	Yes		Yes	Documentation
GeometryTransform	No	No		No	Documentation
Stretch	Yes	Yes		Yes	Documentation
Stroke (1)	Yes	Yes		Yes	Documentation
StrokeDashArray	No	Yes		No	Documentation
StrokeDashCap	No	No		No	Documentation
StrokeDashOffset	No	No		No	Documentation
StrokeEndLineCap	No	No		No	Documentation
StrokeLineJoin	No	No		No	Documentation
StrokeMiterLimit	No	No		No	Documentation
StrokeStartLineCap	No	No		No	Documentation
StrokeThickness	Yes	Yes		Yes	Documentation

Notes:

1. See next section for fill & stroke brushes limitations.

Implemented Brushes / Properties

Brush	Android	iOS	macOS	Wasm	Skia Desktop
AcrylicBrush	Yes (3)	Yes (3)	Yes (3)	Yes	Yes	Documentation
ImageBrush	Yes (1)	Yes (1)		No	Yes	Documentation
LinearGradientBrush	Yes (2)	Yes (2)	Yes	Yes	Yes	Documentation
RadialGradientBrush (WinUI 2.4+)	Yes	Yes	Yes	Yes	Yes	Documentation
RevealBrush (WinUI 2.0+)	No	No	No	No	No	Documentation
SolidColorBrush	Yes	Yes	Yes	Yes	Yes	Documentation
XamlCompositionBrushBase	No	No	No	No	Yes	Documentation

Notes:

1. ImageBrush on Android & iOS can only be used as a Fill / Background brush; it is not supported for Stroke / BorderBrush properties and the image needs to be a local asset. They are not supported as text's Foreground.
2. On Android and iOS, gradient brushes (LinearGradientBrush & RadialGradientBrush) are only used as a Fill / Background brush.
3. On Android, iOS, and macOS AcrylicBrush has some limitations. Please see the following section for details.

AcrylicBrush

Uno Platform supports the Backdrop version of AcrylicBrush (blurring in-app content behind element) on all targets. In addition, on macOS we support the HostBackdrop acrylic (blurring content behind the app window).

The brush currently has an important limitation on Android, iOS, and macOS: it can be used only on elements which have no children. Eg., if you wanted to have an acrylic effect in the background of a Grid with child content, then you would add a Border with no inner child behind the other content in the Grid and set the acrylic background on the Border, rather than set it directly on the Grid:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    
    <!-- This border represents the background, 
        it covers the entire parent area -->
    <Border Grid.RowSpan="2">
        <Border.Background>
            <AcrylicBrush 
                AlwaysUseFallback="False" 
                TintColor="Red" 
                TintOpacity="0.8" />
        </Border.Background>
    </Border>
    
    <TextBox Text="Some input" />
    <Button Grid.Row="1">My content</Button>
</Grid>

Because many WinUI styles use AcrylicBrush on elements which violate this condition, we made the brush use solid fallback color by default on targets other than WASM. To enable the brush, you need to explicitly set the AlwaysUseFallback property to false:

<AcrylicBrush x:Key="MyAcrylicBrush" AlwaysUseFallback="False" ... />

Brushes Usages

Where you can use which brushes

Usage	SolidColorBrush	ImageBrush	GradientBrush
Background property (many controls/panels)	Yes	Yes (except on Wasm)	Yes
BorderBrush (Border, Panel)	Yes	No	Yes (Wasm only)
Foreground (TextBlock)	Yes	No	Yes (Wasm only)
Fill (Shapes)	Yes	Yes (except on Wasm)	Yes
Stroke (Shapes)	Yes	No	Yes (Wasm only)