How To Display Items In Card View Xamarin.Forms

Hi all, I hope you are doing good.

In this post, I am going to explaining how to display items in Card View using Xamarin.Forms.

Actually, CardView was introduced in Android 5.0 (Lollipop). But here, we are creating CardView for both, Android and iOS platforms using the “Frame” layout available in Xamarin.Forms.

In this post, I will take one scenario, that is, regarding eligibility for Vote.

• If the person is 18 years old or less than 18, then the user is not eligible for Vote so we will label the user with red color on the card.
• If the person is above 18, then he/she is eligible for Vote; so we will label the user with green color on the card.

Prerequisites

1. Visual Studio for Windows or Mac.
2. Java SDK, Android SDK, and Android NDK are for running the application in Android.
3. If you want to run the application on iOS simulator, then Mac machine is mandatory.
4. Need to have an idea about MVVM.

Step 1

Create Xamarin.Forms project in Visual Studio. In my case, I have created the project named “XFormsCardView”. After creating the project, the solution structure is as below.

 

Step 2

Create “ContentView” with the name "CardViewTemplate” under Xamarin.Forms PCL. We use this as an item template in the listview, so every item of listview renders based this ContentView. Place the following code inside your content view.

<ContentView.Content>
    <Frame IsClippedToBounds="True"
           HasShadow="True"
           Padding="0"
           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 HasVote}" WidthRequest="6"/>
            <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 Name, 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="User Age"/>
                    <Label Grid.Row="0"
                          Grid.Column="1"
                          Text="{Binding Age, Mode = TwoWay}"/>
                </Grid>
            </Grid>
        </StackLayout>
    </Frame>
</ContentView.Content>

Step 3

Create a Content page with the name “MainPage” under Xamarin.Forms PCL. Place the following code inside the Content Page.

<StackLayout Orientation="Vertical">
        <Label Text="CardView Demo in Xamarin Forms"
               FontAttributes="Bold"
               FontSize="Medium"
               VerticalOptions="Start"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center"
               BackgroundColor="Transparent"
               HorizontalOptions="CenterAndExpand" />
        <ListView x:Name="listView"
                  SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
                  HasUnevenRows="True"
                  ItemsSource="{Binding lstUsers}" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <local:CardViewTemplate/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>

If you observe the above code, I have added the above created “CardViewTemplate” as a viewcell for the listview. If you want to use that inside of Content Page, you have to add the following line Content Page.

xmlns:local="clr-namespace:XFormsCardView"

 In the above line, XFormsCardView is my namespace name of “CardViewTemplate”, so please change it to appropriate namespace based on your project.

Step 4

Create a class with the name “User” with some properties in Xamarin.Forms PCL like below.

public class User
    {
        public string Name { get; set; }
        public int Age { get; set; }

        // I assume if color is
        // Green, then user has vote
        // Red, then user is below 18
        public Color HasVote { get; set; }
    }

Step 5

Create a class with the name “UserViewModel” with the following in Xamarin.Forms PCL.

public class UserViewModel
    {
        public IList<User> lstUsers { get; set; }
        public object SelectedItem { get; set; }
        public UserViewModel()
        {
            lstUsers = new List<User>();
            GenerateCardModel();
        }

        private void GenerateCardModel()
        {
            string[] arrNames = {
                "David", "John", "Paul", "Mark", "James",
                "Andrew", "Scott", "Steven", "Robert", "Stephen",
                "William", "Craig", "Michael", "Stuart", "Christopher",
                "Alan", "Colin", "Brian", "Kevin"
            };

            Random rnd = new Random();

            for (var i = 0; i < arrNames.Length; i++)
            {
                var age = rnd.Next(10, 30);
                var user = new User()
                {
                    Name = arrNames[i],
                    Age = age,
                    HasVote = age % 2 == 0 ? Color.Green : Color.Red,
                };
                lstUsers.Add(user);
            }
        }
    }

Step 6

Place the following code in the code behind of “MainPage”. This is the place where we have to bind ViewModel with BindingContext.

public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
                    this.BindingContext = new UserViewModel();
            }
    }

Step 7

Now, you can run your application by setting required platform as a startup. Here, in my case, I’m running the application in Android and the outcome will be as below.

In the following image, the persons who are having a green label are eligible for Vote while the others are not eligible.

For full code, please visit here.

 

 

I hope you enjoyed reading this article. Please reach out to me through comments.