add doc of card
This commit is contained in:
guanguanchuangyu committed
1 parent
af26af2259
commit
cba327d63a
1 file changed
+205
-1
@@ -1,3 +1,207 @@
|
||||
---
|
||||
title: Card
|
||||
title: Card 卡片
|
||||
---
|
||||
|
||||
`Card`卡片作为同类型信息展示块，主要有内容头部以及尾部组成，常用于做集合类控件的子级模板使用，展示相同外观不同内容的卡片式风格数据，为`ContentControl`的派生类
|
||||
|
||||
```c#
|
||||
public class Card : ContentControl
|
||||
```
|
||||
|
||||
# 基础属性
|
||||
|
||||
| 属性 | 用途 |
|
||||
| ---------------------- | ------------------------------ |
|
||||
| Header | 卡片头部内容，用于显示同步文本 |
|
||||
| HeaderTemplate | 卡片头部模板 |
|
||||
| HeaderTemplateSelector | 卡片模板样式选择器 |
|
||||
| HeaderStringFormat | 卡片头部模板内容显示格式 |
|
||||
| Footer | 卡片尾部内容 |
|
||||
| FooterTemplate | 卡片尾部模板 |
|
||||
| FooterTemplateSelector | 卡片尾部样式选择器 |
|
||||
| FooterStringFormat | 卡片尾部内容显示格式 |
|
||||
|
||||
# 案例
|
||||
|
||||
## 单卡片使用
|
||||
|
||||
### `xaml`中使用
|
||||
|
||||
```xml
|
||||
<hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8">
|
||||
<!--Card 的内容部分-->
|
||||
<Border CornerRadius="4,4,0,0" Width="160" Height="160">
|
||||
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="测试"/>
|
||||
</Border>
|
||||
<!--Card 的尾部部分-->
|
||||
<hc:Card.Footer>
|
||||
<StackPanel Margin="10" Width="160">
|
||||
<!--Card 的一级内容-->
|
||||
<TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis"
|
||||
Text="大标题"
|
||||
HorizontalAlignment="Left"/>
|
||||
<!--Card 的二级内容-->
|
||||
<TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis"
|
||||
Text="描述信息" Margin="0,6,0,0"
|
||||
HorizontalAlignment="Left"/>
|
||||
</StackPanel>
|
||||
</hc:Card.Footer>
|
||||
</hc:Card>
|
||||
```
|
||||
|
||||
### 效果
|
||||
|
||||
|
||||
|
||||
## 作为数据模板
|
||||
|
||||
### 数据类型
|
||||
|
||||
```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<CardModel> _dataList;
|
||||
public CardDemoViewModel()
|
||||
{
|
||||
DataList = GetCardDataList();
|
||||
}
|
||||
|
||||
internal ObservableCollection<CardModel> GetCardDataList()
|
||||
{
|
||||
return new ObservableCollection<CardModel>
|
||||
{
|
||||
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<CardModel> DataList { get => _dataList; set => _dataList = value; }
|
||||
}
|
||||
```
|
||||
|
||||
### `xaml`中的使用方式
|
||||
|
||||
`handycontrol`的命名空间和`DataContext`上下文需要自行引入
|
||||
|
||||
```xml
|
||||
xmlns:hc="https://handyorg.github.io/handycontrol"
|
||||
xmlns:data="CardModel所在命名空间"
|
||||
xmlns:vm="CardDemoViewModel所在命名空间"
|
||||
........
|
||||
```
|
||||
|
||||
```xml
|
||||
<!--在listbox的父级中使用-->
|
||||
<listbox的父级.Resources>
|
||||
<vm:CardDemoViewModel x:Key="Card"></vm:CardDemoViewModel>
|
||||
</listbox的父级.Resources>
|
||||
<listbox的父级.DataContext>
|
||||
<Binding Source="{StaticResource Card}"/>
|
||||
</listbox的父级.DataContext>
|
||||
```
|
||||
|
||||
```xml
|
||||
<ListBox Margin="32" BorderThickness="0" Style="{DynamicResource WrapPanelHorizontalListBox}" ItemsSource="{Binding DataList}">
|
||||
<ListBox.ItemTemplate>
|
||||
<DataTemplate DataType="data:CardModel">
|
||||
<hc:Card MaxWidth="240" BorderThickness="0" Effect="{DynamicResource EffectShadow2}" Margin="8" Footer="{Binding Footer}">
|
||||
<!--Card 的内容部分模板-->
|
||||
<Border CornerRadius="4,4,0,0" Width="160" Height="160">
|
||||
<TextBlock TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Text="{Binding Content}"/>
|
||||
</Border>
|
||||
<!--Card 的尾部部分模板-->
|
||||
<hc:Card.FooterTemplate>
|
||||
<DataTemplate>
|
||||
<StackPanel Margin="10" Width="160">
|
||||
<!--Card 的一级内容-->
|
||||
<TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockLargeBold}" TextTrimming="CharacterEllipsis"
|
||||
Text="{Binding DataContext.Header,RelativeSource={RelativeSource AncestorType=hc:Card}}"
|
||||
HorizontalAlignment="Left"/>
|
||||
<!--Card 的二级内容-->
|
||||
<TextBlock TextWrapping="NoWrap" Style="{DynamicResource TextBlockDefault}" TextTrimming="CharacterEllipsis"
|
||||
Text="{Binding}" Margin="0,6,0,0"
|
||||
HorizontalAlignment="Left"/>
|
||||
</StackPanel>
|
||||
</DataTemplate>
|
||||
</hc:Card.FooterTemplate>
|
||||
</hc:Card>
|
||||
</DataTemplate>
|
||||
</ListBox.ItemTemplate>
|
||||
</ListBox>
|
||||
```
|
||||
|
||||
### 效果
|
||||
|
||||
|
||||
Reference in new issue
Block a user