Create editable TreeViewItem using styles
One of clients asked me a question: “How easily create editable TreeViewItem”. I answers: “Simple. Just use styles, triggers and templates.” Let’s start. We need something like this.
First of all, let’s create simple tree with data, provided by XmlDataSource. Something like this will be good enough
<root> <leaf id="1" name="leaf1"> <group id="1" name="group1"> <item name="item1" id="1"> <subitem id="1">test 1</subitem> <subitem id="5">test 2</subitem> <subitem id="5">test 3</subitem> <subitem id="5">test 4</subitem> <subitem id="5">test 5</subitem> </item>
Next step is to create HierarchicalDataTemplate. Just for fun, let’s do it dummy way
<HierarchicalDataTemplate DataType="leaf" ItemsSource ="{Binding XPath=*}"> <TextBlock Text="{Binding XPath=@name}" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="group" ItemsSource ="{Binding XPath=*}"> <TextBlock Text="{Binding XPath=@name}" Foreground="Blue" /> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="item" ItemsSource ="{Binding XPath=*}"> <TextBlock Text="{Binding XPath=@name}" Foreground="Red"/> </HierarchicalDataTemplate> </Window.Resources>
Next, I want to replace TextBlock inside node with editable TextBox, but only when I have no items inside. It’s possible to do it “smart way”, by creating ControlTemplates of HeaderedItemControl, that looks if it has items inside and choose wherever it need to choose, But the original question was “how to do it simple way“. So, we’ll create data template for it
<DataTemplate x:Key="editableName"> <TextBox Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=HeaderedItemsControl}, Path=(Header).InnerText}"/> </DataTemplate>
How, what we have here? In order to show current data inside the TextBox text, we have to bind it to the ancestor’s header. Actually it’s XmlElement in our case, to we have to get InnerText property of the node. Simple – isn’t it? BTW, you can find Ancestor type of TreeViewItem – result will be exactly the same.
The last step – create a style, that has trigger for IsSelected property of TreeViewItem and change a template. Really, simple
<Style TargetType="TreeViewItem"> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="HeaderTemplate" Value="{StaticResource editableName}" /> </Trigger> </Style.Triggers> </Style>
Now, I have a homework for you – create the same thing for those TreeViewItems, which has Items inside them. This is the clue, that might help you.
You may also be interested with:
- Real singleton approach in WPF application
- INotifyPropertyChanged auto wiring or how to get rid of redundant code
May 20th, 2007 · Comments (4)
4 Responses to “Create editable TreeViewItem using styles”
Leave a Reply
Discover other tags
My tools
- .NET Framework Detector
- Duplicate images finder
- Exchange Security Policy for Windows Mobile Devices Fix
- Gas Price Windows Vista SideBar gadget
- Israel Traffic Information Windows Vista SideBar gadget
- Localization fix for SAP ES Explorer for Visual Studio
- LocTester
- RTL and LTR in Windows Live Writer
- Silverlight controls library
- Snipping tool integration plugin for WLW
- USB FM receiver library
- Vista Battery Saver
- WebCam control for WPF
- Windows Live SkyDrive attachment for Windows Live Writer
- Wireless Migrator
- WPF Virtual Keyboard




January 1st, 2009 at 12:13 am
How would you go about setting different styles for specific node types? The style is set on the TreeViewItem but I want different TreeViewItem styles for leafs, groups, items etc?
Your post helped me a bunch. Thanks.
January 1st, 2009 at 12:13 am
Lee, thank you for replay. The answer is not
There are using slight different templates. This why, I posted a clue with object document model
January 1st, 2009 at 12:13 am
When you set the style for the TreeViewItem, why do we have to do something special if it has Items. I am under the impression that your code as it is should have displayed TextBox. what am I missing
January 1st, 2009 at 12:13 am
Fshiiiiii…. Great post, great blog!