Добавление изображения в виде дерева в wpf

Question

У меня есть элемент управления treeview в wpf. Мне нужно добавить изображение на узел evry. Как это возможно?

Answer 1

Если вы хотите иметь уникальные изображения для каждого узла, вы можете сделать что-то вроде:

    <TreeView>
        <TreeViewItem>
            <TreeViewItem.Header>
                <Image Source="/WpfApplication2;component/folder.png" Height="25" Width="25"/>
            </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <Image Source="/WpfApplication2;component/folder1.png" Height="25" Width="25"/>
            </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <Image Source="/WpfApplication2;component/folder2.png" Height="25" Width="25"/>
            </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <Image Source="/WpfApplication2;component/folder3.png" Height="25" Width="25"/>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeView>

или, если вы хотите иметь одинаковое изображение для каждого узла, вы можете сделать что-то вроде этого:

    <Window.Resources>
    <Image Source="/WpfApplication2;component/folder.png" Height="25" Width="25" x:Key="FolderIcon" x:Shared="false"/>
</Window.Resources>
<Grid>
    <TreeView>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StaticResourceExtension ResourceKey="FolderIcon"/>
            </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StaticResourceExtension ResourceKey="FolderIcon"/>
            </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StaticResourceExtension ResourceKey="FolderIcon"/>
            </TreeViewItem.Header>
        </TreeViewItem>
        <TreeViewItem>
            <TreeViewItem.Header>
                <StaticResourceExtension ResourceKey="FolderIcon"/>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeView>
</Grid>

Надеюсь, это поможет.

ОБНОВЛЕНИЕ , чтобы ответить на следующий вопрос: «Как я могу изменить изображение / значок при нажатии / расширении узла»

Вот быстрое и грязное решение.

Xaml:

<Window.Resources>
    <Image Source="/WpfApplication2;component/folder.png" Height="25" Width="25" x:Key="FolderIcon" x:Shared="false"/>
    <Image Source="/WpfApplication2;component/folderOpened.jpg" Height="25" Width="25" x:Key="FolderOpenIcon" x:Shared="false"/>
</Window.Resources>
<Grid>
    <TreeView>
        <TreeViewItem PreviewMouseLeftButtonDown="itemExpanded" Name="treeViewItem">
            <TreeViewItem.Header>
                <StaticResourceExtension ResourceKey="FolderIcon"/>
            </TreeViewItem.Header>
            <TreeViewItem>
                <TreeViewItem/>
            </TreeViewItem>
        </TreeViewItem>
    </TreeView>
</Grid>

C # / Кодовый код

    public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void itemExpanded(object sender, RoutedEventArgs e)
    {
        if (treeViewItem.IsExpanded)
        {
            treeViewItem.Header = FindResource("FolderIcon");
        }
        else
        {
            treeViewItem.Header = FindResource("FolderOpenIcon");
        }          
    }
}

Вытакже можно выполнить это с помощью события «Расширенное».Если вы хотите устранить «выделенный код», вы также можете сделать это с помощью команды или конвертера.

Answer 2

1. Переместить изображение в раздел ресурсов и установить x: Shared = "False":

   <Window.Resources>
   <Image Source="links.png" x:Key="imgLinks" x:Shared="False"/>
   

2. Используйте его в шаблоне: <StaticResource ResourceKey="imgLinks"/>