How to implement In-Place Editing on a TreeViewItem?

You don't actual *need* to make a custom control, although the functionality may better match what you're looking for if you use one. Using Styles/Triggers, you can create the basic functionality:

<Style BasedOn="{StaticResource {x:Type TreeViewItem}}" TargetType="TreeViewItem">

<Setter Property="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<TextBlock Text="{Binding}" />

</DataTemplate>

</Setter.Value>

</Setter>

<Style.Triggers>

<Trigger Property="IsSelected" Value="true">

<Setter Property="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<!-- Must use RelativeSource, since we can't TwoWay bind without a Path -->

<TextBox Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}}, Path=Header}" />

</DataTemplate>

</Setter.Value>

</Setter>

</Trigger>

</Style.Triggers>

</Style>

Hope this Helps.

T.J. Hsiang

WPF Performance Team

T.J.Hsiang(Microsoft) at 2007-10-3 >

Yeah, the control you're talking about (let's say "EditBox") has been a popular feature request and we have looked into adding support for it in the future, although we can't commit doing so at this point.

Good luck,

T.J. Hsiang

WPF Performance Team

T.J.Hsiang(Microsoft) at 2007-10-3 >

OK, I give. I can't figure out how to add a TextBox to my TreeViewItem. I've seen several samples on the web that show how to customize the TreeViewItem style, but I'm confused as to how that relates to what is in my HierarchicalDataTemplate. In the TreeViewItem style there is no mention of a TextBlock, just a ContentPresentor. In my DataTemplate, though, TextBlock is in there twice. I can't however, add a hidden TextBox. Here is my datatemplate, any suggestions?

JeremyChaney at 2007-10-3 >

<HierarchicalDataTemplate DataType="{x:Type i:XXX}"
ItemsSource="{Binding Path=Values}"
>
<StackPanel Orientation="Horizontal">
<Image Source="{DynamicResource ImgInstValueGroup}"
Width="16"
Height="16"
RenderOptions.EdgeMode="Aliased"/>
<Grid MinWidth="200">
<TextBlock Text="{Binding Path=Name}"
Visibility="{Binding ElementName=TxtContent, Path=Visibility, Converter={StaticResource VisInvers}}"
Style="{StaticResource TextBlockStyle}"/>
<TextBox Name="TxtContent"
AcceptsReturn="False"
Text="{Binding Path=Name, UpdateSourceTrigger=PropertyChanged}"
ContextMenu="{StaticResource ValuesContextMenu}"
Visibility="{Binding ElementName=ParentControl, Path=EditMode, Converter={StaticResource BoolToVis}}"
/>
</Grid>
</StackPanel>
</HierarchicalDataTemplate>

This technique uses a custom converter, which simply reverses the 'Visibility' value (Visible <-> Collapsed). And I have a property defined on the page called 'EditMode' which, when true, all the items using this template will be put in edit mode.

This is one way of doing it, without using custom controls. There is some overhead involved with this type of solution (there is this extra grid and the 2 controls are always created). I will post a control to http://www.codeplex.com/wpfcontrib in a couple of days, which will be a more generic solution. I am probably going the to inherit from a 'Decorator'. This way, you can add In place editing behaviour to all types of controls, not just textblocks, using all kinds of editors (ex ComboBoxes). Keep an eye on the project, I will post it in a couple of days, maybe a week (note: the next actual release will be in a couple of weeks, so you will have to get the latest sources).

Bragi at 2007-10-3 >