How WPF implements TreeView node renaming

We often see some software such as cool dog music, when the right-click on the list is renamed, the current list will be white and into the editable state, when we have changed the completion of the will and enter the non-editing state, how is this specific implementation? The following method might provide some idea of how the following TreeView node is bound to the Text property of the TextBlock control and the TextBox control through the data bidirectional binding, and that the two bindings have the same properties. While making the TextBox control exactly overwrite the TextBlock control, the TextBlock control cannot be edited because of the difference between the TextBlock control and the TextBox control, so I covered a TextBox control above the TextBlock control. In the initial state we set the TextBox's Visibility property to collapsed when we click Rename, we then set the TextBox's Visibility property to visible, so that we can rename the node, Of course, after we've named it (after the textbox loses focus) We set the TextBox's Visibility property to collapsed, which completes the renaming process, and of course we have a lot of important work to do, For example, how to get the TextBox control in Hierarchicaldatatemplate This is the key, and then the TextBlock control and the TextBox control must be bound to the same property at the same time, so that when the property value changes, You can change the value of the TextBlock Text property. Note: The default binding method of the TextBox is Mode=twoway.

Front-end XAML code (critical section)

<TreeView.ItemTemplate>

<checkbox tag= "{Binding children}" ischecked= "{Binding IsChecked, Mode=twoway}" tooltip= "{Binding ToolTip}" >

<stackpanel orientation= "Horizontal" >

<image verticalalignment= "Center" source= "{Binding Icon}"/>

<stackpanel orientation= "Vertical" >

<textblock text= "{Binding Name, mode=twoway}" horizontalalignment= "Center" width= "Auto"/>

<textbox x:name= "Renametextbox" text= "{Binding Name, mode=twoway}" horizontalalignment= "Center" margin= "0,-20,0,0 "

Width= "Auto" visibility= "collapsed" lostfocus= "renametextbox_lostfous"/>

</StackPanel>

</StackPanel>

<CheckBox.ContextMenu>

<ContextMenu>

<menuitem name= "Renameitem" header= "rename" click= "Renametreeviewitem_click" >

</MenuItem>

</ContextMenu>

</CheckBox.ContextMenu>

</CheckBox>

</HierarchicalDataTemplate>

</TreeView.ItemTemplate>

Back-end Core code:

The following section occurs when the mouse pointer is over this element (TreeViewItem) and the right mouse button is pressed.

private void Treeviewitem_previewmouserightbuttondown (object sender, MouseButtonEventArgs e)
{

The item here defines a member variable of a class, which is a treeviewitem type
Item = getparentobjectex<treeviewitem> (E.originalsource as DependencyObject) as TreeViewItem;
if (item! = NULL)
{

Get the current node focus
Item. Focus ();

The system no longer handles the operation

E.handled = true;

}
}

Renaming the current TreeViewItem

private void Renametreeviewitem_click (object sender, RoutedEventArgs e)

{

Gets the TextBox control defined in Treeview.itemtemplate

Temptextbox = findvisualchild<textbox> (item as DependencyObject);

//Set the visibility property of the textbox to be Visible

temptextbox.visibility = visibility.visible;

}

The following function mainly uses the Visualtreehelper.getparent () method to obtain the various controls above the visual tree, and when we click on the TreeView node, we follow the visual tree VisualTree up to get

The corresponding control, in this case, the control found in turn: textblock-"stackpanel-" stackpanel-"contentpresenter-" bulletdecorator-"checkbox-" contentpresenter-"boarder-" grid-"TreeViewItem, through each of the upward search finally find the TreeViewItem object we need.

Gets the TreeViewItem of the current TreeView
Public TreeViewItem getparentobjectex<treeviewitem> (DependencyObject obj) where treeviewitem:frameworkelement
{
DependencyObject parent = visualtreehelper.getparent (obj);
while (parent! = NULL)
{
if (parent is TreeViewItem)
{
Return (TreeViewItem) parent;
}
Parent = visualtreehelper.getparent (parent);
}
return null;
}

The following function is also very important, Since the TextBox control we define is defined in treeview.itemtemplate, it is not possible to find the current control through this, and if the current control cannot be obtained, the following operation is not possible, so this function is also very important. And the mouse click is to look up along the visual tree, here we need to look down the visual tree, until we find our TextBox control, and finally return to the TextBox control object, which is exactly the opposite of the above process, but this process is also very important, You can refer to MSDN for more specific instructions on how to use them.

Get the various controls inside ItemTemplate

Private ChildItem findvisualchild<childitem> (DependencyObject obj) where childitem:dependencyobject

{

for (int i = 0; i < visualtreehelper.getchildrencount (obj); i++)

{

DependencyObject child = Visualtreehelper.getchild (obj, i);

if (child! = NULL && child is ChildItem)

return (ChildItem) child;

Else

{

ChildItem Childofchild = findvisualchild<childitem> (child);

if (childofchild! = null)

return childofchild;

}

}

return null;

}

This event occurs when the textbox loses focus

private void Renametextbox_lostfous (object sender, RoutedEventArgs e)

{

temptextbox.visibility = visibility.collapsed;

}

How WPF implements TreeView node renaming