动态更改树视图项的图像答案

【问题标题】：dynamically changing images for treeviewitems动态更改树视图项的图像
【发布时间】：2013-05-28 14:15:26
【问题描述】：

我无法为树视图项动态添加图像。

TreeViewItem tvi = new TreeViewItem { Header = ni.name, Uid = itemName, Background = color};

这是我的 xaml

<TreeView.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="2" Source="/Citi.Shade;component/Control/Images/folder1.jpg"/>
                                                <TextBlock Margin="2" Text="{Binding}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>

我看到添加到所有项目的图像，但如果我想根据项目是文件夹还是文件在 2 个图像之间动态决定，我不确定该怎么做。我不确定如何将它添加到我正在创建的 TreeViewItem 的标题中。在添加treeviewitem之前以编程方式为标题创建stackpanel模板，因为我发布的这个问题没有帮助。 Treeviewitem with images programmatically

【问题讨论】：

标签： .net wpf treeview

【解决方案1】：

使用绑定应该很容易。下面我分享了我创建的示例代码。

XAML：

<TreeView Name="treeView">
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding SubElements}">
            <StackPanel Orientation="Horizontal">
                <Image Margin="2" Source="{Binding ImageLocation}" Height="30" Width="30"/>
                <TextBlock Margin="2" Text="{Binding HeaderText}" Background="{Binding BackgroundColor}"></TextBlock>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

代码隐藏：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<TreeViewElement> elements = new List<TreeViewElement>();
            TreeViewElement mainElement = new TreeViewElement() { ImageLocation = "Images/1.png", HeaderText = "MainElement1" };
            mainElement.SubElements = new List<TreeViewElement>();
            mainElement.SubElements.Add(new TreeViewElement() { ImageLocation = "Images/2.png", HeaderText = "SubElement1" });
            mainElement.SubElements.Add(new TreeViewElement() { ImageLocation = "Images/2.png", HeaderText = "SubElement2", BackgroundColor = "Blue" });
            elements.Add(mainElement);
            TreeViewElement mainElement2 = new TreeViewElement() {  HeaderText = "MainElement2" };
            elements.Add(mainElement2);
            this.treeView.ItemsSource = elements;
        }
    }

    public class TreeViewElement
    {
        public string ImageLocation { get; set; }
        public string HeaderText { get; set; }
        public string BackgroundColor { get; set; }
        public List<TreeViewElement> SubElements { get; set; }
    }
}

以下文章应该可以帮助您了解绑定和TreeView 控件。

http://www.codeproject.com/Articles/26288/Simplifying-the-WPF-TreeView-by-Using-the-ViewMode

http://www.codeproject.com/Articles/390514/Playing-with-a-MVVM-Tabbed-TreeView-for-a-File-Exp

【讨论】：

非常感谢您的帮助

【解决方案2】：

我想通了。我不得不将 TreeViewItem 创建更改为：

TreeViewItem tvi = new TreeViewItem
{
    Header = new TreeItem() {
                                iName = ni.name,
                                iImage = img
                            },
            Uid = itemName,
            Background = color
};

TreeItem 是一个自定义类，我创建的看起来像这样：

public class TreeItem
{
    public string iName
    {
        get; 
        set;
    }

    public string iImage
    {
        get;
        set;
    }
  }

各自的XAML 绑定将是：

<TreeView.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=iImage}"/>
                        <TextBlock VerticalAlignment="Center" Text="{Binding Path=iName}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>

【讨论】：