diff --git a/doc/source/handycontrol/basic_xaml/behaviors/index.md b/doc/source/handycontrol/basic_xaml/behaviors/index.md
index f800ba81..d994b47f 100644
--- a/doc/source/handycontrol/basic_xaml/behaviors/index.md
+++ b/doc/source/handycontrol/basic_xaml/behaviors/index.md
@@ -13,6 +13,6 @@ title: 行为
 | BehaviorX400 | 流体移动行为，x轴运动，400毫秒结束动画 |
 | BehaviorY400 | 流体移动行为，y轴运动，400毫秒结束动画 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`controls:PanelElement.FluidMoveBehavior="{StaticResource BehaviorXY200}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/brushes/index.md b/doc/source/handycontrol/basic_xaml/brushes/index.md
index 05cd9a74..41c0e970 100644
--- a/doc/source/handycontrol/basic_xaml/brushes/index.md
+++ b/doc/source/handycontrol/basic_xaml/brushes/index.md
@@ -35,6 +35,6 @@ title: 画刷
 | DarkMaskBrush | 作为遮罩使用 |
 | DarkOpacityBrush | 半透明背景 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`Foreground="{DynamicResource PrimaryBrush}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/colors/index.md b/doc/source/handycontrol/basic_xaml/colors/index.md
index 88de4115..e9a77cb8 100644
--- a/doc/source/handycontrol/basic_xaml/colors/index.md
+++ b/doc/source/handycontrol/basic_xaml/colors/index.md
@@ -45,6 +45,6 @@ title: 颜色
 | DarkOpacityColor | 半透明背景 |
 | BlurGradientValue | 仅用于模糊窗口的背景 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`Color="{DynamicResource PrimaryColor}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/converters/index.md b/doc/source/handycontrol/basic_xaml/converters/index.md
index b17ea0fd..3af87443 100644
--- a/doc/source/handycontrol/basic_xaml/converters/index.md
+++ b/doc/source/handycontrol/basic_xaml/converters/index.md
@@ -62,7 +62,7 @@ title: 转换器
 
 该转换器用于为TreeViewItem提供适当的左边距。
 
-{% note info %}
+{% note info no-icon %}
 用例：
 
 {% code %}
diff --git a/doc/source/handycontrol/basic_xaml/effects/index.md b/doc/source/handycontrol/basic_xaml/effects/index.md
index 5bdfd1c7..78138a6d 100644
--- a/doc/source/handycontrol/basic_xaml/effects/index.md
+++ b/doc/source/handycontrol/basic_xaml/effects/index.md
@@ -13,6 +13,6 @@ title: 效果
 | EffectShadow4 | 25 |
 | EffectShadow5 | 35 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`Effect="{StaticResource EffectShadow5}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/fonts/index.md b/doc/source/handycontrol/basic_xaml/fonts/index.md
index 4b5340af..7e6de631 100644
--- a/doc/source/handycontrol/basic_xaml/fonts/index.md
+++ b/doc/source/handycontrol/basic_xaml/fonts/index.md
@@ -9,6 +9,6 @@ title: 字体大小
 | SubHeadFontSize | 16 | 子功能标题 |
 | TextFontSize | 12 | 文本 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`FontSize="{StaticResource LargeFontSize}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/geometries/index.md b/doc/source/handycontrol/basic_xaml/geometries/index.md
index 9da1ee57..7304c03f 100644
--- a/doc/source/handycontrol/basic_xaml/geometries/index.md
+++ b/doc/source/handycontrol/basic_xaml/geometries/index.md
@@ -42,6 +42,6 @@ HandyControl中自带了一些几何形状定义，但要应用于生产中显
 | AllGeometry | 所有 |
 | DragGeometry | 拖拽（用于工具条） |
 
-{% note info %}
+{% note info no-icon %}
 用例：`Data="{StaticResource DragGeometry}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/paths/index.md b/doc/source/handycontrol/basic_xaml/paths/index.md
