WPF学习版Win7之TreeView
初衷:为了更好介绍 WPF 应用,所以这个教学版 Windows 7 与原版的不同!希望朋友们喜欢 WPF,喜欢 .NET。
(首次介绍 Blend ,为了清晰故截图较多)
本小节:
- Blend 3 基本应用。
- 简单模拟 TreeView 目录树。
Blend 创建原型
- 新建一个 WPF 应用程序。
- 新建一个 TreeView 到 ''LayoutRoot''(Grid)。
- 简单创建一个数据源,Property2 的 Type 变为 Image, 并转为层级结构。
- 拖拽上图红圈 Collection 到 TreeView 中,选中 TreeView ,并设为自动大小。
Blend 基本模板样式设计
- 右击 TreeView,编辑 ''ItemTemplate'' 模板。
- 选中 Image,并设为自动大小,拖拽 Image 到 TextBlock 上面,最后设 StackPanel 高度为19并且水平排列。
- 回到上级目录,选中 TreeView 并编辑 ItemContainerStyle 。
- 解散 ''Bd'' 组合。 选中 ''Expander'' 和 'PART_Header'',用 Border 合并,并重置外边界,设 Grid.ColumnSpan 为 3。
Blend 基本效果设计
- 点击 ''-Trigger'' 删除 TreeViewItem 模板中的默认 IsSelected 触发器,避免选中 TreeViewItem 项时 Foreground属性值(一般为文本颜色)不确定变化。
- 注意!''border'' 的 Borderbursh 必须填充(可以透明),否则不触发事件!
- 点击 ''+Property'',依次选择合适的触发事件属性。 同理再新建一 ''Trigger'' ,设置手形光标。
- 同理,设置 TreeVIewItem 选中时的触发器样式。
- 最后,在 XAML 中设置 ToggleButton(即三角形的Expander)。
Visibility="{ Binding IsMouseOver, RelativeSource={RelativeSource FindAncestor, AncestorLevel = 1, AncestorType={x:Type TreeView}}, Converter={StaticResource BooleanToVisibilityConverter}, Mode=Default}"
- 结束。
小结:本小例子主要通过简单模拟 TreeView 目录树介绍了 Blend 3 的基本使用,还有:
- Blend 可以快速定义数据源,方便测试控件模板样式触发器(所见即所得)。
- Change Layout Type,Group Into,Ungroup 可以方便变换布局。
- 少用 Edit Template,建议先考虑 Edit Additional Templates,可以减少 Blend 工具自动生成的默认模板样式代码。
- 利用 RelativeSource 可以绑定到模板外的元素控件,Converter 可以转换不同类型的绑定。
小补充:
- 当IsMouseOver 和 IsSelected 两个触发器同时触发,因为他们设置的目标与属性相同:
<Setter Property="Background"
TargetName="border">
所以最后面触发器 IsSelected 设置的属性生效。 - 有时 Border 需要设置透明填充或边框透明,否则鼠标无法触发事件(视觉树)。
- RelativeSource 还可以:(后面将介绍)
- {Binding RelativeSource={RelativeSource Self}}
- {Binding RelativeSource={RelativeSource TemplatedParent}}
- {Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type
desiredType}}} - {Binding RelativeSource={RelativeSource FindAncestor,
AncestorLevel=n, AncestorType={x:Type desiredType}}} - {Binding RelativeSource={RelativeSource PreviousData}}
- Converter 详细参见上一篇文章。
- 示例下载