卡德维尤在沙马林.Forms？

Question

有谁知道是否可以使用 Xamarin.Forms 创建卡视图样式（可滚动）列表？我们需要它在iOS和Android上呈现相同的效果。还需要调整阴影等属性（以略微抬高每张卡）

Answer 1

不需要第三方库

它支持滚动和pullrefresh

 <StackLayout>
        <ListView x:Name="ItemsListView" 
            ItemsSource="{Binding Items}"
            VerticalOptions="FillAndExpand"
             HasUnevenRows="true"
             RefreshCommand="{Binding LoadItemsCommand}"
             IsPullToRefreshEnabled="true"
             IsRefreshing="{Binding IsBusy, Mode=OneWay}"
             CachingStrategy="RecycleElement"
             ItemSelected="OnItemSelected">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="10">
                            <Frame HasShadow="True" >
                                <StackLayout>
                                    <Label Text="{Binding Text}" 
                   LineBreakMode="NoWrap" 
                   FontSize="16" />
                                    <Label Text="{Binding Description}" 
                   LineBreakMode="NoWrap" 
                   FontSize="16" />
                                </StackLayout>

                            </Frame>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

Answer 2

为什么不使用框架？我被放在listview中，一个带有网格的框架。这样做可以得到你喜欢的风格卡片视图。

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

        if (Device.OS == TargetPlatform.Android)
        {
            HasShadow = true;
            OutlineColor = Color.Transparent;
            BackgroundColor = Color.Transparent;
        }
    }
}

Answer 3

这里有一个nuget:https://github.com/tiger4589/Xamarin.Forms-CardView

Xamarin.Froms中的Cardview控件。仅在共享项目中安装它，并在页面的xaml中使用以下导入：

xmlns:cardView="clr-namespace:CardView;assembly=CardView"

只需使用listview的viewcell中的控件。

示例屏幕截图：每张卡片在列表视图中都是一行

以下代码是上述控件的用法示例：

<ListView
            x:Name="listView"
            Margin="0,8,0,0"
            HasUnevenRows="True"
            ItemTapped="Handle_ItemTapped"
            ItemsSource="{Binding HouseholdDetail}"
            SeparatorVisibility="None">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="8,8,8,8" Orientation="Vertical">
                            <cardView:CardView
                                BackgroundColor="White"
                                CardViewHasShadow="True"
                                HeightRequest="220">
                                <cardView:CardView.CardViewContent>
                                    <StackLayout
                                        Padding="10"
                                        HorizontalOptions="Center"
                                        Spacing="10"
                                        VerticalOptions="Center">
                                        <Image HeightRequest="96" Source="{Binding Image}" />
                                        <BoxView
                                            HeightRequest="1"
                                            WidthRequest="275"
                                            Color="LightGray" />
                                        <Grid>
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="0"
                                                Margin="15,0,0,0"
                                                FontSize="Medium"
                                                Text="{Binding FullName}" />
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="1"
                                                Margin="0,0,15,0"
                                                FontSize="Medium"
                                                HorizontalTextAlignment="End"
                                                Text="{Binding Relation}" />
                                        </Grid>
                                        <BoxView
                                            HeightRequest="1"
                                            WidthRequest="275"
                                            Color="LightGray" />
                                        <Grid>
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="0"
                                                Margin="15,0,0,0"
                                                FontSize="Medium"
                                                Text="{Binding LeavesAt}" />
                                            <Label
                                                Grid.Row="0"
                                                Grid.Column="1"
                                                Margin="0,0,15,0"
                                                FontSize="Medium"
                                                HorizontalTextAlignment="End"
                                                Text="{Binding ArrivesAt}" />
                                        </Grid>
                                    </StackLayout>
                                </cardView:CardView.CardViewContent>
                            </cardView:CardView>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

在这里，您可能会注意到您所拥有的自由度，例如您可以定义是否有阴影，并使用Xamarin默认布局设计cardview的整个布局。