chfei/HandyControl
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completed extend-controls docs

Browse Source
This commit is contained in:
NaBian committed 2020-08-23 18:28:53 +08:00
1 parent 625aeba450
commit db8ce28254
28 files changed
+555 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

doc/source/handycontrol/attach/dropDownElement/index.md
+9
View File
@@ -0,0 +1,9 @@
---
title: DropDownElement 可下拉内容的元素
---
# 属性
| 名称 | 用途 |
|-|-|
| ConsistentWidth | 下拉内容是否和下拉框宽度一致 |
doc/source/handycontrol/attach/imageAttach/index.md
+9
View File
@@ -0,0 +1,9 @@
---
title: ImageAttach Image专用
---
# 属性
| 名称 | 用途 |
|-|-|
| SourceFailed | 图片加载失败后显示的图片 |
doc/source/handycontrol/attach/infoElement/index.md
+6 -1
View File
@@ -18,6 +18,7 @@ title: InfoElement 信息元素
| ContentHeight | 内容高度 |
| MinContentHeight | 最小内容高度 |
| MaxContentHeight | 最大内容高度 |
| RegexPattern | 正则表达式 |
# 使用案例
@@ -66,4 +67,8 @@ title: InfoElement 信息元素
Style="{StaticResource SearchBarExtend}"/>
```
![InfoElement.ContentHeight](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/InfoElement.ContentHeight.png)
![InfoElement.ContentHeight](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/InfoElement.ContentHeight.png)
## RegexPattern 正则表达式
通过设置该属性，可自定义信息元素内部的验证逻辑实现对指定格式外的内容进行错误提示。
doc/source/handycontrol/attach/tipElement/index.md
+1
View File
@@ -8,6 +8,7 @@ title: TipElement 提示元素
| ---------- | -------- |
| Placement | 提示元素显示位置 |
| Visibility | 是否可见 |
| StringFormat | 文本格式 |
# 使用案例
doc/source/handycontrol/attach/titleElement/index.md
+7 -7
View File
@@ -10,7 +10,7 @@ title: TitleElement 标题元素
| Background | 标题背景色 |
| Foreground | 标题字体色 |
| BorderBrush | 标题边框色 |
| TitleAlignment | 标题对齐方式 |
| TitlePlacement | 标题对齐方式 |
| TitleWidth | 标题宽度 |
# 使用案例
@@ -24,32 +24,32 @@ title: TitleElement 标题元素
![TitleElement.Title](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/TitleElement.Title.png)
## TitleAlignment 标题对齐方式
## TitlePlacement 标题对齐方式
```xml
<!--标题居于顶侧-->
<hc:TextBox hc:TitleElement.Title="标题信息"
hc:TitleElement.TitleAlignment="Top"
hc:TitleElement.TitlePlacement="Top"
Margin="10,10"></hc:TextBox>
<!--标题居于左侧-->
<hc:TextBox hc:TitleElement.Title="标题信息"
hc:TitleElement.TitleAlignment="Left"
hc:TitleElement.TitlePlacement="Left"
Margin="10,10"></hc:TextBox>
```
![TitleElement.TitleAlignment](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/TitleElement.TitleAlignment.png)
![TitleElement.TitlePlacement](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/attach/TitleElement.TitlePlacement.png)
## TitleWidth 标题宽度
```xml
<!--设定TitleWidth为Auto-->
<hc:TextBox hc:TitleElement.Title="标题信息"
hc:TitleElement.TitleAlignment="Left"
hc:TitleElement.TitlePlacement="Left"
hc:TitleElement.TitleWidth="Auto"
Margin="10,10"></hc:TextBox>
<!--设定TitleWidth为具体数值-->
<hc:TextBox hc:TitleElement.Title="标题信息"
hc:TitleElement.TitleAlignment="Left"
hc:TitleElement.TitlePlacement="Left"
hc:TitleElement.TitleWidth="60"
Margin="10,10"></hc:TextBox>
```
doc/source/handycontrol/attach/visualElement/index.md
+3
View File
@@ -7,6 +7,9 @@ title: VisualElement 可视化元素
| 名称 | 用途 |
| -------------- | ---------------- |
| HighlightBrush | 设置控件高亮颜色 |
| HighlightBackground | 设置控件高亮背景颜色 |
| HighlightBorderBrush | 设置控件高亮边框颜色 |
| HighlightForeground | 设置控件高亮前景颜色 |
| Text | 设置文本内容 |
# 使用案例
doc/source/handycontrol/extend_controls/blurWindow/index.md
+44
View File
@@ -0,0 +1,44 @@
---
title: BlurWindow 背景模糊窗口
---
背景模糊窗口可用于增强UI效果，但是会牺牲部分性能.
```cs
public class BlurWindow : Window
```
{% note warning %}
操作系统支持范围：win10 10240 ~ win10 18362
{% endnote %}
{% note warning %}
重写资源 `BlurGradientValue` 可自定义模糊颜色
{% endnote %}
# 案例
```xml
<system:UInt32 x:Key="BlurGradientValue">0x99FFFFFF</system:UInt32>
```
```xml
<hc:BlurWindow x:Class="HandyControlDemo.Window.BlurWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:hc="https://handyorg.github.io/handycontrol"
xmlns:langs="clr-namespace:HandyControlDemo.Properties.Langs"
xmlns:ex="clr-namespace:HandyControlDemo.Tools.Extension"
mc:Ignorable="d"
Style="{StaticResource WindowBlur}"
WindowStartupLocation="CenterScreen"
Title="{ex:Lang Key={x:Static langs:LangKeys.Title}}"
Height="450"
Width="800"
Icon="/HandyControlDemo;component/Resources/Img/icon.ico">
</hc:BlurWindow>
```
![BlurWindow](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/BlurWindow.png)
doc/source/handycontrol/extend_controls/checkComboBox/index.md
+84
View File
@@ -0,0 +1,84 @@
---
title: CheckComboBox 复选组合框
---
可选选中多个项目的组合框.
```cs
[TemplatePart(Name = ElementPanel, Type = typeof(Panel))]
[TemplatePart(Name = ElementSelectAll, Type = typeof(CheckComboBoxItem))]
public class CheckComboBox : ListBox, IDataInput
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|VerifyFunc|数据验证委托|||
|IsError|数据是否错误|false||
|ErrorStr|错误提示|||
|TextType|文本类型|||
|ShowClearButton|是否显示清除按钮|false||
|MaxDropDownHeight|下拉内容最大高度|||
|IsDropDownOpen|下拉框是否展开|false||
|TagStyle|选中标记样式|||
|ShowSelectAllButton|是否显示选中所有按钮|false|||
# 附加属性
|属性|描述|默认值|备注|
|-|-|-|-|
|InfoElement.Placeholder|占位符|||
|InfoElement.Necessary|是否必填|false||
|InfoElement.Symbol|必填标记|●||
|InfoElement.ContentHeight|内容高度|30|标题在上时可用|
|InfoElement.MinContentHeight|最小内容高度|30|标题在上时可用|
|TitleElement.Title|标题|||
|TitleElement.TitlePlacement|标题对齐方式|TitlePlacementType.Top||
|TitleElement.TitleWidth|标题宽度|120||
|DropDownElement.ConsistentWidth|下拉内容是否和下拉框宽度一致|false|||
# 方法
|方法|描述|备注|
|-|-|-|
|VerifyData|验证数据|可手动触发验证|
# 样式
|样式|描述|
|-|-|
|CheckComboBoxBaseStyle|默认样式|
|CheckComboBoxExtendBaseStyle|默认扩展样式|
|CheckComboBoxPlusBaseStyle|默认增强样式|
|CheckComboBoxExtend|扩展样式|
|CheckComboBoxPlus|增强样式|
# 案例
```xml
<StackPanel Margin="32" Orientation="Horizontal">
<StackPanel>
<hc:CheckComboBox ShowClearButton="True" MaxWidth="380" ItemsSource="{Binding DataList}" ShowSelectAllButton="True"/>
<hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxExtend}" Margin="0,16,0,0" IsEnabled="False" ShowSelectAllButton="True"/>
<hc:CheckComboBox ShowClearButton="True" MaxWidth="380" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" ShowSelectAllButton="True"/>
<hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
<hc:CheckComboBox ShowClearButton="True" Width="380" ItemsSource="{Binding DataList}" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Margin="0,32,0,0" ShowSelectAllButton="True"/>
<hc:CheckComboBox Width="380" ItemsSource="{Binding DataList}" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource CheckComboBoxExtend}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
</StackPanel>
<StackPanel Margin="32,0,0,0">
<hc:CheckComboBox ShowClearButton="True" MaxWidth="380" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxPlus}" ShowSelectAllButton="True"/>
<hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" Margin="0,16,0,0" IsEnabled="False" Style="{StaticResource CheckComboBoxPlus}"/>
<hc:CheckComboBox MaxWidth="380" ShowClearButton="True" ItemsSource="{Binding DataList}" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" ShowSelectAllButton="True"/>
<hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr2}}" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
<hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" ShowClearButton="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Margin="0,32,0,0" ShowSelectAllButton="True"/>
<hc:CheckComboBox MaxWidth="380" ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource CheckComboBoxPlus}" hc:InfoElement.Necessary="True" Margin="0,16,0,0"/>
</StackPanel>
</StackPanel>
```
![CheckComboBox](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/CheckComboBox.png)
doc/source/handycontrol/extend_controls/comboBox/index.md
+2 -1
View File
@@ -30,7 +30,8 @@ public class ComboBox : System.Windows.Controls.ComboBox, IDataInput
|InfoElement.MinContentHeight|最小内容高度|30|标题在上时可用|
|TitleElement.Title|标题|||
|TitleElement.TitlePlacement|标题对齐方式|TitlePlacementType.Top||
|TitleElement.TitleWidth|标题宽度|120|||
|TitleElement.TitleWidth|标题宽度|120||
|DropDownElement.ConsistentWidth|下拉内容是否和下拉框宽度一致|false|||
# 方法
doc/source/handycontrol/extend_controls/contextMenuButton/index.md
+5
View File
@@ -0,0 +1,5 @@
---
title: ContextMenuButton 上下文菜单按钮
---
HC提供了两个上下文菜单按钮，分别是 `ContextMenuButton` 和 `ContextMenuToggleButton`，它们的使用方式和普通 `Button`、`ToggleButton` 一致，唯一的区别是提供了 `Menu` 属性，可用于实现点击按钮弹出上下文菜单的效果。
doc/source/handycontrol/extend_controls/dashedBorder/index.md
+35
View File
@@ -0,0 +1,35 @@
---
title: DashedBorder 虚线边框
---
一种装饰元素，可提供虚线边框，以实现某些特殊效果.
```cs
public class DashedBorder : Decorator
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|BorderThickness|边框粗细|||
|BorderDashThickness|边框虚线粗细|0||
|Padding|内边距|||
|CornerRadius|圆角|||
|BorderBrush|边框颜色|||
|Background|背景色|||
|BorderDashArray|边框虚线数组|||
|BorderDashCap|边框虚线线帽样式|PenLineCap.Flat||
|BorderDashOffset|边框虚线偏移|0|||
# 案例
```xml
<hc:DashedBorder Width="100" Height="100" BorderDashThickness="2" BorderBrush="Black" BorderDashArray="3, 1" CornerRadius="0,50,0,0"/>
```
![DashedBorder](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/DashedBorder.png)
{% note warning %}
当需要设置边框粗细时要注意，如果4个圆角数值一致，请使用 `BorderThickness`，否则请使用 `BorderDashThickness`
{% endnote %}
doc/source/handycontrol/extend_controls/datePicker/index.md
+1 -1
View File
@@ -47,7 +47,7 @@ datePicker.SelectedDate = DateTime.Now;
``` XML
<hc:DatePicker hc:InfoElement.TitleWidth="140"
hc:InfoElement.TitleAlignment="Left"
hc:InfoElement.TitlePlacement="Left"
hc:InfoElement.Placeholder="{x:Static langs:Lang.PlsEnterContent}"
hc:InfoElement.Title="{x:Static langs:Lang.TitleDemoStr3}" />
```
doc/source/handycontrol/extend_controls/imageSelector/index.md
+43
View File
@@ -0,0 +1,43 @@
---
title: ImageSelector 图片选择器
---
该控件封装了图片选择、展示、删除的一整套逻辑.
```cs
public class ImageSelector : Control
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|Stretch|图片拉伸模式|Stretch.None||
|Uri|图片资源|||
|PreviewBrush|预览图画刷|||
|StrokeThickness|边框粗细|||
|StrokeDashArray|边框虚线数组|||
|DefaultExt|默认图片后缀名|.jpg||
|Filter|图片过滤字符串|(.jpg)&#124;*.jpg&#124;(.png)&#124;*.png||
|HasValue|是否有值|false|||
# 样式
|样式|描述|
|-|-|
|ImageSelectorBaseStyle|默认样式|
# 案例
```xml
<UniformGrid Columns="3" Margin="16">
<hc:ImageSelector Width="100" Height="100" Margin="16"/>
<hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50"/>
<hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" StrokeDashArray="10,5"/>
<hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" BorderBrush="{DynamicResource SuccessBrush}"/>
<hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="50" StrokeDashArray="10,5,10" BorderBrush="{DynamicResource DangerBrush}"/>
<hc:ImageSelector Width="100" Height="100" Margin="16" hc:BorderElement.CornerRadius="10" StrokeThickness="2" BorderThickness="2" BorderBrush="{DynamicResource PrimaryBrush}"/>
</UniformGrid>
```
![ImageSelector](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/ImageSelector.png)
doc/source/handycontrol/extend_controls/pagination/index.md
+1 -1
View File
@@ -38,7 +38,7 @@ public class Pagination : Control
<hc:Pagination MaxPageCount="10" PageIndex="5" IsJumpEnabled="True"/>
```
![Pagination](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/Pagination.png)
![Pagination](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Pagination.png)
{% note warning %}
当页码为1时，页码条整体不会显示。
doc/source/handycontrol/extend_controls/propertyGrid/index.md
+135
View File
@@ -0,0 +1,135 @@
---
title: PropertyGrid 属性编辑器
---
可自动为模型对象中的属性生成与之相匹配的编辑器集合.
```cs
[TemplatePart(Name = ElementItemsControl, Type = typeof(ItemsControl))]
[TemplatePart(Name = ElementSearchBar, Type = typeof(SearchBar))]
public class PropertyGrid : Control
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|PropertyResolver|属性解析器|new PropertyResolver||
|SelectedObject|模型对象|||
|Description|描述|||
|MaxTitleWidth|最大标题宽度|0||
|MinTitleWidth|最小标题宽度|0|||
# 自带编辑器
|名称|说明|
|-|-|
| DatePropertyEditor | 日期编辑器 |
| DateTimePropertyEditor | 日期时间编辑器 |
| EnumPropertyEditor | 枚举编辑器 |
| HorizontalAlignmentPropertyEditor | 水平对齐方式编辑器 |
| ImagePropertyEditor | 图片编辑器 |
| NumberPropertyEditor | 数字编辑器 |
| PlainTextPropertyEditor | 纯文本编辑器 |
| ReadOnlyTextPropertyEditor | 只读文本编辑器 |
| SwitchPropertyEditor | 布尔编辑器（开关风格） |
| TimePropertyEditor | 时间编辑器 |
| VerticalAlignmentPropertyEditor | 垂直对齐方式编辑器 |
# 事件
|名称|说明|
|-|-|
| SelectedObjectChanged | 当模型对象改变时触发 |
# 案例
## 基础用法
```cs
public class PropertyGridDemoModel
{
[Category("Category1")]
public string String { get; set; }
[Category("Category2")]
public int Integer { get; set; }
[Category("Category2")]
public bool Boolean { get; set; }
[Category("Category1")]
public Gender Enum { get; set; }
public HorizontalAlignment HorizontalAlignment { get; set; }
public VerticalAlignment VerticalAlignment { get; set; }
public ImageSource ImageSource { get; set; }
}
public enum Gender
{
Male,
Female
}
```
```cs
DemoModel = new PropertyGridDemoModel
{
String = "TestString",
Enum = Gender.Female,
Boolean = true,
Integer = 98,
VerticalAlignment = VerticalAlignment.Stretch
};
```
```xml
<hc:PropertyGrid Width="500" SelectedObject="{Binding DemoModel}"/>
```
![PropertyGrid](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/PropertyGrid.png)
## 自定义编辑器
我们以 `PlainTextPropertyEditor` 为例，当需要自定义编辑器，我们可以从 `PropertyEditorBase` 继承，并重写某些方法，这些方法的定义如下表所示：
|名称|说明|备注|
|-|-|-|
| CreateElement | 创建具体操作控件 |必须重写|
| CreateBinding | 为具体操作控件创建数据绑定 ||
| GetDependencyProperty | 获取具体操作控件中需要绑定的依赖属性 |必须重写|
| GetBindingMode | 获取绑定模式 ||
| GetUpdateSourceTrigger | 获取更新数据源的触发模式 ||
| GetConverter | 获取绑定时需要使用的转换器 |||
纯文本编辑器的具体操作控件可以是 `TextBox`：
```cs
public override FrameworkElement CreateElement(PropertyItem propertyItem) => new System.Windows.Controls.TextBox
{
IsReadOnly = propertyItem.IsReadOnly
};
```
需要绑定的依赖属性应该是 `TextProperty`：
```cs
public override DependencyProperty GetDependencyProperty() => System.Windows.Controls.TextBox.TextProperty;
```
最后整体的代码如下：
```cs
public class PlainTextPropertyEditor : PropertyEditorBase
{
public override FrameworkElement CreateElement(PropertyItem propertyItem) => new System.Windows.Controls.TextBox
{
IsReadOnly = propertyItem.IsReadOnly
};
public override DependencyProperty GetDependencyProperty() => System.Windows.Controls.TextBox.TextProperty;
}
```
doc/source/handycontrol/extend_controls/screenshot/index.md
+29
View File
@@ -0,0 +1,29 @@
---
title: Screenshot 截图
---
可通过快捷键触发，将整个屏幕或者指定区域内容保存为图片.
```cs
public class Screenshot
```
# 方法
|名称|说明|
|-|-|
| Start( ) | 开始截图 |
# 事件
|名称|说明|
|-|-|
| Snapped | 截图完成时触发 |
# 案例
```cs
new Screenshot().Start();
```
![Screenshot](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Screenshot.png)
doc/source/handycontrol/extend_controls/scrollViewer/index.md
+1 -1
View File
@@ -90,4 +90,4 @@ public class ScrollViewer : System.Windows.Controls.ScrollViewer
</Grid>
```
![ScrollViewer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ScrollViewer.gif)
![ScrollViewer](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/ScrollViewer.gif)
doc/source/handycontrol/extend_controls/simpleText/index.md
+30
View File
@@ -0,0 +1,30 @@
---
title: SimpleText 简单文本
---
一种轻量级文本显示控件.
```cs
public class SimpleText : FrameworkElement
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|Text|文本|||
|TextAlignment|文本对齐方式|TextAlignment.Left||
|TextTrimming|文本截断方式|TextTrimming.None||
|TextWrapping|文本换行方式|TextWrapping.NoWrap||
|Foreground|字体颜色|||
|FontFamily|字体|||
|FontSize|字体大小|||
|FontStretch|字体变形方式|||
|FontStyle|字体风格|||
|FontWeight|字体粗细||||
# 案例
```xml
<hc:SimpleText Text="Content"/>
```
doc/source/handycontrol/extend_controls/toggleBlock/index.md
+31
View File
@@ -0,0 +1,31 @@
---
title: ToggleBlock 切换块
---
该控件可根据选中状态切换显示内容，在某些情况下可以代替 `ToggleButton`.
```cs
public class ToggleBlock : Control
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|IsChecked|是否选中|false||
|CheckedContent|选中时显示的内容|||
|UnCheckedContent|未选中时显示的内容|||
|IndeterminateContent|选中状态未知时显示的内容||||
# 案例
```xml
<hc:ToggleBlock>
<hc:ToggleBlock.UnCheckedContent>
</hc:ToggleBlock.UnCheckedContent>
<hc:ToggleBlock.CheckedContent>
</hc:ToggleBlock.CheckedContent>
</hc:ToggleBlock>
```
doc/source/handycontrol/extend_controls/watermark/index.md
+38
View File
@@ -0,0 +1,38 @@
---
title: Watermark 水印
---
可使用指定的内容创建平铺背景.
```cs
[TemplatePart(Name = ElementRoot, Type = typeof(Border))]
[ContentProperty(nameof(Content))]
public class Watermark : Control
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|Angle|水印旋转角度|20|由默认样式提供|
|Content|需要使用水印的内容|||
|Mark|水印|||
|MarkWidth|水印宽度|0||
|MarkHeight|水印高度|0||
|MarkBrush|水印颜色|||
|AutoSizeEnabled|水印是否自动适配大小|true||
|MarkMargin|水印边距||||
# 案例
```xml
<hc:Watermark Mark="Project" FontSize="80" FontWeight="Bold" MarkMargin="30,0"/>
```
![Watermark](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Watermark_1.png)
```xml
<hc:Watermark Mark="{StaticResource GitHubStrGeometry}" MarkMargin="30,0" MarkWidth="200" MarkHeight="100"/>
```
![Watermark](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Watermark_2.png)
doc/source/handycontrol/extend_controls/window/index.md
+1 -1
View File
@@ -51,4 +51,4 @@ public class Window : System.Windows.Window
</hc:Window>
```
![Window](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/Window.png)
![Window](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/extend_controls/Window.png)
doc/source/handycontrol/native_controls/comboBox/index.md
+1 -1
View File
@@ -23,7 +23,7 @@ title: ComboBox 组合框
![ComboBoxExtend_1](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ComboBoxExtend_1.png)
- 标题在左
`<ComboBox ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitleAlignment="Left" hc:InfoElement.Title="标题在左侧" Style="{StaticResource ComboBoxExtend}" Text="正文1"/>`
`<ComboBox ItemsSource="{Binding DataList}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="标题在左侧" Style="{StaticResource ComboBoxExtend}" Text="正文1"/>`
![ComboBoxExtend_2](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/ComboBoxExtend_2.png)
{% note warning %}
doc/source/handycontrol/native_controls/datePicker/index.md
+1 -1
View File
@@ -21,7 +21,7 @@ title: DatePicker 日期选择器
![DatePickerExtend_1](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/DatePickerExtend_1.png)
- 标题在左
`<DatePicker SelectedDate="{x:Static system:DateTime.Now}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitleAlignment="Left" Style="{StaticResource DatePickerExtend}" hc:InfoElement.Title="标题在左侧"/>`
`<DatePicker SelectedDate="{x:Static system:DateTime.Now}" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" Style="{StaticResource DatePickerExtend}" hc:InfoElement.Title="标题在左侧"/>`
![DatePickerExtend_2](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/DatePickerExtend_2.png)
{% note warning %}
doc/source/handycontrol/native_controls/groupBox/index.md
+4 -4
View File
@@ -25,12 +25,12 @@ GroupBox 分组框 默认样式，不推荐直接使用，应该始终被其它
{% note info no-icon %}
只需要添加扩展属性即可
{% code %}
hc:TitleElement.TitleAlignment="Left"
hc:TitleElement.TitlePlacement="Left"
{% endcode %}
用例：
{% code %}
<GroupBox Grid.Row="0" Grid.Column="1" Width="300" Height="200" Header="{x:Static langs:Lang.TitleDemoStr1}" Padding="10"
Margin="16" hc:TitleElement.TitleAlignment="Left">
Margin="16" hc:TitleElement.TitlePlacement="Left">
<Border Background="{DynamicResource PrimaryBrush}" CornerRadius="4">
<TextBlock Text="{x:Static langs:Lang.ContentDemoStr}" VerticalAlignment="Center" HorizontalAlignment="Center"
Foreground="White"/>
@@ -57,7 +57,7 @@ GroupBox 分组框 的另一种样式 GroupBoxTabBaseStyle 不推荐直接使
</GroupBox>
{% endcode %}
- 同样可以 使用扩展属性 {% code %} hc:TitleElement.TitleAlignment="Left" {% endcode %}
- 同样可以 使用扩展属性 {% code %} hc:TitleElement.TitlePlacement="Left" {% endcode %}
![GroupBox_Tab](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/GroupBox_Tab.png) ![GroupBox_Tab_left](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/GroupBox_Tab_left.png)
{% endnote %}
@@ -75,7 +75,7 @@ GroupBox 分组框 的另一种样式 GroupBoxOriginalBaseStyle 不推荐直接
</GroupBox>
<GroupBox Grid.Row="2" VerticalAlignment="Bottom" Grid.Column="1" Width="300" hc:TitleElement.TitleWidth="100"
Header="{x:Static langs:Lang.TitleDemoStr1}" Margin="16" Style="{StaticResource GroupBoxOriginal}"
HorizontalContentAlignment="Left" hc:TitleElement.TitleAlignment="Left">
HorizontalContentAlignment="Left" hc:TitleElement.TitlePlacement="Left">
<ComboBox DataContext="{Binding ComboBoxDemo,Source={StaticResource Locator}}" ItemsSource="{Binding DataList}"/>
</GroupBox>
{% endcode %}
doc/source/handycontrol/native_controls/passwordBox/index.md
+1 -1
View File
@@ -35,7 +35,7 @@ title: PasswordBox 密码框
Width="120"></PasswordBox>
<PasswordBox Style="{DynamicResource PasswordBoxExtend}" PasswordChar="*"
hc:TitleElement.Title="用户密码："
hc:TitleElement.TitleAlignment="Top"
hc:TitleElement.TitlePlacement="Top"
VerticalAlignment="Center"
Width="120"></PasswordBox>
{% endcode %}
doc/source/handycontrol/native_controls/textBox/index.md
+1 -1
View File
@@ -23,7 +23,7 @@ title: TextBox 文本框
![TextBoxExtend_1](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TextBoxExtend_1.png)
- 标题在左
`<TextBox Style="{StaticResource TextBoxExtend}" hc:InfoElement.TitleAlignment="Left" hc:InfoElement.Title="这是标题" Width="300" VerticalAlignment="Center"/>`
`<TextBox Style="{StaticResource TextBoxExtend}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="这是标题" Width="300" VerticalAlignment="Center"/>`
![TextBoxExtend_2](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TextBoxExtend_2.png)
{% note warning %}
doc/themes/next/_config.yml
Vendored
+12
View File
@@ -178,9 +178,11 @@ menu:
BackgroundSwitchElement 可切换背景的元素: /backgroundSwitchElement/ ||
BorderElement 具有边框的元素: /borderElement/ ||
DataGridAttach DataGrid专用: /dataGridAttach/ ||
DropDownElement 可下拉内容的元素: /dropDownElement/ ||
EdgeElement 具有边界内容的元素: /edgeElement/ ||
IconElement 具有图标的元素: /iconElement/ ||
IconSwitchElement 可切换图标的元素: /iconSwitchElement/ ||
ImageAttach Image专用: /imageAttach/ ||
InfoElement 信息元素: /infoElement/ ||
PanelElement 面板元素: /panelElement/ ||
PasswordBoxAttach 密码框专用: /passwordBoxAttach/ ||
@@ -231,19 +233,23 @@ menu:
default: /extend_controls/ ||
AnimationPath 动画路径: /animationPath/ ||
Badge 标记: /badge/ ||
BlurWindow 背景模糊窗口: /blurWindow/ ||
ButtonGroup 按钮组: /buttonGroup/ ||
CalendarWithClock 带有时钟的日历: /calendarWithClock/ ||
Card 卡片: /card/ ||
Carousel 轮播: /carousel/ ||
ChatBubble 对话气泡: /chatBubble/ ||
CheckComboBox 复选组合框: /checkComboBox/ ||
CirclePanel 圆形布局: /circlePanel/ ||
CircleProgressBar 圆形进度条: /circleProgressBar/ ||
Clock 时钟: /clock/ ||
ColorPicker 颜色拾取器: /colorPicker/ ||
ComboBox 组合框: /comboBox/ ||
CompareSlider 对比滑块: /compareSlider/ ||
ContextMenuButton 上下文菜单按钮: /contextMenuButton/ ||
CoverFlow 封面流: /coverFlow/ ||
CoverView 封面视图: /coverView/ ||
DashedBorder 虚线边框: /dashedBorder/ ||
DatePicker 日期选择器: /datePicker/ ||
DateTimePicker 日期时间选择器: /dateTimePicker/ ||
Dialog 对话框: /dialog/ ||
@@ -260,6 +266,7 @@ menu:
HoneycombPanel 蜂窝布局: /honeycombPanel/ ||
ImageBlock 图片块: /imageBlock/ ||
ImageBrowser 图片浏览器: /imageBrowser/ ||
ImageSelector 图片选择器: /imageSelector/ ||
ImageViewer 图片视图: /imageViewer/ ||
Loading 加载条: /loading/ ||
Magnifier 放大镜: /magnifier/ ||
@@ -275,16 +282,19 @@ menu:
PopupWindow 弹出窗口: /popupWindow/ ||
PreviewSlider 预览滑块: /previewSlider/ ||
ProgressButton 进度按钮: /progressButton/ ||
PropertyGrid 属性编辑器: /propertyGrid/ ||
RangeSlider 范围滑块: /rangeSlider/ ||
Rate 评分: /rate/ ||
RelativePanel 相对布局: /relativePanel/ ||
RunningBlock 滚动块: /runningBlock/ ||
Screenshot 截图: /screenshot/ ||
ScrollViewer 滚动视图: /scrollViewer/ ||
SearchBar 搜索栏: /searchBar/ ||
Shield 徽章: /shield/ ||
SideMenu 侧边菜单: /sideMenu/ ||
SimpleItemsControl 简单项目控件: /simpleItemsControl/ ||
SimplePanel 简单面板: /simplePanel/ ||
SimpleText 简单文本: /simpleText/ ||
SplitButton 分割按钮: /splitButton/ ||
Sprite 精灵: /sprite/ ||
StepBar 步骤条: /stepBar/ ||
@@ -293,9 +303,11 @@ menu:
TextBox 文本框: /textBox/ ||
TimeBar 时间条: /timeBar/ ||
TimePicker 时间选择器: /timePicker/ ||
ToggleBlock 切换块: /toggleBlock/ ||
Transfer 穿梭框: /transfer/ ||
TransitioningContentControl 内容过渡控件: /transitioningContentControl/ ||
WaterfallPanel 瀑布流: /waterfallPanel/ ||
Watermark 水印: /watermark/ ||
WaveProgressBar 波形进度条: /waveProgressBar/ ||
Window 窗口: /window/ ||
数据:
doc/themes/next/source/css/_custom/custom.styl
Vendored
+20 -4
View File
@@ -1,21 +1,37 @@
// Custom styles.
.table-container table{
.post-body figure {
border-radius: 4px;
}
.post-body img {
border-radius: 10px;
}
.site-author-image {
border-radius: 50%;
}
.table-container {
border-radius: 4px;
}
.table-container table {
background-color: #eee;
border-collapse:separate;
border-spacing: 0 4px;
padding: 0 6px 2px 6px;
}
.table-container th, td{
.table-container th, td {
border: 0;
}
.table-container tr td:first-child{
.table-container tr td:first-child {
border-radius: 4px 0 0 4px;
}
.table-container tr td:last-child{
.table-container tr td:last-child {
border-radius: 0 4px 4px 0;
}