treeview

来源:互联网 发布:淘宝618是什么日子 编辑:程序博客网 时间:2024/06/06 13:04

TreeView样式(1)

TreeView有一个细化的样式模型,允许你完全控制TreeView的外观。每个样式作用于一种结点。样式由TreeNodeStyle类表示,它继承自更常规的Style类。

和其他富控件一样,通过样式你可以设置前景色和背景色、字体和边框。此外,TreeNodeStyle类加入了表17-10所列的特定结点的样式属性。这些属性处理结点图片以及结点间的间距。

表17-10 添加的TreeNodeStyle属性

属性

描述

ImageUrl

结点旁显示的图片的URL

NodeSpacing

当前结点和相邻结点的垂直间距

(以像素为单位)

VerticalPadding

结点文字和文字周围边界的

上下间距(以像素为单位)

HorizontalPadding

结点文字和文字周围边界的

左右间距(以像素为单位)

ChildNodesPadding

展开的父结点的最后一个子

结点和其下一个兄弟结点的间距

(以像素为单位)

因为TreeView用HTML表格呈现,你可以设置各个元素的间距来控制文字周围的边距和结点间的间距等。另外一个重要的属性是TreeView.NodeIndent,它设置树结构里各个子层级间缩进(从左起)的像素数。图17-15显示了这些设置如何应用到单个结点。

TreeView还允许你通过高级属性来配置它的某些内部呈现。你可以用TreeView.ShowExpand- Collapse属性关闭树中结点列。你还可以用CollapseImageUrl属性和ExpandImageUrl属性设置TreeView折叠和展开的指示器(通常用加号和减号图标表示),用NoExpandImageUrl属性设置没有子结点的结点旁边所显示的内容。最后,你可以在每个结点(将TreeView.ShowCheckBoxes设为true)或某个结点(将TreeNode.ShowCheckBox设为true)旁显示复选框。你可以检查TreeNode.Checked属性以确定某个给定结点是否被选中。

1. 把样式应用到结点类型

TreeView允许你分别控制不同类型的结点的样式--例如,根结点、包含其他结点的结点、选定的结点等。

要对树的所有结点应用样式,你可以使用TreeView.NodeStyle属性。你可以用更特定的样式独立设置TreeView的区域,如表17-11所示。

表17-11 TreeView样式属性

属性

描述

NodeStyle

应用到所有结点

RootNodeStyle

仅应用到第一层(根)结点

ParentNodeStyle

应用到所有包含其他结点的结点,但不包括根结点

LeafNodeStyle

应用到所有包含其他子结点且不是根结点的结点

SelectedNodeStyle

应用到当前选中的结点

HoverNodeStyle

应用到鼠标停留的结点,这些设置只

应用于支持必需的动态脚本的高级客户端

样式在表中的顺序从最通用到最特定。也就是说,SelectedNodeStyle样式设置会覆盖RootNode- Style里任何有冲突的设置。(如果你不希望某个结点被选定,可以把TreeNode.SelectAction设置为None。)不过,RootNodeStyle、ParentNodeStyle和LeafNodeStyle从来都不会产生冲突,因为根结点、父结点和子结点的定义是互斥的。例如,一个结点不能既是父结点又是根结点--TreeView只是把它看做根结点。

TreeView样式(2)

2. 把样式应用到结点层级

能够对不同类型的结点应用样式很有趣,不过一个更有用的功能是可基于结点的不同层级应用样式。因为大多数的树使用一个严格的层次(例如,第一层结点代表类别,第二层代表产品,第三层代表订单等)。这时候,确定某个结点是否有子结点并不重要,相反,能够确定结点的深度很重要。

唯一的问题是TreeView理论上具有不受限制的结点层次。所以,暴露FirstLevelStyle、SecondLevel- Style之类的属性没有意义。相反,TreeView有一个LevelStyles集合,它有很多你期望的项目。层级由集合中样式的位置推断,这样,第一个项目代表根层,第二个是结点的第二层等。要让这一系统正常工作,你必须遵循同样的次序,如果你不想改变某一层的格式而要忽略它,必须包含一个空的样式占位符。

例如,这个TreeView没有使用任何缩进,而是通过应用不同的间距和字体使各层都各不相同:

如果你把它应用到先前的类别和产品列表示例,就会见到一个和图17-16相似的页面。

3. TreeView图片

正如你已知的,可以通过TreeViewNode.ImageUrl属性为单个结点设置图片。幸运的是,如果要给整个树设置一组一致的图片,就不需要使用这种细化的方法。相反,可以通过3个TreeView属性为整个树设置图片。你可以为所有折叠的结点(CollapseImageUrl)、所有展开的结点(ExpandImageUrl)和所有没有子结点并因此不能展开的结点(NoExpandImageUrl)选择要显示的图片。如果设置了这些属性并通过TreeViewNode.ImageUrl属性为特定结点指定了图片,结点的特定图片将优先使用。

如果不想创建自己自定义的结点图片,TreeView还自带了图片。如果要访问这些图片,要使用TreeView.ImageSet属性,它接收来自TreeViewImageSet枚举的16个值。每组都包含折叠、展开和没有孩子的结点要使用的图片。使用ImageSet属性时,不需要设置任何其他相关的属性。

图17-17显示了几个可用的ImageSet选项。例如,值为TreeViewImageSet.Faq的ImageSet创建一个具有帮助样式的树,它显示一个问号(对于没有孩子的结点)或者一个叠加在目录上的问号(对于那些有孩子的结点)。

0 0