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 详细参见上一篇文章。
• 示例下载