Làm cách nào để thêm biểu tượng bên cạnh các nút trong TreeView WPF?

Question

Tôi có một TreeView WPF chỉ với 1 cấp độ của các mục. TreeView là dữ liệu được liên kết với một ObservableCollection của chuỗi. Làm thế nào tôi có thể đảm bảo rằng cùng một biểu tượng xuất hiện ở bên trái của mỗi nút trong TreeView?

Answer 1

Tôi nghĩ cách tiếp cận tốt nhất là đặt Kiểu trên TreeView sẽ thay đổi Mẫu của TreeViewItems để có Hình ảnh mà bạn muốn.

Mẫu có thể sẽ cần phải là một StackPanel có điều khiển hình ảnh và nhãn, bạn ràng buộc hình ảnh vào biểu tượng của bạn và văn bản nhãn cho các chuỗi từ bộ sưu tập có thể quan sát.

Tôi đã sao chép đoạn mã có liên quan từ Code Project article, bao gồm chi tiết hơn, nhưng tôi nghĩ dưới đây là tất cả những gì bạn cần (Mã này đi vào phần tử 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

Tôi nghĩ một trong những bài viết hay nhất sẽ giúp bạn hiểu TreeView là cái này http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx. Nói chung, điều này mô tả một tập hợp các mẫu có thể làm cho rất nhiều kịch bản trong WPF/SL dễ dàng hơn nhiều.

Answer 3

tôi đã sử dụng James Osborn 's StackPanel technique theo cách này ...

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>