如何在 xamarin 表单中实现良好的 cardview 布局答案

【问题标题】：how to achieve good cardview like layouts in xamarin forms如何在 xamarin 表单中实现良好的 cardview 布局
【发布时间】：2019-11-14 10:08:53
【问题描述】：

我在 XAML 中使用 Frames 来实现卡片视图。但这种设计与谷歌应用卡片视图或任何其他应用卡片视图都不相近。另外，我没有看到所有 3 个侧面都有漂亮的阴影，而是有一条假的阴影线

代码如下：

<Frame Margin="0,20,0,0"
                       IsClippedToBounds="True"
           HasShadow="True">
                    <Frame.OutlineColor>
                        <OnPlatform x:TypeArguments="Color"
                                    Android="Gray"
                                    iOS="Gray"></OnPlatform>
                    </Frame.OutlineColor>
<StackLayout Orientation="Horizontal" Spacing="0">
                            <Image Source="mf_tickets1.png" WidthRequest="30" HeightRequest="30" Aspect="AspectFill"  VerticalOptions="Center"/>
                            <Label x:Name="showsummary" Text="Summary " TextColor="Black" FontSize="Medium" FontAttributes="Bold" VerticalOptions="Start" >
                            </Label>
                            <Image  x:Name="SummageHideShowImage1" Source="{Binding SummageHideShowImage}" WidthRequest="30" HeightRequest="30"
                               Aspect="AspectFill" HorizontalOptions="EndAndExpand" VerticalOptions="Center" ></Image>
                        </StackLayout>
</Frame>

有没有其他方法可以实现良好的卡片视图布局以使我的应用成为高级应用？

【问题讨论】：

你可以参考这个：github.com/AndreiMisiukevich/CardView

标签： xamarin.forms xamarin.android frame cardview

【解决方案1】：

我对使用第三方 NuGet 包有点犹豫。我编写了一个自定义帧渲染器并分配了一个具有合适高度、颜色和阴影的可绘制资源文件。

自定义框架：

protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Frame> e)
    {
        base.OnElementChanged(e);
        if (e.NewElement != null && e.OldElement == null)
            ViewGroup.SetBackgroundResource(Resource.Drawable.FrameRenderValue);
        ViewGroup.Elevation = 6;
    }

FrameRenderValue.xml：

<item>
<shape android:shape="rectangle">
  <solid android:color="#CABBBBBB" />
  <corners android:radius="2dp" />
</shape>
</item>
<item
  android:left="0.5dp"
  android:right="0.5dp"
  android:top="0dp"
  android:bottom="0dp">
<shape android:shape="rectangle">
  <solid android:color="@android:color/white" />
  <corners android:radius="2dp" />
</shape>
</item>

谢谢

【讨论】：