#8948 implement the Windows 7 style aero Treeview Control (2): implement the entire row Selection

I remember that the whole row can be obtained through the bounds of item in winfrom, but several la s in WPF failed!
The solution effect layout in vs is as follows:

In this way, the border control is used in the second column of the First row. This is the selected area. To achieve the effect of the system on the right, the width of the first column of the Second row must be filled when the selected area is selected. However, if the subnode list indent is not set in the treeviewitem template, subnode list indent cannot be located!
The treenode type of winform has two key attributes: fullpath and level. If you know one, you can calculate the corresponding indent width based on the indent. In this way, the layout structure of this item must be changed as follows:

The code structure is as follows:

<Stackpanel>

<Border X: Name = "itemborder">

<Grid>

<Grid. columndefinitions>

<Columndefinitions width = "19"/>

<Columndefinitions width = "*"/>

</Grid. columndefinitions>

<Path X: Name = "treearrow" grid. Column = "0"/>

<Contentpresenter contentsource = "Header" grid. Column = "1"/>

</GRID>

</Border>

<Itemspresenter X: Name = "itemshost"/>

</Stackpanel>

But what should I do if the subnode list is not indented at this time?
Make a few preparations. In treeviewitem, there is a special feature of treenode, called level, to get the level of the node. Here I made an extensions class:

Public static class treeviewitemextensions
{
Public static int getdepth (this treeviewitem item)
{
Frameworkelement ELEM = item;
While (ELEM. parent! = NULL)
{
VaR TVI = ELEM. Parent as treeviewitem;
If (null! = TVI)
Return TVI. getdepth () + 1;
ELEM = ELEM. Parent as frameworkelement;
}
Return 0;
}
}

Used to obtain the hierarchical depth of a treeviewitem in a Treeview. Then there is how to bind the indent to where it should be!

The template of the preceding treeviewitemCodeItemborder in it is the overall range of node items. If we want to keep the selected border in the aero style in the full row selection state, we can only do something on the grid in itemborder, the above extends the treeviewitem object, which can be obtained to the level depth, while the indent value is equal to the product of the node level and the indent value, and the application indent value needs to implement an indent conversion method:

Public class indentconverter: ivalueconverter
{
Public double indent {Get; set ;}

Public object convert (object value, type targettype, object parameter, cultureinfo culture)
{< br> var item = value as treeviewitem;
If (null = item)
return New thickness (0);
return New thickness (indent * item. getdepth (), 0, 0, 0);
}

Public object convertback (object value, type targettype, object parameter, cultureinfo Culture)
{
Throw new notimplementedexception ();
}
}

Then, transform the content of the previous template. The complete code is as follows:

<Style targettype = "{X: Type treeviewitem}" X: Key = "AAA">
<Setter property = "focusvisualstyle" value = "{staticresource treeviewitemfocusvisual}"/>
<Setter property = "template">
<Setter. value>
<Controltemplate targettype = "{X: Type treeviewitem}">
<Controltemplate. Resources>
<O2ds: indentconverter indent = "19" X: Key = "indentconverter"/>
</Controltemplate. Resources>
<Stackpanel>
<Border name = "itembackground" background = "{templatebinding background }"
Borderbrush = "{templatebinding borderbrush }"
Borderthickness = "{templatebinding borderthickness }"
Padding = "{templatebinding padding}">
<Grid margin = "{binding converter = {staticresource lengthconverter}, relativesource = {relativesource templatedparent}">
<Grid. columndefinitions>
<Columndefinition width = "19"/>
<Columndefinition/>
</Grid. columndefinitions>
<Togglebutton grid. Column = "0" X: Name = "arrowbutton" style = "{staticresource treeviewarrowbuttonstyle }"
Ischecked = "{binding Path = isexpanded, relativesource = {relativesource templatedparent }}"
Clickmode = "Press"/>
<Contentpresenter grid. Column = "1" X: Name = "part_header" contentsource = "Header"
Horizontalalignment = "{templatebinding horizontalcontentalignment}"/>
</GRID>
</Border>
<Itemspresenter X: Name = "itemshost"/>
</Stackpanel>

<Controltemplate. triggers>

Trigger something...
</Controltemplate. triggers>
</Controltemplate>
</Setter. value>
</Setter>
</Style>

 

 

<Grid margin = "{binding converter = {staticresource indentconverter}, relativesource = {relativesource templatedparent}">

The indentconverter object is responsible for obtaining depth and conversion margins. Therefore, we have completed the task of selecting the treeviewitem in the whole line. As for the aero style effect details, we will release them later.