TreeViewItem Control Template (2)
Download Source Code In this section we show you how to implement the TreeViewItem control template that gives it an Organization Chart look. |
The TreeView with the customized TreeViewItem is located in the 2 files highlighted below:
Let's go over the main items in the control template first. Below is the control template with the major items highlighted:
First notice that we have limited width of the organization chart so that additional nodes will not keep floating to the right, and instead it goes to the next available space in the next line:
This is done by using WrapPanel as the ItemsPanel for the TreeViewItem and setting the MaxWidth of the ItemsPresenter (the children) when it's the root of the organization chart:
To show or hide the ToggleButton based on if the node has children, we define a trigger that is based on the HasItems property of the TreeViewItem.
To show or hide the children of the node, which is displayed by the ItemsPresenter, we hide the ItemsPresenter (the children) by default and show it only if the TreeViewItem is in the Expanded visual state.
To show the correct triangle orientation of the ToggleButton when the children is expanded or collapsed, we bind the IsChecked property of the ToggleButton to the IsExpanded property of the TreeViewItem. The ToggleButton also has a control template that shows the Triangle's orientation.
And lastly, we need to give the Italicized look of the node when it's selected and change the background of the node and its children to blue. This is done by defining the visual state of the TreeViewItem. We simply apply the transformation to the ContentPresenter (named as PART_Header, which contains the visual display of the node), and change the background color of the border:
And that's all. We hope you will find this project useful in defining your own customized look of the TreeViewItem.
Future series of articles on sharepoint:
sharepoint list -- the concepts of sharepoint list and how to effectively manage it
sharepoint version control -- the internals of sharepoint version control and how to administer and manage the versions
sharepoint permissions -- how to manage the permissions in a large enterprise sharepoint environment
sharepoint server farm -- how to set up a high availability sharepoint server farm
sharepoint document library -- the details on how to get your ways around the document library in sharepoint
sharepoint configuration -- the configurations needed for different sharepoint network scenarios
sharepoint css -- making the most out of customizing sharepoint frontend
sharepoint web services -- some of the most convienent ways to communicate with the internals of sharepoint
Let's go over the main items in the control template first. Below is the control template with the major items highlighted:
The Border is used to surround the node and its children.
The ContentPresenter is the node itself that is being displayed (The picture of the person, first name, last name).
The ToggleButton is the small triangle that you can click to expand or collapse the node.
The ItemsPresenter is the children of the node.
The VisualStateManager defines the look of the visual states of the TreeViewItem.
The ContentPresenter is the node itself that is being displayed (The picture of the person, first name, last name).
The ToggleButton is the small triangle that you can click to expand or collapse the node.
The ItemsPresenter is the children of the node.
The VisualStateManager defines the look of the visual states of the TreeViewItem.
This is done by using WrapPanel as the ItemsPanel for the TreeViewItem and setting the MaxWidth of the ItemsPresenter (the children) when it's the root of the organization chart:
To show or hide the ToggleButton based on if the node has children, we define a trigger that is based on the HasItems property of the TreeViewItem.
To show or hide the children of the node, which is displayed by the ItemsPresenter, we hide the ItemsPresenter (the children) by default and show it only if the TreeViewItem is in the Expanded visual state.
To show the correct triangle orientation of the ToggleButton when the children is expanded or collapsed, we bind the IsChecked property of the ToggleButton to the IsExpanded property of the TreeViewItem. The ToggleButton also has a control template that shows the Triangle's orientation.
And lastly, we need to give the Italicized look of the node when it's selected and change the background of the node and its children to blue. This is done by defining the visual state of the TreeViewItem. We simply apply the transformation to the ContentPresenter (named as PART_Header, which contains the visual display of the node), and change the background color of the border:
And that's all. We hope you will find this project useful in defining your own customized look of the TreeViewItem.
Future series of articles on sharepoint:
sharepoint list -- the concepts of sharepoint list and how to effectively manage it
sharepoint version control -- the internals of sharepoint version control and how to administer and manage the versions
sharepoint permissions -- how to manage the permissions in a large enterprise sharepoint environment
sharepoint server farm -- how to set up a high availability sharepoint server farm
sharepoint document library -- the details on how to get your ways around the document library in sharepoint
sharepoint configuration -- the configurations needed for different sharepoint network scenarios
sharepoint css -- making the most out of customizing sharepoint frontend
sharepoint web services -- some of the most convienent ways to communicate with the internals of sharepoint