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

add native_control doc of TabControl

Browse Source 
TabControl
This commit is contained in:
guanguanchuangyu committed 2020-01-28 20:19:45 +08:00
1 parent 28dec86666
commit 8da45a30fc
1 file changed
+94 -2
Download Patch File Download Diff File Expand all files Collapse all files
doc/source/handycontrol/native_controls/tabControl/index.md
+94 -2
View File
@@ -1,5 +1,97 @@
---
title: 建设中
title: TabControl 选项卡控件
---
建设中
# TabControlBaseStyle
选项卡控件默认样式，不推荐直接使用，应该始终被其它样式以BasedOn的方式使用
案例：
```xml
<Style BasedOn="{StaticResource TabControlBaseStyle}" TargetType="TabControl"/>
```
`xaml`中：
```xml
<TabControl Margin="10">
<TabItem Header="选项卡1">
</TabItem>
<TabItem Header="选项卡2">
</TabItem>
<TabItem Header="选项卡3">
</TabItem>
</TabControl>
```
效果：
![TabControl.DefaultStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TabControl.DefaultStyle.png)
# TabControlInLine
行内选中选项卡样式
案例：
```xml
<TabControl Margin="10" Style="{DynamicResource TabControlInLine}">
<TabItem Header="选项卡1">
</TabItem>
<TabItem Header="选项卡2">
</TabItem>
<TabItem Header="选项卡3">
</TabItem>
</TabControl>
```
效果：
![TabControl.InLineStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TabControl.InLineStyle.png)
# TabControlCapsule
简约选项卡样式
案例：
```xml
<TabControl Margin="10" Style="{DynamicResource TabControlCapsule}">
<TabItem Header="选项卡1">
</TabItem>
<TabItem Header="选项卡2">
</TabItem>
<TabItem Header="选项卡3">
</TabItem>
</TabControl>
```
效果：
![TabControl.CapsuleStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TabControl.CapsuleStyle.png)
# TabControlCapsuleSolid
案例：
```xml
<TabControl Margin="10" Style="{DynamicResource TabControlCapsuleSolid}">
<TabItem Header="选项卡1">
</TabItem>
<TabItem Header="选项卡2">
</TabItem>
<TabItem Header="选项卡3">
</TabItem>
</TabControl>
```
效果：
![TabControl.CapsuleSolidStyle](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TabControl.CapsuleSolidStyle.png)
# 温馨提示
使用属性`TabStripPlacement`设定头部标题的位置，效果如下：
![TabControl.TabStripPlacement](https://raw.githubusercontent.com/HandyOrg/HandyOrgResource/master/HandyControl/Doc/native_controls/TabControl.TabStripPlacement.png)