Getting Started
EO.Pdf
EO.Web
EO.WebBrowser
EO.Wpf
- Overview
- Installation & Deployement
- Skin & Theme
- Common Taskes and Services
- EO.Wpf Buttons
- EO.Wpf Calendar & DatePicker
- EO.Wpf ComboBox
- EO.Wpf DockView
- EO.Wpf Gauge
- EO.Wpf ListBox
- EO.Wpf Menu
- EO.Wpf MaskedEdit
- EO.Wpf ProgressBar
- EO.Wpf Slider
- EO.Wpf SpinEdit
- EO.Wpf SplitView
- EO.Wpf TabControl
- EO.Wpf TreeView
  - EO.Wpf TreeView
  - Static TreeView
  - Dynamic TreeView from Data Source
  - Drag & Drop
  - Checkboxes
  - Node Editing
  - TreeViewItem Icon
- EO.Wpf Utility Controls
- EO.Wpf WindowChrome
- Sample Data Objects
Common Topics
Reference

Table of Contents

Node Editing

EO.Wpf TreeView supports in place node editing. To enable this feature, simply set AllowEditItem to true for the TreeView or for a TreeViewItem. The following example sets it on the TreeView. Sample code for this topic is based on populating TreeView from hierarchical data source. So you may want to familiar yourself with that section first.

XAML

Visual Basic.NET

Copy

<Window x:Class="Test.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:eo="http://schemas.essentialobjects.com/wpf/"
        Title="MainWindow" Height="250" Width="350">
    <StackPanel>
        <TextBlock TextWrapping="Wrap" Margin="0,0,0,10">
            This sample demonstrates how to use the inplace editing feature of a TreeView.
        </TextBlock>
        <eo:TreeView x:Name="TreeView1" AllowEditItem="True"
            Width="200" Height="200" HorizontalAlignment="Left"
            eo:TreeViewItem.EnterEditMode="TreeView_EnterEditMode"
            eo:TreeViewItem.ExitEditMode="TreeView_ExitEditMode">
            <eo:TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Path=Celebrities}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition></ColumnDefinition>
                            <ColumnDefinition></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <eo:Bitmap Grid.Column="0" Source="{Binding Image}" Margin="2"></eo:Bitmap>
                        <TextBlock Grid.Column="1" Text="{Binding Name}" VerticalAlignment="Center" Margin="5"></TextBlock>
                    </Grid>
                    <HierarchicalDataTemplate.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <eo:Bitmap Grid.Column="0" Source="{Binding Image}" Margin="2"></eo:Bitmap>
                                <TextBlock Grid.Column="1" Text="{Binding Name}" VerticalAlignment="Center" Margin="5"></TextBlock>
                            </Grid>
                        </DataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
                </HierarchicalDataTemplate>
            </eo:TreeView.ItemTemplate>
        </eo:TreeView>
    </StackPanel>
</Window>

private void TreeView_EnterEditMode(object sender, EditItemEventArgs e)
{
    if (e.Item is CelebrityCategory)
    {
        CelebrityCategory category = (CelebrityCategory)e.Item;
        e.Text = category.Name;
    }
    else if (e.Item is Celebrity)
    {
        Celebrity celebrity = (Celebrity)e.Item;
        e.Text = celebrity.Name;
    }
}

private void TreeView_ExitEditMode(object sender, EditItemEventArgs e)
{
    if (e.Item is CelebrityCategory)
    {
        CelebrityCategory category = (CelebrityCategory)e.Item;
        category.Name = e.Text;
    }
    else if (e.Item is Celebrity)
    {
        Celebrity celebrity = (Celebrity)e.Item;
        celebrity.Name = e.Text;
    }

    //The event must be canceled, otherwise the TreeView will
    //set the TreeViewItem's Header to the new text
    e.Canceled = true;
}

Private Sub TreeView_EnterEditMode(sender As Object, e As EditItemEventArgs)
    If TypeOf e.Item Is CelebrityCategory Then
        Dim category As CelebrityCategory = DirectCast(e.Item, CelebrityCategory)
        e.Text = category.Name
    ElseIf TypeOf e.Item Is Celebrity Then
        Dim celebrity As Celebrity = DirectCast(e.Item, Celebrity)
        e.Text = celebrity.Name
    End If
End Sub

Private Sub TreeView_ExitEditMode(sender As Object, e As EditItemEventArgs)
    If TypeOf e.Item Is CelebrityCategory Then
        Dim category As CelebrityCategory = DirectCast(e.Item, CelebrityCategory)
        category.Name = e.Text
    ElseIf TypeOf e.Item Is Celebrity Then
        Dim celebrity As Celebrity = DirectCast(e.Item, Celebrity)
        celebrity.Name = e.Text
    End If

    'The event must be canceled, otherwise the TreeView will
    'set the TreeViewItem's Header to the new text
    e.Canceled = True
End Sub

Run the above code, then follow the following steps to edit an item:

Select an item;
Click the item again, - or -
Press F2;

This places the item into edit mode as shown in the following image:

By default, the TreeView treats the TreeViewItem's Header as text and edits that text, this works if the data item is indeed a string. In case your data item is a complex object as shown in the above example, you must handle the TreeViewItem's EnterEditMode and ExitEditMode event:

Inside the EnterEditMode event handler, you should set the EditItemEventArgs's Text property to the text you wish to edit based on your data object. In another word, Text property should contain the initial value of the editing textbox. In the above sample, it sets the Text property to the Celebrity or CelebrityCategory object's Name;
Inside the ExitEditMode event handler, you should update your data object based on the value of the EditItemEventArgs's Text property, which now contains the text modified by the user. Additionally, You must set EditItemEventArgs's Canceled to true to cancel the default behavior for this event --- which updates the TreeViewItem's Header property to the new text;

In order for the TreeViewItem to update its UI after you modify the data object, your data object should usually implement INotifyPropertyChanged interface.

In the above sample, the editing textbox occupies the TreeViewItem image area. If you do not wish the textbox to occupy the image area, you can use the built-in TreeViewItem Icon support to render tree view icon images.

Table of Contents

Message