Developer Docs - Mobile Docs - Blur Effect

M v4.0

You may have noticed the setting to adjust the Navigation Bar Transparency and Blur (iOS), but why stop there? You can apply the same effects to almost any iOS visual element (cards, StackLayout, etc).

The effect can be applied to almost any visual element:

If a control provides a default background color, you must specify a background color of transparent. It's also recommended to remove all shadow effects.

The Blur Effect has many great uses and interestingly enough can be used in more places than one might imagine.

Above was a demonstration of how the Blur Effect can exclusively utilize the space defined by the SafeAreaPadding, even when there is no content within the visual element.

Properties

The following properties are available to the effect.

Blur Style

The blur style property is an enum, with the following accepted values:

Here's a video that shows most of the blur styles that can apply to a visual element: