Styling Multicolumn Tree view

Dear Team,

I'm new here.

Need to style the Multicolumn Tree view to my requirements. See the attachment that I'm working for.

Please let me know how can I achieve this in ease with all the features.

Any quick response will be highly appreciated.

Note: We are using the licenced version.

Cheers,

CGP

Have a look at the Elements sample project included in the package.  The file MulticolumnTreeViewStyling shows customisation of the header and the data row, which you should be able to adapt to your specific design scheme.  You may also find http://www.mindscape.co.nz/forums/Thread.aspx?ThreadID=1896 and http://www.mindscape.co.nz/forums/Thread.aspx?ThreadID=2220 helpful.

 Hi Ivan,

 Thanks for your quick turn around.

Yes I looked at the elements sample project included in the package. When I tried styling the header row, I'm unable to drag and drop (or reorder) or sort the columns (when ColumnHeaderContainerStyle is specified). More over is it posible to set a style as attached for each data row? I'm struck, please help me here

To support reordering, you just need to set AllowsColumnReorder="True" on the MulticolumnTreeView.  (You will need a nightly build for this as it was added after RTM.)  We don't have out of the box support for sorting because that can be confusing in a hierarchical data set, but you can easily do this in code by handling Click or MouseDown events in your column header and using them to apply SortDescriptions to the CollectionViewSource.GetDefaultView(mctv.ItemsSource).

Regarding your styling requirement for the rows, I think you need to be more specific about which features you're stuck on, but here are a few observations based on your mockup:

1. It looks like you want to show different templates for the selected row (or any row in error?).  You can accomplish this using triggers in your CellTemplate.  The row should resize to accommodate the tallest template (let us know if it doesn't).

2. The little square (checkbox???) next to the +/- button.  You can provide this by setting the ExpandingDecorator property, and having the template include the square as well as the expander itself.

3. The empty space and error indicator are going to be a bit trickier.  The assumption that column 0 will be the one with the expander in it is pretty much baked in.  The simplest approach is probably therefore to try to again handle this as part of the ExpandingDecorator.  In the styling sample, you will see that the ArrowExpandingDecorator has a margin on the ToggleButton to position it at the correct indent.  You could instead place a couple of Border elements to the left of the ToggleButton in the DockPanel, the first containing the error indicator and the second just as a dark-coloured spacing element.

Hope this helps -- if these weren't the features that were giving you trouble then let us know in more detail where you're stuck and we'll see what we can do to advise!

 Thank you very much Ivan. Let me dirty my hands on this and ping again in case of any issues.

Cheers.