Styling the expend collapse iconThis part is not easy, we have to open the box and see for our self what’s inside? fear not!! we can open its internal structure using expression blend and then modify the required stuff, our goal in this section is to replace the default expand collapse icon with something more friendly, for instance a plus and minus icon would do for now I guess.
Lets open the project in expression blend navigate to our desired project and then open the desired window, in our case we have main window, a simple tree view control is added. navigate to the tree view just like the image shown here, then select one of the TreeViewItem , if there is no add a demo one. Then right click and select edit template, and select edit a copy.
It will quickly extend the style and bring out the desired styles in a resource file. if you mention it. well here is the xaml looks like after I have edited the default template.
Looks rusty! but you have to consider that I am a developer not a designer, designers will come out with awesome design to look it good. well our main concern is the know now. Bello I have listed the complete xaml for the edited TreeViewItem Template.
Style the selected item
Now its time to style the selected item, if you carefully notice that by default when you select any items in WPF tree view you would see that there is a blue background appear behind the selected item. There is a good chance that the client or users will not like it in customized business solutions. Again since we have the whole skeleton of the TreeViewItem we would simply modify the default style.
Bellow I have listed the xaml part of the above full style but with a simple modification in one line only, note that we have a trigger were IsSelected Property is been queried with value True, where we have changed the default value to our customized value “Silver”.
The result is given bellow
Customize outer looks
Most easy part may be customize the outer look we can achieve this with the basic WPF knowledge's. All the container property such as Border Brush, Border thickness and Margin or Padding is available for modification. One interesting this is modification of the scroll bars, in this particular scenario you might want to again expression blend to customize the look and feel of the scroll content and scroll viewer scrollbars.
In this short article we have seen that how we can customize WPF tree view for our own way and they way we want it to be look like. The methods that has been used in this article is not prefect but one of the solution that can be implemented. Hopefully in future we can look more into it and customize even more to achieve our desired look and feel. If your have any feed back and suggestion please feel free to add in the comment section.