iOS Shadows
Last updated
Last updated
There are two main ways to add shadows to your elements:
Frame shadows are thick and don't have any configuration settings. The StyledView does have an Elevation property that can modify the intensity, but it's still quite limited. Here's a way to add flexible shadows to your elements on iOS.
This shadow effect only works on iOS, meaning Android devices will have no shadow.
Using as a reference, here's how to set this up in Rock Mobile. First, you'll need to add an xmlns property to a parent element, in this example a StackLayout.
Let's say we want to add a within our content area. Here's how that might look:
Finally, let's add the drop shadow effect with some special properties:
After loading the page, there should be a yellow square with a blue shadow on iOS, whereas Android will only show a yellow square. You can modify these four VisualElement values to tailor the shadow to your liking.
You might try adding the xmlns to your Layout, but the shadow effect will only work on elements directly within your Layout and not your page. Unfortunately, you'll need to add this within every block that you want to use it in.