From b2545050c1f7907fc718bfdec3f9ab730b686148 Mon Sep 17 00:00:00 2001 From: guanguanchuangyu <3246907890@qq.com> Date: Sat, 15 Feb 2020 18:05:18 +0800 Subject: [PATCH 1/8] add doc of animationPath --- .../extend_controls/animationPath/index.md | 62 ++++++++++++++++++- 1 file changed, 60 insertions(+), 2 deletions(-) diff --git a/doc/source/handycontrol/extend_controls/animationPath/index.md b/doc/source/handycontrol/extend_controls/animationPath/index.md index ca12ad62..c40d140c 100644 --- a/doc/source/handycontrol/extend_controls/animationPath/index.md +++ b/doc/source/handycontrol/extend_controls/animationPath/index.md @@ -1,5 +1,63 @@ --- -title: 建设中 +title: AnimationPath 动画路径 --- -建设中 \ No newline at end of file +`AnimationPath`动画路径,设定`Geometry `派生类型几何图形的数据,例如`PathGeometry `、`LineGeometry `等,实现固定的路径动画效果 + +```xml +public class AnimationPath : Shape +``` + +# 属性 + +## Data 数据 + +动画路径需要显示的几何图形数据 + +```xml +M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-0.64-52.48-0.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-0.64-33.92 40.32-0.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-0.64 123.52-0.64 140.8 0 13.44 9.6 29.44 35.2 24.32A512.832 512.832 0 0 0 1024 512c0-282.88-229.12-512-512-512z +``` +案例: +```xml + + + +``` + +效果: + +![Animation-Default](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/AnimationPath-Default.gif) + +## PathLength 路径长度 + +设置路径动画,线性移动空白间隔长度,默认为0,设置属性为50,效果如下: + +![AnimationPath-PathLength](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/AnimationPath-PathLength.gif) + +## Duration 时间间隔 + +路径动画的执行时间间隔,此属性为必须设置项,否则动画路径效果无显示 + +## IsPlaying 是否正在播放动画 + +判定当前动画播放状态,常作为控件内部行为控制判定标识,可通过该属性进行路径动画的暂停控制 + +## RepeatBehavior 重复行为 + +设置动画重复行为,默认为`Forever`,可根据需要设置重复行为 + +## 继承至Shape常用属性 + +| 属性名称 | 用途 | +| --------------- | -------- | +| Stretch | 拉伸属性 | +| StrokeThickness | 边线宽度 | + +# 相关事件 + +## Completed + +非默认重复行为,当动画行为完成时,触发对应设置事件 \ No newline at end of file From 491ec94d68cd9e650b931af7172e33dc58b93617 Mon Sep 17 00:00:00 2001 From: guanguanchuangyu <3246907890@qq.com> Date: Sun, 1 Mar 2020 11:55:01 +0800 Subject: [PATCH 2/8] add doc of badge --- .../extend_controls/badge/index.md | 204 +++++++++++++++++- 1 file changed, 202 insertions(+), 2 deletions(-) diff --git a/doc/source/handycontrol/extend_controls/badge/index.md b/doc/source/handycontrol/extend_controls/badge/index.md index ca12ad62..0925107e 100644 --- a/doc/source/handycontrol/extend_controls/badge/index.md +++ b/doc/source/handycontrol/extend_controls/badge/index.md @@ -1,5 +1,205 @@ --- -title: 建设中 +title: Badge 标记 --- -建设中 \ No newline at end of file +标记控件作为其他控件的特定状态内容标记,能够做到最小程度的侵入原有控件,可以看作是一种内容控件,内部`Content`就是对应需要显示标记的被修饰控件,继承关系如下: + +```c# +public class Badge : ContentControl +``` + +# 基础属性 + +| 属性名称 | 用途 | +| ----------- | ------------------------------------------------------------ | +| Text | 获取或设置标记显示内容 | +| Value | 获取或设置显示数值,支持数值动态变更 | +| Status | 获取或设置标记状态类型,Text(文本),Dot(圆点标记),Processing(动态标记)默认为文本显示 | +| Maximum | 获取或设置最大显示数值。数值显示时,最大显示数值 | +| BadgeMargin | 获取或设置标记相对于被修饰控件的外边距 | +| ShowBadge | 获取或设置是否显示标记,默认为True | + +`xaml`中,记得引入`handycontrol`的命名空间 + +```xml +xmlns:hc="https://handyorg.github.io/handycontrol" +``` + +## `Text`和`Value` + +可能看到属性解释,会比较疑惑,`Text`和`Value`在现实效果和数据填写时,是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`,由于标记的`Status`默认为文本 + +### 案例 + +```xml + + + + + + +``` + +![Badge-Attention01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Attention01.png) + + + + + From cba327d63a2b2f26380377498c9af1aa20d83fb4 Mon Sep 17 00:00:00 2001 From: guanguanchuangyu <3246907890@qq.com> Date: Sun, 22 Mar 2020 17:53:08 +0800 Subject: [PATCH 3/8] add doc of card --- .../extend_controls/card/index.md | 206 +++++++++++++++++- 1 file changed, 205 insertions(+), 1 deletion(-) diff --git a/doc/source/handycontrol/extend_controls/card/index.md b/doc/source/handycontrol/extend_controls/card/index.md index 877d2fd6..894d8dfd 100644 --- a/doc/source/handycontrol/extend_controls/card/index.md +++ b/doc/source/handycontrol/extend_controls/card/index.md @@ -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 + + + + + + + + + + + + + + + +``` + +### 效果 + +![Card-SampleCase](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Card-SampleCase.png) + +## 作为数据模板 + +### 数据类型 + +```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 + + + + + + + + + + + + + + + + + + + + + + + +``` + +### 效果 + +![Card-Case01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Card-Case01.png) \ No newline at end of file From f9d77ffc302bc055004efba1d32df827b499d687 Mon Sep 17 00:00:00 2001 From: NaBian <836904362@qq.com> Date: Wed, 1 Apr 2020 23:00:54 +0800 Subject: [PATCH 4/8] update AnimationPath doc --- .../extend_controls/animationPath/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/doc/source/handycontrol/extend_controls/animationPath/index.md b/doc/source/handycontrol/extend_controls/animationPath/index.md index c40d140c..fec22308 100644 --- a/doc/source/handycontrol/extend_controls/animationPath/index.md +++ b/doc/source/handycontrol/extend_controls/animationPath/index.md @@ -2,7 +2,7 @@ title: AnimationPath 动画路径 --- -`AnimationPath`动画路径,设定`Geometry `派生类型几何图形的数据,例如`PathGeometry `、`LineGeometry `等,实现固定的路径动画效果 +`AnimationPath`动画路径,设定`Geometry `派生类型几何图形的数据,例如`PathGeometry `、`LineGeometry `等,实现固定的路径动画效果。 ```xml public class AnimationPath : Shape @@ -12,7 +12,7 @@ public class AnimationPath : Shape ## Data 数据 -动画路径需要显示的几何图形数据 +动画路径需要显示的几何图形数据。 ```xml M512 0C229.12 0 0 229.12 0 512c0 226.56 146.56 417.92 350.08 485.76 25.6 4.48 35.2-10.88 35.2-24.32 0-12.16-0.64-52.48-0.64-95.36-128.64 23.68-161.92-31.36-172.16-60.16-5.76-14.72-30.72-60.16-52.48-72.32-17.92-9.6-43.52-33.28-0.64-33.92 40.32-0.64 69.12 37.12 78.72 52.48 46.08 77.44 119.68 55.68 149.12 42.24 4.48-33.28 17.92-55.68 32.64-68.48-113.92-12.8-232.96-56.96-232.96-252.8 0-55.68 19.84-101.76 52.48-137.6-5.12-12.8-23.04-65.28 5.12-135.68 0 0 42.88-13.44 140.8 52.48 40.96-11.52 84.48-17.28 128-17.28 43.52 0 87.04 5.76 128 17.28 97.92-66.56 140.8-52.48 140.8-52.48 28.16 70.4 10.24 122.88 5.12 135.68 32.64 35.84 52.48 81.28 52.48 137.6 0 196.48-119.68 240-233.6 252.8 18.56 16 34.56 46.72 34.56 94.72 0 68.48-0.64 123.52-0.64 140.8 0 13.44 9.6 29.44 35.2 24.32A512.832 512.832 0 0 0 1024 512c0-282.88-229.12-512-512-512z @@ -33,21 +33,21 @@ public class AnimationPath : Shape ## PathLength 路径长度 -设置路径动画,线性移动空白间隔长度,默认为0,设置属性为50,效果如下: +默认为0,设置属性为50,效果如下: ![AnimationPath-PathLength](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/AnimationPath-PathLength.gif) ## Duration 时间间隔 -路径动画的执行时间间隔,此属性为必须设置项,否则动画路径效果无显示 +路径动画的执行时间间隔,此属性为必须设置项,否则动画路径效果无显示。 ## IsPlaying 是否正在播放动画 -判定当前动画播放状态,常作为控件内部行为控制判定标识,可通过该属性进行路径动画的暂停控制 +判定当前动画播放状态,常作为控件内部行为控制判定标识,可通过该属性进行路径动画的暂停控制。 ## RepeatBehavior 重复行为 -设置动画重复行为,默认为`Forever`,可根据需要设置重复行为 +设置动画重复行为,默认为`Forever`,可根据需要设置重复行为。 ## 继承至Shape常用属性 @@ -60,4 +60,4 @@ public class AnimationPath : Shape ## Completed -非默认重复行为,当动画行为完成时,触发对应设置事件 \ No newline at end of file +当动画完成时,触发此事件。 \ No newline at end of file From e1769e333f9948523e41debc1eb806fc552827c8 Mon Sep 17 00:00:00 2001 From: NaBian <836904362@qq.com> Date: Wed, 1 Apr 2020 23:18:34 +0800 Subject: [PATCH 5/8] update Card doc --- .../extend_controls/badge/index.md | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/doc/source/handycontrol/extend_controls/badge/index.md b/doc/source/handycontrol/extend_controls/badge/index.md index 0925107e..fcf8bb57 100644 --- a/doc/source/handycontrol/extend_controls/badge/index.md +++ b/doc/source/handycontrol/extend_controls/badge/index.md @@ -19,7 +19,7 @@ public class Badge : ContentControl | BadgeMargin | 获取或设置标记相对于被修饰控件的外边距 | | ShowBadge | 获取或设置是否显示标记,默认为True | -`xaml`中,记得引入`handycontrol`的命名空间 +`xaml`中,记得引入`handycontrol`的命名空间。 ```xml xmlns:hc="https://handyorg.github.io/handycontrol" @@ -27,7 +27,7 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ## `Text`和`Value` -可能看到属性解释,会比较疑惑,`Text`和`Value`在现实效果和数据填写时,是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`,由于标记的`Status`默认为文本 +可能看到属性解释,会比较疑惑,`Text`和`Value`在效果和数值上是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`。 ### 案例 @@ -148,7 +148,7 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ![Badge-Styles](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Styles.png) -# 常见问题 +# FAQ ## 坐标偏移问题[版本 小于等于 2.4] @@ -182,24 +182,4 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ``` -![Badge-ErrorCorrection01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-ErrorCorrection01.png) - -## 标记适用范围 - -标记派生至`ContentControl`,不支持多子集,仅仅能够包含一个子集,支持`ContentControl`支持的所有控件作为被标记控件 - -```xml - - - - - - -``` - -![Badge-Attention01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Attention01.png) - - - - - +![Badge-ErrorCorrection01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-ErrorCorrection01.png) \ No newline at end of file From da0ec024d58ea142abbe44a3963a3616a52d5cb5 Mon Sep 17 00:00:00 2001 From: NaBian <836904362@qq.com> Date: Wed, 1 Apr 2020 23:19:18 +0800 Subject: [PATCH 6/8] Revert "update Card doc" This reverts commit e1769e333f9948523e41debc1eb806fc552827c8. --- .../extend_controls/badge/index.md | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/doc/source/handycontrol/extend_controls/badge/index.md b/doc/source/handycontrol/extend_controls/badge/index.md index fcf8bb57..0925107e 100644 --- a/doc/source/handycontrol/extend_controls/badge/index.md +++ b/doc/source/handycontrol/extend_controls/badge/index.md @@ -19,7 +19,7 @@ public class Badge : ContentControl | BadgeMargin | 获取或设置标记相对于被修饰控件的外边距 | | ShowBadge | 获取或设置是否显示标记,默认为True | -`xaml`中,记得引入`handycontrol`的命名空间。 +`xaml`中,记得引入`handycontrol`的命名空间 ```xml xmlns:hc="https://handyorg.github.io/handycontrol" @@ -27,7 +27,7 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ## `Text`和`Value` -可能看到属性解释,会比较疑惑,`Text`和`Value`在效果和数值上是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`。 +可能看到属性解释,会比较疑惑,`Text`和`Value`在现实效果和数据填写时,是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`,由于标记的`Status`默认为文本 ### 案例 @@ -148,7 +148,7 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ![Badge-Styles](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Styles.png) -# FAQ +# 常见问题 ## 坐标偏移问题[版本 小于等于 2.4] @@ -182,4 +182,24 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ``` -![Badge-ErrorCorrection01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-ErrorCorrection01.png) \ No newline at end of file +![Badge-ErrorCorrection01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-ErrorCorrection01.png) + +## 标记适用范围 + +标记派生至`ContentControl`,不支持多子集,仅仅能够包含一个子集,支持`ContentControl`支持的所有控件作为被标记控件 + +```xml + + + + + + +``` + +![Badge-Attention01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Attention01.png) + + + + + From 0b0ddc7db1c3d6cbc70dfaefb6c44a9976ebc833 Mon Sep 17 00:00:00 2001 From: NaBian <836904362@qq.com> Date: Wed, 1 Apr 2020 23:20:01 +0800 Subject: [PATCH 7/8] update Badge doc --- .../extend_controls/badge/index.md | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/doc/source/handycontrol/extend_controls/badge/index.md b/doc/source/handycontrol/extend_controls/badge/index.md index 0925107e..fcf8bb57 100644 --- a/doc/source/handycontrol/extend_controls/badge/index.md +++ b/doc/source/handycontrol/extend_controls/badge/index.md @@ -19,7 +19,7 @@ public class Badge : ContentControl | BadgeMargin | 获取或设置标记相对于被修饰控件的外边距 | | ShowBadge | 获取或设置是否显示标记,默认为True | -`xaml`中,记得引入`handycontrol`的命名空间 +`xaml`中,记得引入`handycontrol`的命名空间。 ```xml xmlns:hc="https://handyorg.github.io/handycontrol" @@ -27,7 +27,7 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ## `Text`和`Value` -可能看到属性解释,会比较疑惑,`Text`和`Value`在现实效果和数据填写时,是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`,由于标记的`Status`默认为文本 +可能看到属性解释,会比较疑惑,`Text`和`Value`在效果和数值上是一样的,这有什么区别?在标记控件中,将文本和数值类型进行区分,数值类型能够进行动态的变更以及数据统计显示效果,当两者同时存在时,默认显示`Text`。 ### 案例 @@ -148,7 +148,7 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ![Badge-Styles](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Styles.png) -# 常见问题 +# FAQ ## 坐标偏移问题[版本 小于等于 2.4] @@ -182,24 +182,4 @@ xmlns:hc="https://handyorg.github.io/handycontrol" ``` -![Badge-ErrorCorrection01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-ErrorCorrection01.png) - -## 标记适用范围 - -标记派生至`ContentControl`,不支持多子集,仅仅能够包含一个子集,支持`ContentControl`支持的所有控件作为被标记控件 - -```xml - - - - - - -``` - -![Badge-Attention01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-Attention01.png) - - - - - +![Badge-ErrorCorrection01](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Badge-ErrorCorrection01.png) \ No newline at end of file From 4fe502de778527e99998bcd12b600d0102dabbfa Mon Sep 17 00:00:00 2001 From: NaBian <836904362@qq.com> Date: Wed, 1 Apr 2020 23:20:11 +0800 Subject: [PATCH 8/8] update Card doc --- doc/source/handycontrol/extend_controls/card/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/source/handycontrol/extend_controls/card/index.md b/doc/source/handycontrol/extend_controls/card/index.md index 894d8dfd..98a172fb 100644 --- a/doc/source/handycontrol/extend_controls/card/index.md +++ b/doc/source/handycontrol/extend_controls/card/index.md @@ -2,7 +2,7 @@ title: Card 卡片 --- -`Card`卡片作为同类型信息展示块,主要有内容头部以及尾部组成,常用于做集合类控件的子级模板使用,展示相同外观不同内容的卡片式风格数据,为`ContentControl`的派生类 +用于卡片化展示数据,为`ContentControl`的派生类 ```c# public class Card : ContentControl