Editable treeview node using templates and styles

Question

I'm trying to creat a editable treeview node in WPF. I read this article. But he leaves out the most crucial part as "homework" and gives a hint in form of a now missing picture. It renders his entire blog post useless to me. Otherwise its very good i think.

I have the following treeview template, i left out attributes.

            <HierarchicalDataTemplate>
                <StackPanel>
                    <Image/>
                    <TextBlock/>
                </StackPanel>
            </HierarchicalDataTemplate>

Creating a new DataTemplate

            <DataTemplate x:Key="editableName">
                <TextBox/>
            </DataTemplate>

Using the following Trigger to change the template when a node in the treeview is selected.

<Style TargetType="{x:Type TreeViewItem}">    
 <Style.Triggers>
   <Trigger Property="IsSelected" Value="True">
       <Setter Property="SOMEPATH!!!" Value="{StaticResource editableName}" />
   </Trigger>
 </Style.Triggers>
</Style>

What is the path i need to insert the data template in the HierarchicalDataTemplate/StackPanel/TextBlock.HeaderTemplate? from this trigger in the TreeViewItem.

Or am i going about this the wrong way?

Thank you very much for any help

WPF-it WPF-it · Accepted Answer · 2012-03-06T10:29:11

        <TreeView x:Name="MyTreeView">
            <TreeView.Resources>
                <DataTemplate x:Key="NormalTemplate">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding ID}" Margin="3"/>
                        <TextBlock Text="-" Margin="3"/>
                        <TextBlock Text="{Binding Name}" Margin="3"/>
                    </StackPanel>
                </DataTemplate>
                <DataTemplate x:Key="EditTemplate">
                    <TextBox Text="{Binding Name}"/>
                </DataTemplate>
            </TreeView.Resources>
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate
                             ItemsSource="{Binding Team}">
                    <ContentPresenter Content="{Binding}">
                        <ContentPresenter.Style>
                            <Style TargetType="{x:Type ContentPresenter}">
                                <Setter Property="ContentTemplate"
                                        Value="{StaticResource
                                                NormalTemplate}"/>
                                <Style.Triggers>
                                    <DataTrigger
                                         Binding="{Binding IsSelected,
                                         RelativeSource={RelativeSource
                                              FindAncestor,
                                         AncestorType={x:Type TreeViewItem}}}"
                                              Value="True">
                                        <Setter Property="ContentTemplate"
                                                Value="{StaticResource
                                                        EditTemplate}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </ContentPresenter.Style>
                    </ContentPresenter>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>

Editable treeview node using templates and styles

2 Answers