Xamarin窗体框架阴影设计

Question

我有一个带有列表的Xamarin内容页面。对于ListItems，我想要一些类似于Android中的cardview。

​

​

根据我所发现的，可以通过框架来完成。我有这样的代码：

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

CardView的代码如下：

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

这会产生类似如下的结果：

​

​

这看起来更像是一个边框，而不是这个卡片悬浮效果。上面的示例实际上使用了相同的cardview控件，没有任何样式(即使没有OutlineColor)。我是否错过了必须配置的选项？或者，我如何才能获得与示例中相同的结果？

Xamarin.Forms版本: 2.5.0.280555

Answer 1

我已经实现了一些非常类似的东西(也可以将Frames作为卡片显示在堆栈视图中)。不幸的是，我不能分享确切的代码，因为不是我拥有它，而是我的雇主，但我可以告诉你如何实现这一点。

我已经向CardView添加了一个属性ShadowRadius，并创建了一个从Xamarin.Forms.Platform.Android.AppCompat.FrameRenderer派生的自定义渲染器。在渲染器中，我设置了渲染器的Elevation

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

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

我的卡片用Xamarin.Forms 2.5.0.280555显示了一个很好的立面阴影。

Answer 2

你可以试试这个

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