WPF学习版Win7之TreeView

ispsh

　　初衷：为了更好介绍 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 两个触发器同时触发，因为他们设置的目标与属性相同：
  
  所以最后面触发器 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 详细参见上一篇文章。
  
• 示例下载