add doc

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。
+此样式在`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 %}

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 %}

doc/source/handycontrol/native_controls/calendar/index.md

@@ -1,5 +1,16 @@
 ---
-title: 建设中
+title: Calendar 日历
 ---
 
-建设中
+# CalendarBaseStyle
+
+日历默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+{% note info no-icon %}
+用例：
+
+{% code %}
+<Calendar/>
+{% endcode %}
+![Calendar](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Calendar.jpg)
+{% endnote %}

doc/source/handycontrol/native_controls/checkBox/index.md

@@ -1,5 +1,23 @@
 ---
-title: 建设中
+title: CheckBox 复选框
 ---
 
-建设中
+# 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 %}

doc/source/handycontrol/native_controls/comboBox/index.md

@@ -1,5 +1,19 @@
 ---
-title: 建设中
+title: ComboBox 组合框
 ---
 
-建设中
+# ComboBoxBaseStyle
+
+原生组合框默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+# ComboBoxExtendBaseStyle : ComboBoxBaseStyle
+
+原生组合框扩展默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+# ComboBoxPlusBaseStyle : ComboBoxExtendBaseStyle
+
+扩展组合框默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用。
+
+# ComboBoxExtend : ComboBoxExtendBaseStyle
+
+相对于原生组合框默认样式，它借助于附加属性可以实现标题、水印的功能。