Treeview of win7 for WPF Learning

Document directory

• Summary: this small example describes the basic use of blend 3 by simulating the Treeview directory tree:
• Supplement:

Original intention: to better introduce the WPF application, this tutorial version of Windows 7 is different from the original version! I hope my friends like WPF and. net.

(Blend is introduced for the first time, so it is much clearer)

This section:

• Blend 3 basic applications.
• Simulate the Treeview directory tree.

Blend create a prototype

• Create a new WPF application.
• Create a new Treeview to ''layoutroot'' (GRID ).
  
• Create a data source. The type of property2 is changed to image and converted to a hierarchical structure.
  
• Drag the red circle collection to the Treeview, select the Treeview, and set it to the automatic size.
   
  Blend basic template Style Design
• Right-click Treeview and edit the ''itemtemplat'' template.
  
• Select the image and set it to automatic size, drag the image to the textblock, and set the stackpanel height to 19 and arrange it horizontally.
  
• Return to the parent directory, select Treeview, and edit itemcontainerstyle.
  
• Disband the ''bd ''combination. Select 'pander' and 'part _ header', merge them with border, reset the outer boundary, and Set grid. columnspan to 3.
  

Blend basic effect Design

• Click ''-trigger'' to delete the default isselected trigger in the treeviewitem template. This avoids the uncertain change of the foreground attribute value (generally the text color) when the treeviewitem is selected.
  
• Note! The borderbursh of ''border'' must be filled (transparent); otherwise, no event is triggered!
  
• Click ''+ properties' and select the appropriate trigger event attribute. Similarly, create a new ''trigger ''and set the hand-shaped cursor.
  
• Similarly, set the trigger style when the treeviewitem is selected.
  
• Finally, set togglebutton (Expander of the triangle) in XAML ).

  Visibility="{                              Binding IsMouseOver,                              RelativeSource={RelativeSource FindAncestor,                                  AncestorLevel = 1,                                   AncestorType={x:Type TreeView}},                               Converter={StaticResource BooleanToVisibilityConverter},                               Mode=Default}"

• End.

Summary: this small example describes the basic use of blend 3 by simulating the Treeview directory tree:

• Blend allows you to quickly define data sources and test the control template style trigger (WYSIWYG ).
• Change layout type, group into, and ungroup can easily change the layout.
• If you do not use the edit template, we recommend that you first consider the edit additional Templates option to reduce the default template style code automatically generated by the blend tool.
• Relativesource can be used to bind element controls outside the template, and converter can convert different types of bindings.

Supplement:

• When two triggers, ismouseover and isselected, are triggered at the same time because they set the same target and attribute:
  
  <Setter property = "background"

  Targetname = "border">

  Therefore, the attribute set by the trigger isselected takes effect.

• Sometimes border needs to set transparent padding or border transparency, otherwise the mouse cannot trigger the event (visual tree ).
• Relativesource can also be: (this will be introduced later)
  • {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 previusdata }}
• For more information about converter, see the previous article.
• Sample download