'Cardview in Xamarin.Forms?

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)

xamarin xamarin.forms

Solution 1:^[1]

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.

Solution 2:^[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;
        }
    }
}

Solution 3:^[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	valdetero
Solution 3	Ali Besharati

'Cardview in Xamarin.Forms?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]