Safe Area Padding Effect

Newer phones commonly have areas that are not considered safe for content. For example, a phone with a camera notch has an unsafe area around the notch because your content might not actually display. The same is true of devices with rounded screen corners.

However, sometimes things look strange if you just leave those spots blank. So often what you would do is draw your background in the unsafe area, which can be clipped, and then draw your foreground content in the safe area. So you might put a ContentView in the entire screen with it's background color set and then use Padding to inset your actual content from the edges.

This effect is what lets you make sure your content is displayed in the safe area. It does this by modifying the element it is attached to and setting the Padding property to a value that is safe for the current orientation of the screen.

Properties

Safe Area Edge

You may have noticed the mention of "padding" above. Because we are modifying the Padding property, this effect only works on layout type elements.

Example

<ContentView BackgroundColor="Blue">
    <ContentView.Effects>
        <Rock:SafeAreaPaddingEffect Edges="Top" />
    </ContentView.Effects>
    <Label Text="This label will vertically be below any unsafe area." />
</ContentView>

Last updated 2 years ago