title: How can I use HierarchicalDataTemplate to display XML Elements and Attributes?
body: <p>I'd like to display arbitrary XML in a TreeView, with expanding and collapsing nodes, showing both the element name and the set of attributes and their values. I think I can do this with HierarchicalDataTemplate . </p>
  
  <p>I've seen the hints to use HierarchicalDataTemplate to display arbitrary XML <em>elements</em>, and text nodes, like this: </p>
  
  <pre><code>  &lt;Window.Resources&gt;
      &lt;HierarchicalDataTemplate x:Key="NodeTemplate"&gt;
        &lt;TextBlock x:Name="tbName" Text="?" /&gt;
        &lt;HierarchicalDataTemplate.ItemsSource&gt;
          &lt;Binding XPath="child::node()" /&gt;
        &lt;/HierarchicalDataTemplate.ItemsSource&gt;
        &lt;HierarchicalDataTemplate.Triggers&gt;
          &lt;DataTrigger Binding="{Binding Path=NodeType}" Value="Text"&gt;
            &lt;Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value}"/&gt;
          &lt;/DataTrigger&gt;
          &lt;DataTrigger Binding="{Binding Path=NodeType}" Value="Element"&gt;
            &lt;Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}"/&gt;
          &lt;/DataTrigger&gt;
        &lt;/HierarchicalDataTemplate.Triggers&gt;
      &lt;/HierarchicalDataTemplate&gt;
      &lt;XmlDataProvider x:Key="xmlDataProvider"&gt;
      &lt;/XmlDataProvider&gt;
    &lt;/Window.Resources&gt;
    ....
  
    &lt;TreeView Name="treeView1"
            ItemsSource="{Binding Source={StaticResource xmlDataProvider}, XPath=*}"
            ItemTemplate= "{StaticResource NodeTemplate}"/&gt;
  </code></pre>
  
  <p>Which works great. It displays the element names and text for each element.  But my XML uses attributes to carry information. The schema is complex and I don't have a formal definition of it, so for now I am treating it as arbitrary XML. </p>
  
  <p>The simplest document looks like this: </p>
  
  <pre><code>&lt;c4soap name="GetVersionInfo" seq="" result="1"&gt;
    &lt;versions&gt;
      &lt;version name="Director" 
               version="2.1.0.126418" 
               buildtype="" 
               builddate="Jun  1 2011" buildtime="14:52:43" /&gt;
      &lt;version name="MediaManager" 
               version="2.1.0.126418" 
               buildtype="" 
               builddate="Jun  1 2011" 
               buildtime="14:36:17" /&gt;
    &lt;/versions&gt;
  &lt;/c4soap&gt;
  </code></pre>
  
  <p>Using the above HierarchicalDataTemplate definition, I get this for a display: </p>
  
  <p><img src="https://i.stack.imgur.com/ZI1vE.png" alt="enter image description here"></p>
  
  <p>Not quite what I want. For each node I want to display both the element name <em>and</em> the set of attributes and their values.</p>
  
  <p>I tried this: </p>
  
  <pre><code>  &lt;Window.Resources&gt;
      &lt;HierarchicalDataTemplate x:Key="NodeTemplate"&gt;
        &lt;WrapPanel
            Focusable="False"&gt;
          &lt;TextBlock x:Name="tbName" Text="?" /&gt;
          &lt;TextBlock x:Name="tbAttrs" Text="?" /&gt;
        &lt;/WrapPanel&gt;
        &lt;HierarchicalDataTemplate.ItemsSource&gt;
          &lt;Binding XPath="child::node()" /&gt;
        &lt;/HierarchicalDataTemplate.ItemsSource&gt;
        &lt;HierarchicalDataTemplate.Triggers&gt;
          &lt;DataTrigger Binding="{Binding Path=NodeType}" Value="Text"&gt;
            &lt;Setter TargetName="tbName" Property="Text" Value="{Binding Path=Value}"/&gt;
          &lt;/DataTrigger&gt;
          &lt;DataTrigger Binding="{Binding Path=NodeType}" Value="Element"&gt;
            &lt;Setter TargetName="tbName" Property="Text" Value="{Binding Path=Name}"/&gt;
            &lt;Setter TargetName="tbAttrs" Property="Text" Value="{Binding Path=Attributes}"/&gt;
          &lt;/DataTrigger&gt;
        &lt;/HierarchicalDataTemplate.Triggers&gt;
      &lt;/HierarchicalDataTemplate&gt;
      &lt;XmlDataProvider x:Key="xmlDataProvider"&gt;
      &lt;/XmlDataProvider&gt;
    &lt;/Window.Resources&gt;
  </code></pre>
  
  <p>... which gets me kinda close, but the 
  <code>Value="{Binding Path=Attributes}"</code> results in a display of "(Collection)" in the TreeView. </p>
  
  <p><img src="https://i.stack.imgur.com/hHvLa.png" alt="enter image description here"></p>
  
  <p>How can I simply display all the actual attribute names and values, in addition to the element name? </p>