# `CardPicker` Overview

The `RadChatPicker` control provides a `CardPickerContext` that can be used to display a list of cards. Each card presents more complex information in a user-friendly structured manner and allows the user to interact with it.

`CardPickerContext` exposes the following property:

* `Cards`—A property of type `IEnumerable<CardContext>` contains the available Cards defined by the `CardContext`;

Depending on the information that is presented, the `CardContext` can be one of the following types:

* `BasicCardContext`—For displaying a card with `Title`, `SubTitle`, and `Description`;
* `ImageCardContext`—Derives from `BasicCardContext` with an additional `Image` property;

Here is a quick example with `BasicCardContext`:

```C#
PickerItem pickerItem = new PickerItem();
var context = new CardPickerContext { Cards = this.GetCards(pickerItem) };
pickerItem.Context = context;
chat.Items.Add(new TextMessage { Text = "Select a destination" });
chat.Items.Add(pickerItem);
```

And the used `GetCards()` method:

```C#
private IEnumerable<CardContext> GetCards(ChatItem chatItem)
{
	List<CardContext> cards = new List<CardContext>()
	{
		new BasicCardContext() {Title="Rome", Subtitle="Italy", Description="Italy’s capital is one of the world’s most romantic and inspiring cities"},
		new BasicCardContext() {Title="Barcelona", Subtitle="Spain", Description="Barcelona is an enchanting seaside city with remarkable architecture"}
	};
	return cards;
}
```

## Card Actions

Each card allows you to add a certain action that can be handled through a command. The `CardContext` exposes an `Actions` collection of type `IEnumerable<CardActionContext>` that supplies all the details needed for handling the action.

`CardActionContext` provides the following properties:

* `Text`—Represents the action inside the Card layout;
* `Command`—The command that is raised when the user selects that action;
* `Data`—Can be used to preserve additional details if needed;

The next snippet uses the Cards defined in the previous example and adds Actions to them.

```C#
private IEnumerable<CardContext> GetCards(ChatItem chatItem)
{
    List<CardContext> cards = new List<CardContext>()
        {
            new BasicCardContext() {
                Title ="Rome",
                Subtitle ="Italy",
                Description ="Italy's capital is one of the world's most romantic and inspiring cities",
                Actions = GetCardActions(chatItem, "Rome")},
            new BasicCardContext() {
                Title ="Barcelona",
                Subtitle ="Spain",
                Description ="Barcelona is an enchanting seaside city with remarkable architecture",
                Actions = GetCardActions(chatItem, "Barcelona")}
        };
    return cards;
}

private ICollection<CardActionContext> GetCardActions(ChatItem chatItem, string Title)
{
    var selectAction = new CardActionContext
    {
        Text = "Select",
        Command = new Command(() =>
        {
            var index = chat.Items.IndexOf(chatItem);
            chat.Items.RemoveAt(index);
            chat.Items.Add(new TextMessage { Author = this.chat.Author, Text = "You selected " + Title });
        }),
    };
    return new List<CardActionContext>() { selectAction };
}
```

![Telerik UI for .NET MAUI Chat CardPicker showing Rome and Barcelona cards with Select actions](https://www.telerik.com/maui-ui/documentation/assets/f9fa8ba514142fb96756f81f5bc4746b/chat-cardpicker.gif)

## See Also

* [ChatPicker](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/overview)
* [ImageCard](https://www.telerik.com/maui-ui/documentation/controls/chat/pickers/card-picker/imagecard)