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:

<Rock:ContainedCard HeightRequest="300"
    BackgroundColor="Transparent"
    HasShadow="False">
    <Label TextColor="White"
        Text="Ultra Thin Blurred Card" />
    <Rock:ContainedCard.Effects>
        <Rock:BlurEffect BlurStyle="UltraThin" />
    </Rock:ContainedCard.Effects>
</Rock:ContainedCard>

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

<Grid VerticalOptions="FillAndExpand">
    <StackLayout VerticalOptions="FillAndExpand">
        <Rock:Image Source="https://server.com/photo.jpg" />
    </StackLayout>
    
    <ContentView VerticalOptions="Start">
        <ContentView.Effects>
            <Rock:BlurEffect BlurStyle="UltraThin" />
            
            <Rock:SafeAreaPaddingEffect Edges="Top" />
        </ContentView.Effects>
    </ContentView>
</Grid>

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:

• Light
• Dark
• Thin
• ThinDark
• UltraThin
• UltraThinDark
• Thick
• ThickDark
• Chrome
• ChromeLight
• ChromeDark
• System (default)
• SystemDark
• ExtraLight
• ExtraDark

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