Customizing Xamarin.Forms Frame Shadow - Sun, Aug 18, 2019

The latest version of RedCorners.Forms introduces Frame2, an extended version of Xamarin.Forms.Frame which provides additional bindable properties to adjust the shadow radius (aka distance or elevation) and color:

To use Frame2, first you have to include the RedCorners.Forms namespace in your XAML:

xmlns:rf="clr-namespace:RedCorners.Forms;assembly=RedCorners.Forms"

Afterwards, you can use a rf:Frame2 tag and set its ShadowRadius and ShadowColor properties to adjust the shadows:

<rf:Frame2 
    HasShadow="True" 
    ShadowRadius="20" 
    ShadowColor="Red"
    BackgroundColor="White">
    <Grid HorizontalOptions="Fill" HeightRequest="100">
        <Label HorizontalOptions="Center" VerticalOptions="Center" Text="Hello, World" />
    </Grid>
</rf:Frame2>

One issue I experienced was setting high values for ShadowRadius made the whole iOS system crash! So make sure you know what you’re doing.

Note that since the algorithms are different on each platform, the same values would produce different looking shadows. So it is advised that you provide different values for each platform and test the results.

Back to Home