test/HandyControl
1
0
Fork 0
mirror of https://gitee.com/handyorg/HandyControl.git synced 2024-11-29 18:38:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add SearchBar, Shield, SideMenu and SimpleItemsControl docs

Browse Source
This commit is contained in:
NaBian 2020-08-19 22:53:02 +08:00
parent 968cffe1bd
commit 1d7f6be7f5
5 changed files with 309 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc/source/handycontrol/extend_controls/index.md
View File

@ -2,4 +2,8 @@
title: 扩展控件
---
HandyControl目前包含80余款扩展控件，正逐步增加。
HandyControl目前包含80余款扩展控件，正逐步增加。
{% note warning %}
各控件案例中所使用的资源均可在HC Demo中找到，请养成在vs中使用 `Ctrl+F` 组合键的习惯.
{% endnote %}

73
doc/source/handycontrol/extend_controls/searchBar/index.md
View File

@ -1,5 +1,74 @@
---
title: 建设中
title: SearchBar 搜索栏
---
建设中
通过键入关键字触发搜索.
```cs
public class SearchBar : TextBox, ICommandSource
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|IsRealTime|是否实时搜索|false|如果为`true`则每次输入都会自动触发搜索开始事件|
|Command|命令|||
|CommandParameter|命令参数|||
|CommandTarget|命令目标元素||||
# 附加属性
|属性|描述|默认值|备注|
|-|-|-|-|
|InfoElement.Placeholder|占位符|||
|InfoElement.Necessary|是否必填|false||
|InfoElement.Symbol|必填标记|●||
|InfoElement.ContentHeight|内容高度|30|标题在上时可用|
|InfoElement.MinContentHeight|最小内容高度|30|标题在上时可用|
|TitleElement.Title|标题|||
|TitleElement.TitlePlacement|标题对齐方式|TitlePlacementType.Top||
|TitleElement.TitleWidth|标题宽度|120|||
# 事件
|名称|说明|
|-|-|
| SearchStarted | 搜索开始时触发 |
# 样式
|样式|描述|
|-|-|
|SearchBarBaseStyle|默认样式|
|SearchBarExtendBaseStyle|默认扩展样式|
|SearchBarPlusBaseStyle|默认加强样式|
|SearchBarExtend|扩展样式|
|SearchBarPlus|加强样式|
# 案例
```xml
<StackPanel Margin="32" Orientation="Horizontal">
<StackPanel>
<hc:SearchBar Command="{Binding SearchCmd}" CommandParameter="{Binding Text,RelativeSource={RelativeSource Self}}"/>
<hc:SearchBar Margin="0,32,0,0" IsEnabled="False"/>
<hc:SearchBar hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" Style="{StaticResource SearchBarExtend}"/>
<hc:SearchBar hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarExtend}"/>
<hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarExtend}" Margin="0,32,0,0"/>
<hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarExtend}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/>
</StackPanel>
<StackPanel Margin="32,0,0,0">
<hc:SearchBar Name="SearchBarCustomVerify" ShowClearButton="True" Style="{StaticResource SearchBarPlus}"/>
<hc:SearchBar Margin="0,32,0,0" IsEnabled="False" Style="{StaticResource SearchBarPlus}"/>
<hc:SearchBar ShowClearButton="True" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" Style="{StaticResource SearchBarPlus}"/>
<hc:SearchBar TextType="Mail" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterEmail}}" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr1}}" Margin="0,32,0,0" hc:InfoElement.Necessary="True" Style="{StaticResource SearchBarPlus}"/>
<hc:SearchBar Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarPlus}" Margin="0,32,0,0"/>
<hc:SearchBar ShowClearButton="True" Width="380" hc:InfoElement.TitleWidth="140" hc:InfoElement.Placeholder="{ex:Lang Key={x:Static langs:LangKeys.PlsEnterContent}}" hc:InfoElement.TitlePlacement="Left" hc:InfoElement.Title="{ex:Lang Key={x:Static langs:LangKeys.TitleDemoStr3}}" Style="{StaticResource SearchBarPlus}" hc:InfoElement.Necessary="True" Margin="0,32,0,0"/>
</StackPanel>
</StackPanel>
```
![SearchBar](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SearchBar.png)

31
doc/source/handycontrol/extend_controls/shield/index.md
View File

@ -1,5 +1,32 @@
---
title: 建设中
title: Shield 徽章
---
建设中
徽章由左半部分的名称和右半部分的值组成，点击徽章可以打开对应的链接.
```cs
[ContentProperty(nameof(Status))]
public class Shield : ButtonBase
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|Subject|名称|||
|Status|值|||
|Color|颜色||||
# 案例
```xml
<StackPanel Orientation="Horizontal" Margin="32">
<hc:Shield Subject=".net" Status=">=4.0" Color="#1182c3"/>
<hc:Shield Subject="c#" Status="7.0" Margin="4,0,0,0" Color="#1182c3"/>
<hc:Shield Subject="IDE" Status="2017" Margin="4,0,0,0" Color="#1182c3"/>
<hc:Shield Subject="chat" Status="on gitter" Margin="4,0,0,0" Color="#4eb899" Command="hc:ControlCommands.OpenLink" CommandParameter="https://gitter.im/HandyControl/Lobby?utm_source=badge&amp;utm_medium=badge&amp;utm_campaign=pr-badge&amp;utm_content=badge"/>
<hc:Shield Subject="qq" Status="714704041" Margin="4,0,0,0" Color="#d8624c" Command="hc:ControlCommands.OpenLink" CommandParameter="http://shang.qq.com/wpa/qunwpa?idkey=a571e5553c9d41e49c4f22f3a8b2865451497a795ff281fedf3285def247efc1"/>
</StackPanel>
```
![Shield](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/Shield.png)

