Treeview of win7 for WPF Learning

Source: Internet
Author: User
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

      Contact Us

      The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

      If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

      A Free Trial That Lets You Build Big!

      Start building with 50+ products and up to 12 months usage for Elastic Compute Service

      • Sales Support

        1 on 1 presale consultation

      • After-Sales Support

        24/7 Technical Support 6 Free Tickets per Quarter Faster Response

      • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.