Shapes & Brushes

Implemented Shapes

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

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" ... />

AcrylicBrush rendering on Skia

On Skia targets, Uno Platform provides two rendering implementations for AcrylicBrush:

• CompositionEffectBrush-based: An implementation that goes through the full composition effect graph (backdrop, blur, luminosity blend, tint blend, noise), matching WinUI's rendering pipeline more closely at the cost of performance.
• Optimized: A Skia-native implementation that performs downscaled blurring for better performance. This produces visually similar but not pixel-identical output compared to CompositionEffectBrush implementation.

By default, the CompositionEffectBrush implementation is used. To opt an individual AcrylicBrush into the optimized path, use the AcrylicBrushExtensions.UseCompositionEffectBrush attached property:

<Page xmlns:media="using:Microsoft.UI.Xaml.Media">
    <Border>
        <Border.Background>
            <AcrylicBrush
                media:AcrylicBrushExtensions.UseCompositionEffectBrush="False"
                TintColor="#2E86C1"
                TintOpacity="0.8" />
        </Border.Background>
    </Border>
</Page>

Or in C#:

var brush = new AcrylicBrush { TintColor = Colors.Blue, TintOpacity = 0.8 };
AcrylicBrushExtensions.SetUseCompositionEffectBrush(brush, false);

This property has no effect on non-Skia targets.

Brushes Usages

Where you can use which brushes

Gradient border brush limitations on WASM and iOS

There are limitations to support for gradient border brushes on some targets. Currently these are:

• WebAssembly - gradient borders cannot be applied properly on an element which uses CornerRadius
• iOS/macOS - gradient borders cannot be applied reliably when RelativeTransform is applied on it

If these conditions apply, the border will instead be rendered using SolidColorBrush provided by the FallbackColor property.

As default WinUI Fluent styles are using ElevationBorder brushes in many places, so we created a presenter that provides a "fake" gradient for these cases - Uno.UI.Controls.FauxGradientBorderPresenter. For custom styles we suggest you provide a custom "layered" approach that simulates the border, as this presenter is specifically built to support WinUI style-specific scenarios where:

• Exactly two gradient stops are present
• FallbackColor of the brush is equal to the "major" gradient stop
• The brush is applied "vertical" - so the "minor" stop is either on top or on the bottom of the control