---
title: Card 卡片
---
用于卡片化展示数据，为`ContentControl`的派生类
```c#
public class Card : ContentControl
```
# 基础属性
| 属性 | 用途 |
| ---------------------- | ------------------------------ |
| Header | 卡片头部内容，用于显示同步文本 |
| HeaderTemplate | 卡片头部模板 |
| HeaderTemplateSelector | 卡片模板样式选择器 |
| HeaderStringFormat | 卡片头部模板内容显示格式 |
| Footer | 卡片尾部内容 |
| FooterTemplate | 卡片尾部模板 |
| FooterTemplateSelector | 卡片尾部样式选择器 |
| FooterStringFormat | 卡片尾部内容显示格式 |
# 案例
## 单卡片使用
### `xaml`中使用
```xml
```
### 效果
## 作为数据模板
### 数据类型
```c#
public class CardModel
{
public string Header { get; set; }
public string Content { get; set; }
public string Footer { get; set; }
}
```
### 视图实体
此实体并没有按照规范的`mvvm`方式进行设计，仅仅是作为普通数据源做展示使用
```c#
public class CardDemoViewModel
{
private IList _dataList;
public CardDemoViewModel()
{
DataList = GetCardDataList();
}
internal ObservableCollection GetCardDataList()
{
return new ObservableCollection
{
new CardModel
{
Header = "Atomic",
Content = "1.jpg",
Footer = "Stive Morgan"
},
new CardModel
{
Header = "Zinderlong",
Content = "2.jpg",
Footer = "Zonderling"
},
new CardModel
{
Header = "Busy Doin' Nothin'",
Content = "3.jpg",
Footer = "Ace Wilder"
},
new CardModel
{
Header = "Wrong",
Content = "4.jpg",
Footer = "Blaxy Girls"
},
new CardModel
{
Header = "The Lights",
Content = "5.jpg",
Footer = "Panda Eyes"
},
new CardModel
{
Header = "EA7-50-Cent Disco",
Content = "6.jpg",
Footer = "еяхат музыка"
},
new CardModel
{
Header = "Monsters",
Content = "7.jpg",
Footer = "Different Heaven"
},
new CardModel
{
Header = "Gangsta Walk",
Content = "8.jpg",
Footer = "Illusionize"
},
new CardModel
{
Header = "Won't Back Down",
Content = "9.jpg",
Footer = "Boehm"
},
new CardModel
{
Header = "Katchi",
Content = "10.jpg",
Footer = "Ofenbach"
}
};
}
public IList DataList { get => _dataList; set => _dataList = value; }
}
```
### `xaml`中的使用方式
`handycontrol`的命名空间和`DataContext`上下文需要自行引入
```xml
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:data="CardModel所在命名空间"
xmlns:vm="CardDemoViewModel所在命名空间"
........
```
```xml
```
```xml
```
### 效果
