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:
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 asSVG
elements.Stretching modes
UniformToFill
andUniform
will behave likeFill
for ellipses.On Wasm, only the
Data=
text format is implemented. On other platforms, you can use either the data or the geometries.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:
- See next section for fill & stroke brushes limitations.
- Not working for
Ellipse
, always behaving likeStretch.Fill
. 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:
ImageBrush
on Android & iOS can only be used as aFill
/Background
brush; it is not supported forStroke
/BorderBrush
properties and the image needs to be a local asset. They are not supported as text'sFroreground
.- On Android & iOS, gradient brushes (
LinearGradientBrush
&RadialGradientBrush
) are only used as aFill
/Background
brush. - 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) |