Shapes & Brushes

Implemented Shapes

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

Notes:

  1. On Wasm, the stroke thickness is applied before the stretching scaling. It means the stroke thickness will follow the scaling. On all other platforms (and on UWP), the stroke thickness is applied after the stretching.

    To get a fully reliable shape on all platforms, you should only use the fill part of the shape.

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

  2. Stretching modes UniformToFill and Uniform will behave like Fill for ellipses.

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

  4. Rectangles on Android and iOS 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 (2) 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 (3) Documentation

Notes:

  1. See next section for fill & stroke brushes limitations.
  2. Not working for Ellipse, always behaving like Stretch.Fill.
  3. StrokeThickness on Wasm will scale with Stretch.

Implemented Brushes / Properties

Brush Android iOS macOS Wasm
AcrylicBrush Yes (3) Yes (3) Yes (3) Yes Documentation
ImageBrush Yes (1) Yes (1) No Documentation
LinearGradientBrush Yes (2) Yes (2) Yes Yes Documentation
RadialGradientBrush (WinUI 2.4+) Yes Yes Yes Yes
RevealBrush (WinUI 2.0+) No No No No
SolidColorBrush Yes Yes Yes Yes Documentation
WebViewBrush No No No No Documentation
XamlCompositionBrushBase No No No No 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 Froreground.
  2. On Android & 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 except GTK and WPF. 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)