.net - obtener - ¿Cómo agrego íconos al lado de los nodos en WPF TreeView?

treeview c# ejemplos

Question

Tengo un WPF TreeView con solo 1 nivel de elementos. TreeView está vinculado a un ObservableCollection de cadenas. ¿Cómo puedo asegurarme de que aparezca el mismo ícono a la izquierda de cada nodo en TreeView?

Answer 1

Creo que el mejor enfoque es establecer un Estilo en TreeView que cambie la Plantilla de TreeViewItems para tener la Imagen que desee.

Es probable que la Plantilla necesite ser un StackPanel con una Imagen y un control de etiqueta, enlazará la imagen a su icono y el texto de la etiqueta a las cadenas de la colección Observable.

Copié el fragmento de código relevante de un artículo de Code Project , que lo trata con más detalle, pero creo que lo siguiente es todo lo que necesitará (este código va en el elemento 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

Creo que uno de los mejores artículos que lo ayudarán a comprender TreeView es este http://www.codeproject.com/KB/WPF/TreeViewWithViewModel.aspx . En general, esto describe un buen conjunto de patrones que pueden hacer que muchos escenarios en WPF / SL sean mucho más fáciles.

Answer 3

Usé la técnica StackPanel de James Osborn de esta manera ...

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>