Shadows
There are two main ways to add shadows to your elements:
- 1.
- 2.
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 this documentation 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.<StackLayout xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"></StackLayout>
<StackLayout xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core">
<BoxView Color="Yellow"
HeightRequest="256"
WidthRequest="256"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
Finally, let's add the drop shadow effect with some special properties:
<StackLayout xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core" >
<BoxView Color="Yellow"
HeightRequest="256"
WidthRequest="256"
HorizontalOptions="Center"
VerticalOptions="Center"
ios:VisualElement.IsShadowEnabled="true"
ios:VisualElement.ShadowColor="Blue"
ios:VisualElement.ShadowOpacity="0.75"
ios:VisualElement.ShadowRadius="12" />
</StackLayout>
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.Last modified 30d ago