WPF TreeView Node Rename

The following TreeView node is bound to the Text property of the TextBlock control and the TextBox control through two-way binding of the data, and lets both bind the same properties, while the TextBox control exactly overwrites the TextBlock control. Because of the difference between the TextBlock control and the TextBox control, the TextBlock control was unable to implement editing, so I covered a TextBox control above the TextBlock control, In the initial state we set the TextBox's Visibility property to collapsed, and 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, add a TextBlock control to the template, and add a TextBox control:

<TreeView. ItemTemplate>       <hierarchicaldatatemplateDataType= "{x:type Localex:treemode}"ItemsSource= "{Binding children}">            <CheckBoxTag= "{Binding children}"IsChecked= "{Binding IsChecked, mode=twoway}"ToolTip= "{Binding ToolTip}">               <StackPanelOrientation= "Horizontal">                   <ImageVerticalAlignment= "Center"Source= "{Binding Icon}"/>                      <StackPanelOrientation= "Vertical">                      <TextBlockText= "{Binding Name, mode=twoway}"HorizontalAlignment= "Center"Width= "Auto"/>                       <TextBoxx: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>                     <MenuItemName= "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 voidTreeviewitem_previewmouserightbuttondown (Objectsender, MouseButtonEventArgs e) {             //The item here defines a member variable of a class, which is a TreeViewItem typeItem = getparentobjectex<treeviewitem> (E.originalsource asDependencyObject) asTreeViewItem; if(Item! =NULL)              {                 //get the current node focusitem.                 Focus (); //the system no longer handles the operatione.handled =true; }        }        //Renaming the current TreeViewItem        Private voidRenametreeviewitem_click (Objectsender, RoutedEventArgs e) {             //Gets the TextBox control defined in Treeview.itemtemplateTemptextbox = findvisualchild<textbox> (item asDependencyObject); //set the Visibility property of the textbox to visibleTemptextbox.visibility =visibility.visible; }

The following function mainly uses the Visualtreehelper.getparent () method to obtain the various controls above the visual tree, when we click on the TreeView node, we follow the visual tree VisualTree up to get the appropriate control, in this case, the control to find: textblock-"stackpanel-" stackpanel-"contentpresenter-" bulletdecorator-"checkbox-" contentpresenter-"Boarder-" grid-"TreeViewItem to find the TreeViewItem object we need by looking up each time.

      //gets the TreeViewItem of the current TreeView       PublicTreeViewItem getparentobjectex<treeviewitem> (DependencyObject obj)wheretreeviewitem:frameworkelement {DependencyObject parent=visualtreehelper.getparent (obj);  while(Parent! =NULL)          {              if(Parent isTreeViewItem) {                  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        PrivateChildItem findvisualchild<childitem> (DependencyObject obj)whereChilditem:dependencyobject { for(inti =0; I < Visualtreehelper.getchildrencount (obj); i++) {DependencyObject child=visualtreehelper.getchild (obj, i); if(Child! =NULL&& Child isChildItem)return(ChildItem) child; Else{ChildItem Childofchild= findvisualchild<childitem>(child); if(Childofchild! =NULL)                        returnChildofchild; }            }            return NULL; }          

        // This event        occurs when the textbox loses focus Private void renametextbox_lostfous (object  sender, RoutedEventArgs e)        {            =  visibility.collapsed;        }

WPF TreeView Node Rename