Xamarin Forms Frame Shadow Design

Question

I have an Xamarin Content Page with a List. For the ListItems I want something similar to the cardview in Android.

Base on what I found that could be accomplished by a Frame. I have this code:

<ViewCell>
    <StackLayout Padding="8" >
        <controls:CardView HasShadow="True" OutlineColor="LightGray">
            <StackLayout Orientation="Vertical" Padding="5">
                // Some labels and Buttons                
            </StackLayout>
        </Frame>
    </StackLayout>
</ViewCell>

The CardView has the following code:

public class CardView : Frame
{
    public CardView()
    {
        Padding = 0;
        if (Device.RuntimePlatform == Device.iOS)
        {
            HasShadow = false;
            OutlineColor = Color.Transparent;
            BackgroundColor = Color.Transparent;
        }
    }
}

This results in a something like this:

This looks more like a Border than this card levitation effect. The example above actually uses the same cardview control, without any styles (even without the OutlineColor). Do I miss a option I have to configure? Or how could I achieve the same result as in the sample?

Xamarin.Forms Version: 2.5.0.280555

Solution 1

I have implemented something very similar (also Frames as cards to be displayed in a stack view). Unfortunately I can't share the exact code, for it's not me owning it, but my employer, but I can tell you how to achieve this.

I have added a property ShadowRadius to CardView and created a custom renderer, derived from Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer. In the renderer I am setting the Elevation of the renderer

protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
{
    /* ... */

    this.Elevation = ((CardView)e.NewElement).ShadowRadius;
}

My cards are showing a nice elevation shadow with Xamarin.Forms 2.5.0.280555.

Solution 2

You can try this

<Frame HasShadow="True">
    <controls:CardView  OutlineColor="LightGray">
            <StackLayout Orientation="Vertical" Padding="5">
                // Some labels and Buttons                
            </StackLayout>
    </controls:CardView>
</Frame>

Comments

[NPadrutt]

Thanks for your answer! Unfortunately it looks the same with that change.

[DaWiseguy]

It only looks the same because the Background color is the same, change the background color of the stack to LightGray aswell.