Xamarin.Forms Cardview

CardView was introduced in Android 5.0 (Lollipop). CardView is mainly used to create Card like user interface for showing lists of data in Android Apps. CardView can hold text and text with images (advanced) in its Layout. CardView’s Layout is based on the FrameLayout widget with rounded corners and shadows. But Xamarin.Forms doesn’t have support for CardView by default but you can easily create your own view that renderers a Card like View on Android & iOS.

First step is to create a Xamarin.Forms project (Blank Xaml App Template) and add Listview to the MainPage.Xaml. Now we will create a new Folder View – which will hold the cardview which we will be the itemtemplate for the ListView.

CardViewTemplate.Xaml

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xamarin.Forms_CardView.View.CardViewTemplate">
 <Frame IsClippedToBounds="True"
        HasShadow="True"
        BackgroundColor="White" >
       <Frame.OutlineColor>
            <OnPlatform x:TypeArguments="Color"
                        Android="Gray"
                        iOS="Gray"/>
       </Frame.OutlineColor>
       <Frame.Margin>
             <OnPlatform x:TypeArguments="Thickness"
                         Android="10" iOS="10"/>
       </Frame.Margin>
       <StackLayout Orientation="Horizontal">
       <BoxView Color="{Binding AlertColor}" WidthRequest="4"/>
       <Grid VerticalOptions="CenterAndExpand"
             Padding="0"
             HorizontalOptions="FillAndExpand"
             BackgroundColor="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
        <Label FontAttributes="Bold"
               Grid.Row="0"
               HorizontalTextAlignment="Start"
               VerticalTextAlignment="Center"
               FontSize="16"
               Text="{Binding Title, Mode = TwoWay}">
              <Label.LineBreakMode>
                  <OnPlatform x:TypeArguments="LineBreakMode"
                              Android="NoWrap" iOS="TailTruncation"/>
              </Label.LineBreakMode>
         </Label>
         <BoxView Grid.Row="1" Color="Gray"
                  HorizontalOptions="FillAndExpand"
                  HeightRequest="1"/>
         <Grid Grid.Row="2"
               BackgroundColor="Transparent"
               Padding="4">
               <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition />
               </Grid.ColumnDefinitions>
               <Label Grid.Row="0"
                      Grid.Column="0"
                      Text="CardOwner"/>
               <Label Grid.Row="0"
                      Grid.Column="1"
                      Text="{Binding Owner, Mode = TwoWay}"/>
          </Grid>
     </Grid>
   </StackLayout>
 </Frame>
</ContentView>

Now add this ContentView to the ListView ItemTemplate, putting it all together the MainPage.Xaml code should look like this.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:Xamarin.Forms_CardView"
             xmlns:view="clr-namespace:Xamarin.Forms_CardView.View;assembly=Xamarin.Forms_CardView"
             xmlns:viewModel="clr-namespace:Xamarin.Forms_CardView.ViewModel;assembly=Xamarin.Forms_CardView"
             x:Class="Xamarin.Forms_CardView.MainPage"
             Title="CardView-Demo">
    <ContentPage.BindingContext>
       <viewModel:CardDataViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Orientation="Vertical">
        <Label Text="Xamarin Forms CardView Demo"
               VerticalOptions="Start"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               BackgroundColor="Transparent"
               HorizontalOptions="CenterAndExpand" />
    <ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}" 
              RowHeight="120" 
              ItemsSource="{Binding CardDataCollection}" >
    <ListView.ItemTemplate>
         <DataTemplate>
           <ViewCell>
              <view:CardViewTemplate/>
           </ViewCell>
         </DataTemplate>
     </ListView.ItemTemplate>
   </ListView>
 </StackLayout>
</ContentPage>

Now build and run the Droid or iOS project and we should be able to see the ListView with CardView like UI.  1

 

Summary

In this blog i have shared the simple way to  implement a cardview in xamarin.forms this is not production ready but with some custom renderer and platform effects on the same can bring out rich UI look. The attached images has custom styles applied.You can browse the complete code with a working example on GitHub.

Advertisements

10 thoughts on “Xamarin.Forms Cardview

  1. Hello, how can I put an image in CardViewTemplate with TapGestureRecognizer ??
    I am trying but it gives me error when putting the x: Reference in the binding

    sorry for my english

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s