Cardview in Xamarin.Forms?

Question

Does anyone know if it's possible to create a CardView style (scrollable) list using Xamarin.Forms? We need it to render same on both iOS and Android. Also need to tweak properties like the shadow (to slightly raise each card)

Answer 1

No need Third party library

it is support scrollable and 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

Why not use a frame? i am put inside at the listview, a frame with grid. and do something like this to get the style cardview you like.

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

Here is a nuget: https://github.com/tiger4589/Xamarin.Forms-CardView

Cardview control in Xamarin.Froms. Install it in your shared project only and use the following import in your page's xaml:

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

Just use the control in viewcell of your listview.

Example screenshot: each card is a row in listview

Following code is an usage example of above control:

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

Here you may notice the freedom you have such as you can define to have shadow or not and design the whole layout of cardview using Xamarin default layouts.