基本特性
作为TabBar或VerticalTabControl的Tab对象,ControlTab包括的基本的特性有:
支持标题设定,通过设定caption实现标题设定
xml范例:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> </IFrameTab> </TabControl>
页面效果:
IDE设计视图:
支持关闭快捷图标,通过closeable属性设定
xml范例:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> <Property name="closeable">true</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> <Property name="closeable">true</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> </IFrameTab> </TabControl>
如上我们将第二和第三个ControlTab的closeable属性设置为true
页面效果:
在页面中可以看到标签2和标签3中都有一个关闭图标,鼠标单击的时候就会自动关闭当前标签页,如上图,如果我们单击标签2的关闭标签页后的效果:
IDE设计视图:
支持禁用设定,通过disabled属性设置实现
xml范例:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> <Property name="closeable">true</Property> <Property name="disabled">true</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> <Property name="closeable">true</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> </IFrameTab> </TabControl>
如上我们将第二ControlTab的disabled属性设置为true
页面效果:
可以看到标签页2有一个很明显的灰化效果,这个时候单击标签页2是没有反应的,TabBar不会切换到标签页2上。
IDE设计视图:
支持隐藏设置,通过visible属性设置可见还是隐藏
xml范例:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> <Property name="closeable">true</Property> <Property name="disabled">true</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> <Property name="closeable">true</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> <Property name="visible">false</Property> </IFrameTab> </TabControl>
如上我们将第四ControlTab的visible属性设置为false
页面效果:
可以看到标签页4已经不可见了
IDE设计视图:
支持图标设定,通过icon属性设置
xml范例:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> <Property name="icon">url(skin>common/icons.gif) -220px -60px</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> <Property name="icon">url(skin>common/icons.gif) -40px -40px</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> <Property name="icon">url(skin>common/icons.gif) -200px -120px</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> <Property name="icon">url(images/anchor.gif)</Property> </IFrameTab> </TabControl>
其中icon的属性设定,我们用了两种格式:
- 格式1:url(skin>common/*.* 用于获取dorado自带的系统图标(定义办法参考基础教程的04. 常用技巧和API(SEFC)中的使用偏移量来定义图标)
- 格式2:url(xxx/xxx/xxx.gif) 这是获取webcontent目录下的图片资源,根据相对路径设置
页面效果:
IDE设计视图:
支持标签页系统提示设置,通过tip属性设定
xml范例:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> <Property name="icon">url(skin>common/icons.gif) -220px -60px</Property> <Property name="tip">这是标签页1的系统提示</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> <Property name="icon">url(skin>common/icons.gif) -40px -40px</Property> <Property name="tip">这是标签页2的系统提示</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> <Property name="icon">url(skin>common/icons.gif) -200px -120px</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> <Property name="icon">url(images/anchor.gif)</Property> </IFrameTab> </TabControl>
页面效果:
IDE设计视图:
特有特性
ControlTab可以在内部添加子控件,如果是单个控件,一般来说自己在ControlTab中添加子节点就可以,如:
XML格式:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> <Grid id="grid1"/> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> <AutoForm id="form1"/> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> </IFrameTab> </TabControl>
但是如果希望在一个标签页下展示多个控件,那么这些控件的布局控制我们就需要通过布局管理器辅助实现了,由于ControlTab本身没有布局管理概念,则我们需要在ControlTab中添加一个支持布局管理的控件容器,如Container:
XML代码如下:
<TabControl> <ControlTab> <Property name="caption">标签1</Property> <Container> <ToolBar layoutConstraint="top"/> <AutoForm layoutConstraint="top"/> <Grid layoutConstraint="center"/> </Container> </ControlTab> <ControlTab> <Property name="caption">标签2</Property> </ControlTab> <ControlTab> <Property name="caption">标签3</Property> </ControlTab> <IFrameTab> <Property name="caption">标签4</Property> </IFrameTab> </TabControl>
Attachments:
ControlTab.PNG (image/png)
ControlTabCaption.PNG (image/png)
ControlTabCloseablePreview.png (image/png)
ControlTabCloseablePreview2.png (image/png)
ControlTabCloseableDesign.png (image/png)
ControlTabDisablePreview.png (image/png)
ControlTabDisabledDesign.png (image/png)
ControlTabVisiblePreview.png (image/png)
ControlTabVisiblePreview.png (image/png)
ControlTabVisibleDesign.png (image/png)
ControlTabSubControl1.PNG (image/png)
ControlTabSubControl2.PNG (image/png)
ControlTabIconPreview.png (image/png)
ControlTabIconDesign.png (image/png)
ControlTabTipPreview.png (image/png)
ControlTabTipDesign.png (image/png)
ControlTabCaption.PNG (image/png)
ControlTabCloseablePreview.png (image/png)
ControlTabCloseablePreview2.png (image/png)
ControlTabCloseableDesign.png (image/png)
ControlTabDisablePreview.png (image/png)
ControlTabDisabledDesign.png (image/png)
ControlTabVisiblePreview.png (image/png)
ControlTabVisiblePreview.png (image/png)
ControlTabVisibleDesign.png (image/png)
ControlTabSubControl1.PNG (image/png)
ControlTabSubControl2.PNG (image/png)
ControlTabIconPreview.png (image/png)
ControlTabIconDesign.png (image/png)
ControlTabTipPreview.png (image/png)
ControlTabTipDesign.png (image/png)