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

我已經實現了一些非常相似的東西（也Frame s 作為要在堆棧視圖中顯示的卡片）。 不幸的是，我不能分享確切的代碼，因為它不是我擁有的，而是我的雇主，但我可以告訴你如何實現這一點。

我向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>