Effects
An effect is something that is applied to element in XAML to change it's default appearance or behavior. Usually this is something that is platform specific, though not always.

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

Property
Type
Description
Edges
SafeAreaEdge
The edges that should have padding applied to them. Defaults to All.

Safe Area Edge

Value
Description
Left
The left padding edge will be modified so that the child content will be within the safe bounds.
Top
The top padding edge will be modified so that the child content will be within the safe bounds.
Right
The right padding edge will be modified so that the child content will be within the safe bounds.
Bottom
The bottom padding edge will be modified so that the child content will be within the safe bounds.
All
All padding edges will be modified so that the child content will be within the safe bounds.
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

1
<ContentView BackgroundColor="Blue">
2
<ContentView.Effects>
3
<Rock:SafeAreaPaddingEffect Edges="Top" />
4
</ContentView.Effects>
5
<Label Text="This label will vertically be below any unsafe area." />
6
</ContentView>
Copied!
Last modified 9mo ago
Copy link