Wie füge ich Symbole neben den Knoten in einem WPF-TreeView hinzu?

Question

Ich habe eine WPF TreeView mit nur 1 Ebene von Elementen. Die TreeView ist Daten, die an eine ObservableCollection von Zeichenfolgen gebunden sind. Wie kann ich sicherstellen, dass das gleiche Symbol links von jedem Knoten in der TreeView angezeigt wird?

Answer 1

Ich denke, der beste Ansatz besteht darin, einen Style auf der TreeView zu setzen, der die Template der TreeViewItems so verändern wird, dass sie das gewünschte Image hat.

Die Vorlage muss wahrscheinlich ein StackPanel mit einem Bild- und einem Beschriftungssteuerelement sein, Sie binden das Bild an Ihr Symbol und den Beschriftungstext an die Zeichenfolgen aus der Observable-Sammlung.

Ich habe das entsprechende Code-Snippet aus einer Code Project article kopiert, die dies ausführlicher behandelt, aber ich denke, das Folgende ist alles was Sie brauchen (Dieser Code wird in das Element TreeView.Resources).

<Style TargetType="{x:Type TreeViewItem}"> 
    <Setter Property="HeaderTemplate"> 
     <Setter.Value> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Image Name="img" 
          Width="20" 
          Height="20" 
          Stretch="Fill" 
          Source="image.png"/> 
        <TextBlock Text="{Binding}" Margin="5,0" /> 
       </StackPanel> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

Ich glaube, einer der besten Artikel, die Sie die TreeView ist dies eine http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx verstehen helfen. Im Allgemeinen beschreibt dies eine gute Menge von Mustern, die viele Szenarien in WPF/SL viel einfacher machen können.

Answer 3

I verwendet James Osborn ‚s StackPanel technique auf diese Weise ...

XAML:

<TreeView Name="TreeViewThings" ItemsSource="{Binding}"> 
    <TreeView.Resources> 
     <HierarchicalDataTemplate DataType="{x:Type local:Thing}" 
            ItemsSource="{Binding Children}"> 
      <StackPanel Orientation="Horizontal" Margin="2"> 
       <Image Source="Thing.png" 
         Width="16" 
         Height="16" 
         SnapsToDevicePixels="True"/> 
       <TextBlock Text="{Binding Path=Name}" Margin="5,0"/> 
      </StackPanel> 
     </HierarchicalDataTemplate> 
    </TreeView.Resources> 
</TreeView>