WPF, XAML: TreeView HierarchicalDataTemplate databinding to unknown XML/DataSource

Problem description

• I wish to bind my TreeView to a datasource.
• The TreeView should build its child nodes dynamically (unknows childs in datasource).
• Each node should display its data or (if no data) its element name.

Solution
You need to use and understand these parts:

1. HierarchicalDataTemplate
1. HierarchicalDataTemplate.Triggers
2. Binding XPath

Usage Example
Just copy paste and start playing / reading each part's help.

XAML

Code Snippet

1. <Window x:Class="TreeViewDataBinding.Window1"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     Title="Window1" Height="300" Width="300">
5.     <Window.Resources>
6.         <HierarchicalDataTemplate x:Key="NodeTemplate" >
7.  
8.             <TextBlock x:Name="tbName" Text="?" />
9.  
10.             <HierarchicalDataTemplate.ItemsSource>
11.                 <Binding XPath="child::node()" />
12.             </HierarchicalDataTemplate.ItemsSource>
13.  
14.             <HierarchicalDataTemplate.Triggers>
15.                 <DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
16.                     <Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value}"/>
17.                 </DataTrigger>
18.                 <DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
19.                     <Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}"/>
20.                 </DataTrigger>
21.             </HierarchicalDataTemplate.Triggers>
22.         </HierarchicalDataTemplate>
23.  
24.         <XmlDataProvider x:Key="xmlDataProvider"/>
25.     </Window.Resources>
26.     
27.     <StackPanel>
28.         <Button Click="Button_Click">Reload</Button>
29.         
30.         <TreeView
31.             ItemsSource="{Binding Source={StaticResource xmlDataProvider}, XPath=*}"
32.             ItemTemplate="{StaticResource NodeTemplate}" />
33.     </StackPanel>
34. </Window>

Code behind

Code Snippet

1. using System.Windows;
2. using System.Windows.Data;
3. using System;
4.  
5. namespace TreeViewDataBinding
6. {
7.     public partial class Window1 : Window
8.     {
9.         public Window1()
10.         {
11.             InitializeComponent();
12.         }
13.  
14.         private void Button_Click(object sender, RoutedEventArgs e)
15.         {
16.             var provider = (XmlDataProvider)this.Resources["xmlDataProvider"];
17.             provider.Source = new Uri(@"Data\standard.xml", UriKind.Relative);
18.         }
19.     }
20. }

Additional files

• standard.xml testbenach XML file (100MB !!).
• http://www.xml-benchmark.org/downloads.html
• " For your convenience, we provide a ready-made document for a 100 MB experiment."

Performance
I was able to load 100MB of xml data in around ~6 seconds first time, ~4 seconds from the second time.

Testbench station

• i7 (8 cores) @ 2.80GHz
• 4.00GB RAM
• 64-Bit OS, Win7 Pro.

CPU & memory usage

The CPU was at idle when i started, the RAM was at the base line.

Results

Resources

• http://www.w3schools.com/xpath/xpath_syntax.asp
• http://www.w3schools.com/xpath/xpath_axes.asp
• http://stackoverflow.com/questions/1605062/treeview-bound-to-xmldataprovider-shows-data-in-editor-but-empty-when-run

Hope it helps.

WPF XAML example: Binding FontSize to a Slider

Code snippet

Code Snippet

9. <TextBlock Text="Hi there." FontSize="{Binding ElementName=mySlider, Path=Value}" />
10. <Slider Minimum="8" Maximum="32" x:Name="mySlider" Value="12" />

Result

WPF XAML example: Rich texted ToolTip with italic, color and more...

Example
In this example I'll demonstrate how to add a ToolTip to a TextBox.
The ToolTip should be colored and italic.

Code snippet

Code Snippet

9. <TextBox x:Name="SampleText"
10.     TextWrapping="Wrap">
11.     
12.     <TextBox.ToolTip>
13.         <TextBlock>
14.             <Italic Foreground="Red">Instructions: </Italic> Type here to change the preview text.
15.         </TextBlock>
16.     </TextBox.ToolTip>
17.     
18.     The quick brown fox jumps over the lazy dog.
19. </TextBox>

Result

Sources

• http://www.amazon.com/Sams-Teach-Yourself-WPF-Hours/dp/0672329859

WPF XAML TIP: Label with Target + Control composition == Hotkey control

Code snippet

Code Snippet

6. <Border DockPanel.Dock="Top">
7.     <StackPanel>
8.         <Label
9.             Content="_Last Name:"
10.             Target="{Binding ElementName=lastName}" />
11.         <TextBox x:Name="lastName" Width="100" HorizontalAlignment="Left"/>
12.     </StackPanel>
13. </Border>

Usage 
Press ALT+L to focus the TextBox control 'lastName'.

Result

WPF: TextBox with SpellCheck and ToolTip XAML example

Code snippet

Code Snippet

6. <TextBox
7.     Width="200"
8.     SpellCheck.IsEnabled="True"
9.     ToolTip="Tips for this input-box here..." />

Results

  

WPF: Rich TextBlock XAML example

"The TextBlock was designed specifically for the purpose of showing small amounts of flowing rich text to the user.
It is the perfect element for displaying instructions or summary information."

• Quoted from ''Sams Teach Yourself WPF in 24 Hours"

Usage example

I have a program that users can communicate with each other. I wish to add the feature of bold, colored, line-breaking and icons to that chat.

Here is an example I've found to illustrate it:

Source - http://www.webresourcesdepot.com/wp-content/uploads/image/free-ajax-chat-software.jpg

Example

Code Snippet

7. <TextBlock FontSize="10" TextWrapping="Wrap" >
8.     <Image Stretch="UniformToFill" Width="32" Height="32" Source="http://upload.wikimedia.org/wikipedia/en/b/b0/Avatar-Teaser-Poster.jpg" Margin="2 2 2 2" />
9.                     <Bold><Italic FontSize="12" Foreground="DarkGreen">ShloEmi:</Italic></Bold><LineBreak />
10.     <Bold><Italic FontSize="14" Foreground="BlueViolet">H</Italic></Bold>ave  fun with <Bold>TextBlock's</Bold>.<LineBreak />
11.     <AccessText Foreground="Blue">It's easy when you have an example </AccessText> <Image Source="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/50px-Smiley.svg.png" Width="16" Height="16"></Image>
12. </TextBlock>

Result

Have fun...

WPF: Bulletdecorator XAML example

BulletDecorator is basically like any editor bullet (like MS word's bullet). You can specify how to draw the bullet itself and decorate what ever you need.

Suppose we want to do the following effect in WPF:

• This is a bullet

Here is the source for it:

Code Snippet

6. <BulletDecorator>
7.     <BulletDecorator.Bullet>
8.         <Polygon Margin=" 2, 0, 0, 0" Points="0, 5 5, 0 10, 5 5, 10" Fill=" Blue" />
9.     </BulletDecorator.Bullet>
10.     <TextBlock Margin="10, 0, 0, 0" Text="This is a bullet" />
11. </BulletDecorator>

And here is the results:

Source - Bulletdecorator in WPF | Controls | w3mentor