186
doc/source/handycontrol/extend_controls/sideMenu/index.md
View File

@ -1,3 +1,187 @@
---
title: SideMenu
title: SideMenu 侧边菜单
---
当界面为左右布局时，可以使用侧边菜单来导航.
{% note warning %}
目前侧边菜单只支持垂直布局，将来可能扩展为任意布局.
{% endnote %}
```cs
[DefaultProperty("Items")]
[ContentProperty("Items")]
[TemplatePart(Name = ElementPanel, Type = typeof(Panel))]
public class SimpleItemsControl : Control
```
```cs
public class HeaderedSimpleItemsControl : SimpleItemsControl
```
```cs
public class SideMenu : HeaderedSimpleItemsControl
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|AutoSelect|是否自动选中首项|true||
|ExpandMode|子项展开模式|ExpandMode.ShowOne||
|PanelAreaLength|子项容器高度|NaN|目前侧边菜单只支持垂直布局，将来可能扩展为任意布局，故此属性名称没有定为`PanelAreaHeight`|
# 事件
|名称|说明|
|-|-|
| SelectionChanged | 选中项改变时触发 |
# 案例
```xml
<hc:SideMenu BorderThickness="1" Width="200" Margin="32">
<hc:Interaction.Triggers>
<hc:EventTrigger EventName="SelectionChanged">
<hc:EventToCommand Command="{Binding SwitchItemCmd}" PassEventArgsToCommand="True" />
</hc:EventTrigger>
</hc:Interaction.Triggers>
<hc:SideMenuItem Header="Overview">
<hc:SideMenuItem.Icon>
<Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Overview.png" Width="24" Height="24"/>
</hc:SideMenuItem.Icon>
<hc:SideMenuItem Header="Summary" Command="{Binding SelectCmd}" CommandParameter="{Binding Header,RelativeSource={RelativeSource Self}}">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf2cb;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Dashboards" Command="{Binding SelectCmd}" CommandParameter="{Binding Header,RelativeSource={RelativeSource Self}}">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf246;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Wiki" Command="{Binding SelectCmd}" CommandParameter="{Binding Header,RelativeSource={RelativeSource Self}}">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xe82d;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Boards">
<hc:SideMenuItem.Icon>
<Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Boards.png" Width="24" Height="24"/>
</hc:SideMenuItem.Icon>
<hc:SideMenuItem Header="Work Items">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf314;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Boards">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf444;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Backlogs">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf6bf;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Sprints">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf3b0;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Queries">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf2b8;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Repos">
<hc:SideMenuItem.Icon>
<Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Repos.png" Width="24" Height="24"/>
</hc:SideMenuItem.Icon>
<hc:SideMenuItem Header="Files">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf30e;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Commits">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf293;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Pushes">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf298;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Branches">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xebc2;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Tags">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xe8ec;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Pull requests">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf296;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Pipelines">
<hc:SideMenuItem.Icon>
<Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-Pipelines.png" Width="24" Height="24"/>
</hc:SideMenuItem.Icon>
<hc:SideMenuItem Header="Builds">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf28f;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Releases">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf3b3;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Library">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xe8f1;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Task groups">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf2ae;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Deployment groups">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf29d;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Test Plans">
<hc:SideMenuItem.Icon>
<Image Source="/HandyControlDemo;component/Resources/Img/DevOps/DevOps-TestPlans.png" Width="24" Height="24"/>
</hc:SideMenuItem.Icon>
<hc:SideMenuItem Header="Test Plans">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf3ab;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Runs">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xf3ac;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
<hc:SideMenuItem Header="Load test">
<hc:SideMenuItem.Icon>
<TextBlock Text="&#xe8a9;" Style="{StaticResource TextBlockFabricIcons}"/>
</hc:SideMenuItem.Icon>
</hc:SideMenuItem>
</hc:SideMenuItem>
</hc:SideMenu>
```
![SideMenu](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Resources/SideMenu.png)

21
doc/source/handycontrol/extend_controls/simpleItemsControl/index.md
View File

@ -1,5 +1,22 @@
---
title: 建设中
title: SimpleItemsControl 简单项目控件
---
建设中
一种轻量级ItemsControl控件.
```cs
[DefaultProperty("Items")]
[ContentProperty("Items")]
[TemplatePart(Name = ElementPanel, Type = typeof(Panel))]
public class SimpleItemsControl : Control
```
# 属性
|属性|描述|默认值|备注|
|-|-|-|-|
|ItemTemplate|项目模板|||
|ItemContainerStyle|项目容器样式|||
|ItemsSource|项目资源|||
|Items|项目|||
|HasItems|是否有项目|false||