index 5335c7be..3205d938 100644
--- a/doc/source/handycontrol/basic_xaml/paths/index.md
+++ b/doc/source/handycontrol/basic_xaml/paths/index.md
@@ -25,6 +25,6 @@ title: Path路径
 | RightPathStyle | 向右 |
 | UpDownPathStyle | 上和下的组合 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`Style="{StaticResource SearchPathStyle}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/basic_xaml/sizes/index.md b/doc/source/handycontrol/basic_xaml/sizes/index.md
index 2846cfe7..e8b38ee2 100644
--- a/doc/source/handycontrol/basic_xaml/sizes/index.md
+++ b/doc/source/handycontrol/basic_xaml/sizes/index.md
@@ -9,6 +9,6 @@ title: 尺寸
 | DefaultInputPadding | System.Windows.Thickness | 8,6 |默认输入控件内边距 |
 | DefaultCornerRadius | System.Windows.CornerRadius | 4 | 默认圆角 |
 
-{% note info %}
+{% note info no-icon %}
 用例：`CornerRadius="{StaticResource DefaultCornerRadius}"`
 {% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/extend_controls/growl/index.md b/doc/source/handycontrol/extend_controls/growl/index.md
index acb67970..8a7b8c0e 100644
--- a/doc/source/handycontrol/extend_controls/growl/index.md
+++ b/doc/source/handycontrol/extend_controls/growl/index.md
@@ -33,8 +33,8 @@ title: Growl 信息通知
 
 第二步：调用`Growl`的相关接口来显示指定的消息
 
-{% note info %}
-例如：`Growl.Success("文件保存成功！");`
+{% note info no-icon %}
+用例：`Growl.Success("文件保存成功！");`
 {% endnote %}
 
 # 只在激活中的窗口显示信息通知
@@ -67,8 +67,8 @@ title: Growl 信息通知
 
 第二步：使用消息标记：SuccessMsg，并调用`Growl`的相关接口来显示指定的消息
 
-{% note info %}
-例如：`Growl.Success("文件保存成功！", "SuccessMsg");`
+{% note info no-icon %}
+用例：`Growl.Success("文件保存成功！", "SuccessMsg");`
 {% endnote %}
 
 {% note warning %}
diff --git a/doc/source/handycontrol/native_controls/border/index.md b/doc/source/handycontrol/native_controls/border/index.md
index 1db4121b..63da2560 100644
--- a/doc/source/handycontrol/native_controls/border/index.md
+++ b/doc/source/handycontrol/native_controls/border/index.md
@@ -49,14 +49,72 @@ title: Border 边框
 
 此样式使用1单位宽度的Border来分割横向排列的控件。
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Height="20" Orientation="Horizontal">
+    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderVerticallySplitter}"/>
+    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderVerticallySplitter}"/>
+    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderVerticallySplitter}"/>
+    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderVerticallySplitter}"/>
+    <Ellipse Margin="5,0" Fill="OrangeRed" Width="20" Height="20"/>
+</StackPanel>
+{% endcode %}
+![BorderVerticallySplitter](../images/BorderVerticallySplitter_1.png)
+{% endnote %}
+
 # BorderHorizontallySplitter
 
 此样式使用1单位高度的Border来分割纵向排列的控件。
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Width="20">
+    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
+    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
+    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
+    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
+    <Border Style="{StaticResource BorderHorizontallySplitter}"/>
+    <Ellipse Margin="0,5" Fill="OrangeRed" Width="20" Height="20"/>
+</StackPanel>
+{% endcode %}
+![BorderHorizontallySplitter](../images/BorderHorizontallySplitter_1.png)
+{% endnote %}
+
 # BorderCircular
 
 此样式借助`BorderElement.Circular`附加属性可实现圆形Border。
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<Border Style="{StaticResource BorderCircular}" Background="OrangeRed" Width="100" Height="100"/>
+{% endcode %}
+![BorderCircular](../images/BorderCircular_1.png)
+{% endnote %}
+
 # BorderClip
 
-此样式在`BorderCircular`基础上添加了裁剪功能，常用于显示圆形Image。
\ No newline at end of file
+此样式在`BorderCircular`基础上添加了裁剪功能，常用于显示圆形Image。
+
+{% note info no-icon %}
+用例：
+
+{% code %}
+<Border Style="{StaticResource BorderClip}" Width="100" Height="100">
+    <Image Source="/HandyControlDemo;component/Resources/Img/Album/2.jpg"/>
+</Border>
+{% endcode %}
+![BorderClip](../images/BorderClip_1.png)
+{% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/button/index.md b/doc/source/handycontrol/native_controls/button/index.md
index ada84134..4a82fbe8 100644
--- a/doc/source/handycontrol/native_controls/button/index.md
+++ b/doc/source/handycontrol/native_controls/button/index.md
@@ -4,7 +4,7 @@ title: Button 按钮
 
 # ButtonBaseStyle : ButtonBaseBaseStyle
 
-默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+按钮默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
 
 {% note info %}
 所有继承此样式的按钮都可以使用`IconElement`中定义的附加属性来控制按钮中几何图形的属性。
@@ -14,31 +14,130 @@ title: Button 按钮
 所有继承此样式的按钮都可以使用`BorderElement.CornerRadius`附加属性来控制按钮的圆角大小。
 {% endnote %}
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Content="这是一个按钮"/>
+    <Button Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
+    <Button Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
+</StackPanel>
+{% endcode %}
+![ButtonBaseStyle](../images/ButtonBaseStyle_1.png)
+{% endnote %}
+
 # ButtonPrimary : ButtonBaseStyle
 
 主要按钮
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮"/>
+    <Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
+    <Button Style="{StaticResource ButtonPrimary}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
+</StackPanel>
+{% endcode %}
+![ButtonPrimary](../images/ButtonPrimary_1.png)
+{% endnote %}
+
 # ButtonSuccess : ButtonBaseStyle
 
 成功按钮
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮"/>
+    <Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
+    <Button Style="{StaticResource ButtonSuccess}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
+</StackPanel>
+{% endcode %}
+![ButtonSuccess](../images/ButtonSuccess_1.png)
+{% endnote %}
+
 # ButtonInfo : ButtonBaseStyle
 
 信息按钮
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮"/>
+    <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
+    <Button Style="{StaticResource ButtonInfo}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
+</StackPanel>
+{% endcode %}
+![ButtonInfo](../images/ButtonInfo_1.png)
+{% endnote %}
+
 # ButtonWarning : ButtonBaseStyle
 
 警告按钮
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮"/>
+    <Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
+    <Button Style="{StaticResource ButtonWarning}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
+</StackPanel>
+{% endcode %}
+![ButtonWarning](../images/ButtonWarning_1.png)
+{% endnote %}
+
 # ButtonDanger : ButtonBaseStyle
 
 危险操作按钮
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮"/>
+    <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:BorderElement.CornerRadius="15"/>
+    <Button Style="{StaticResource ButtonDanger}" Content="这是一个按钮" Margin="10,0,0,0" controls:IconElement.Geometry="{StaticResource GithubGeometry}"/>
+</StackPanel>
+{% endcode %}
+![ButtonDanger](../images/ButtonDanger_1.png)
+{% endnote %}
+
 # ButtonIcon : ButtonBaseStyle
 
 如果只想显示几何图形按钮，则推荐使用此样式。
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel Orientation="Horizontal">
+    <Button Style="{StaticResource ButtonIcon}" Foreground="Black" controls:IconElement.Geometry="{StaticResource UpDownGeometry}"/>
+    <Button Style="{StaticResource ButtonIcon}" Background="Black" Foreground="White" controls:BorderElement.CornerRadius="15" controls:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/>
+    <Button Style="{StaticResource ButtonIcon}" BorderThickness="1" BorderBrush="Black" Foreground="Black" controls:IconElement.Geometry="{StaticResource UpDownGeometry}" Margin="10,0,0,0"/>
+</StackPanel>
+{% endcode %}
+![ButtonIcon](../images/ButtonIcon_1.png)
+{% endnote %}
+
 # ButtonCustom
 
-如果想完全自定义按钮的内容，则推荐使用此样式。
+如果想完全自定义按钮的内容，则推荐使用此样式。`ButtonCustom`中的内容完全由你自己决定，另外，可以通过`BackgroundSwitchElement`中的附加属性切换背景：
 
+{% note info no-icon %}
+用例：
+
+{% code %}
+<Button Height="30" Padding="10,0" Background="Black" Foreground="White" Content="这是一个按钮" Style="{StaticResource ButtonCustom}" controls:BackgroundSwitchElement.MouseHoverBackground="Red" controls:BackgroundSwitchElement.MouseDownBackground="PaleVioletRed"/>
+{% endcode %}
+![ButtonCustom](../images/ButtonCustom_1.gif)
+{% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/calendar/index.md b/doc/source/handycontrol/native_controls/calendar/index.md
index ca12ad62..6f7f0482 100644
--- a/doc/source/handycontrol/native_controls/calendar/index.md
+++ b/doc/source/handycontrol/native_controls/calendar/index.md
@@ -1,5 +1,16 @@
 ---
-title: 建设中
+title: Calendar 日历
 ---
 
-建设中
\ No newline at end of file
+# CalendarBaseStyle
+
+日历默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+{% note info no-icon %}
+用例：
+
+{% code %}
+<Calendar/>
+{% endcode %}
+![Calendar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Calendar.jpg)
+{% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/checkBox/index.md b/doc/source/handycontrol/native_controls/checkBox/index.md
index ca12ad62..4218e941 100644
--- a/doc/source/handycontrol/native_controls/checkBox/index.md
+++ b/doc/source/handycontrol/native_controls/checkBox/index.md
@@ -1,5 +1,23 @@
 ---
-title: 建设中
+title: CheckBox 复选框
 ---
 
-建设中
\ No newline at end of file
+# CheckBoxBaseStyle
+
+复选框默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+{% note info no-icon %}
+用例：
+
+{% code %}
+<StackPanel>
+    <CheckBox Content="CheckBox" IsChecked="True"/>
+    <CheckBox Margin="0,16,0,0" Content="CheckBox" IsChecked="True" IsEnabled="False"/>
+    <CheckBox Margin="0,16,0,0" Content="CheckBox"/>
+    <CheckBox Margin="0,16,0,0" Content="CheckBox" IsEnabled="False"/>
+    <CheckBox Margin="0,16,0,0" Content="CheckBox" IsChecked="{x:Null}"/>
+    <CheckBox Margin="0,16,0,0" Content="CheckBox" IsChecked="{x:Null}" IsEnabled="False"/>
+</StackPanel>
+{% endcode %}
+![CheckBox](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/CheckBox.png)
+{% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/comboBox/index.md b/doc/source/handycontrol/native_controls/comboBox/index.md
index ca12ad62..6c05f375 100644
--- a/doc/source/handycontrol/native_controls/comboBox/index.md
+++ b/doc/source/handycontrol/native_controls/comboBox/index.md
@@ -1,5 +1,19 @@
 ---
-title: 建设中
+title: ComboBox 组合框
 ---
 
-建设中
\ No newline at end of file
+# ComboBoxBaseStyle
+
+原生组合框默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+# ComboBoxExtendBaseStyle : ComboBoxBaseStyle
+
+原生组合框扩展默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+# ComboBoxPlusBaseStyle : ComboBoxExtendBaseStyle
+
+扩展组合框默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+# ComboBoxExtend : ComboBoxExtendBaseStyle
+
+相对于原生组合框默认样式，它借助于附加属性可以实现标题、水印的功能。
\ No newline at end of file
diff --git a/doc/source/handycontrol/native_controls/images/BorderCircular_1.png b/doc/source/handycontrol/native_controls/images/BorderCircular_1.png
new file mode 100644
index 00000000..9cc0f769
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/BorderCircular_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/BorderClip_1.png b/doc/source/handycontrol/native_controls/images/BorderClip_1.png
new file mode 100644
index 00000000..b52e9ff0
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/BorderClip_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/BorderHorizontallySplitter_1.png b/doc/source/handycontrol/native_controls/images/BorderHorizontallySplitter_1.png
new file mode 100644
index 00000000..4ef9dee9
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/BorderHorizontallySplitter_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/BorderVerticallySplitter_1.png b/doc/source/handycontrol/native_controls/images/BorderVerticallySplitter_1.png
new file mode 100644
index 00000000..2555e3c8
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/BorderVerticallySplitter_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonBaseStyle_1.png b/doc/source/handycontrol/native_controls/images/ButtonBaseStyle_1.png
new file mode 100644
index 00000000..40586f1f
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonBaseStyle_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonCustom_1.gif b/doc/source/handycontrol/native_controls/images/ButtonCustom_1.gif
new file mode 100644
index 00000000..e53ed520
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonCustom_1.gif differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonDanger_1.png b/doc/source/handycontrol/native_controls/images/ButtonDanger_1.png
new file mode 100644
index 00000000..f9d9fb8b
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonDanger_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonIcon_1.png b/doc/source/handycontrol/native_controls/images/ButtonIcon_1.png
new file mode 100644
index 00000000..64252ba5
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonIcon_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonInfo_1.png b/doc/source/handycontrol/native_controls/images/ButtonInfo_1.png
new file mode 100644
index 00000000..ad97bc60
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonInfo_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonPrimary_1.png b/doc/source/handycontrol/native_controls/images/ButtonPrimary_1.png
new file mode 100644
index 00000000..4cd60092
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonPrimary_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonSuccess_1.png b/doc/source/handycontrol/native_controls/images/ButtonSuccess_1.png
new file mode 100644
index 00000000..076bd8b7
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonSuccess_1.png differ
diff --git a/doc/source/handycontrol/native_controls/images/ButtonWarning_1.png b/doc/source/handycontrol/native_controls/images/ButtonWarning_1.png
new file mode 100644
index 00000000..d33e2980
Binary files /dev/null and b/doc/source/handycontrol/native_controls/images/ButtonWarning_1.png differ
diff --git a/doc/source/handycontrol/specifications/index.md b/doc/source/handycontrol/specifications/index.md
new file mode 100644
index 00000000..57a08ee0
--- /dev/null
+++ b/doc/source/handycontrol/specifications/index.md
@@ -0,0 +1,37 @@
+---
+title: 规范
+---
+
+HandyControl中有一些贯穿全部生命周期的规范，此文档将逐条列举。
+
+# 样式命名规范
+
+- 带有BaseStyle后缀的样式，不推荐在视图层使用，而适合于扩展。
+
+{% note info %}
+例如`ButtonBaseStyle`、`ComboBoxBaseStyle`。
+{% endnote %}
+
+- 带有Extend字样的样式，为原生控件样式的扩展模式，它比没有该字样的样式多一些功能。
+
+{% note info %}
+例如`ComboBoxExtendBaseStyle`、`TextBoxExtendBaseStyle`。
+{% endnote %}
+
+- 带有Plus字样的样式，为扩展控件的默认样式，它比`Extend`样式多一些功能。
+
+{% note info %}
+例如`ComboBoxPlusBaseStyle`、`TextBoxPlusBaseStyle`。
+{% endnote %}
+
+{% note info %}
+如果一个控件拥有`Plus`样式，说明在原生库中存在与其同名的控件。
+{% endnote %}
+
+# 控件命名规范
+
+- 功能和原生控件相似的扩展控件一般名称和原生控件一致。
+
+{% note info %}
+例如`Window`、`TabControl`、`ScrollViewer`,原生库中有这三个控件，但是HandyControl中也有，且名称一致。
+{% endnote %}
\ No newline at end of file
diff --git a/doc/source/handycontrol/tnx/index.md b/doc/source/handycontrol/tnx/index.md
index 5f2c7a01..4a7f298c 100644
--- a/doc/source/handycontrol/tnx/index.md
+++ b/doc/source/handycontrol/tnx/index.md
@@ -12,4 +12,8 @@ title: 鸣谢
 
 # 感谢以下组织机构提供开源许可
 
-<p><a style="border:0" href="https://www.jetbrains.com/?from=HandyControl" target="_blank" rel="noopener"><img width="70" height="70" src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/resharper_logo.png" alt="JetBrains"></a></p>
\ No newline at end of file
+<p><a style="border:0" href="https://www.jetbrains.com/?from=HandyControl" target="_blank" rel="noopener"><img width="70" height="70" src="https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/resharper_logo.png" alt="JetBrains"></a></p>
+
+# 感谢以下捐赠者
+
+<p><a style="border:0" href="https://github.com/bigorange1900" target="_blank" rel="noopener"><img width="120" height="120" src="https://avatars1.githubusercontent.com/u/49062011?s=400&v=4" alt="bigorange1900"></a></p>
\ No newline at end of file
diff --git a/doc/themes/next/_config.yml b/doc/themes/next/_config.yml
index ef3f606e..49b310a1 100644
--- a/doc/themes/next/_config.yml
+++ b/doc/themes/next/_config.yml
@@ -162,6 +162,7 @@ menu:
     default: /handycontrol/ ||
     鸣谢: /tnx/ ||
     总览: /overview/ ||
+    规范: /specifications/ ||
     基础xaml定义: 
       default: /basic_xaml/ ||
       行为: /behaviors/ ||