在WPF树视图中添加图标

• 下载源代码 - 395.87 KB

引言

通过本文，我想介绍如何在WPF树形视图节点中添加图像。在Windows Forms树形视图中提供图标功能并不复杂。但在WPF中，没有直接支持在树形视图节点中添加图像。

背景

正如我上面提到的，在Windows Forms树形视图中，添加图标的过程非常相似。TreeView控件提供了ImageList属性。可以将自定义的图像列表直接附加到此属性。以下是我从MSDN博客中的一篇博文中获取的一个小代码示例：

//Create a Root Node for TreeView 
treeView.Nodes.Add("RootNode"); 
//Create Child Nodes for TreeView 
TreeNode rootNode = treeView.Nodes[0]; 
rootNode.Nodes.Add("A"); 
rootNode.Nodes.Add("A"); 
rootNode.Nodes.Add("A"); 
rootNode.Nodes.Add("A"); 
rootNode.ExpandAll(); 
//Create an Imagelist 
ImageList imageList = CreateImageList(); 
//Add the ImageList to TreeView 
treeView.ImageList = imageList; 
//Set the Starting Image Index 
treeView.ImageIndex = 1; 

Using the Code

让我们创建一个新的自定义类（例如TreeViewWithIcons），它继承自TreeViewItem。这个类为我们提供了添加图标/图像以及设置节点文本的属性。

SelectedImage属性允许用户将图像附加到节点，而HeaderText属性允许我们设置节点的文本。

/// <summary>
/// This Class Provides the TreeView with extended functionalities like,
/// Adding the HeaderText feature to Node, Setting the icon for TreeViewNode.
/// </summary>

    public class TreeViewWithIcons : TreeViewItem
    {
    #region Global variables
    ImageSource iconSource;
    TextBlock textBlock;
        Image icon;
    #endregion Global variables

    #region Constructors and Destructors
    public TreeViewWithIcons()
        {
            StackPanel stack = new StackPanel();
            stack.Orientation = Orientation.Horizontal;
            Header = stack;
            //Uncomment this code If you want to add an Image after the Node-HeaderText
            //textBlock = new TextBlock();
            //textBlock.VerticalAlignment = VerticalAlignment.Center;
            //stack.Children.Add(textBlock);
            icon = new Image();
            icon.VerticalAlignment = VerticalAlignment.Center;
            icon.Margin = new Thickness(0, 0, 4, 0);
            icon.Source = iconSource;
            stack.Children.Add(icon);
            //Add the HeaderText After Adding the icon
            textBlock = new TextBlock();
            textBlock.VerticalAlignment = VerticalAlignment.Center;
            stack.Children.Add(textBlock);
        }
        #endregion Constructors and Destructors
        #region Properties
        /// <summary>
        /// Gets/Sets the Selected Image for a TreeViewNode
        /// </summary>
        public ImageSource Icon
        {
            set
            {
                iconSource = value;
                icon.Source = iconSource;
            }
            get
            {
                return iconSource;
            }
        }
        #endregion Properties
        #region Event Handlers
        /// <summary>
    /// Event Handler on UnSelected Event
    /// </summary>
    /// <param name="args">Eventargs</param>
    protected override void OnUnselected(RoutedEventArgs args)
    {
        base.OnUnselected(args);
        icon.Source = iconSource;
    }
    /// <summary>
    /// Event Handler on Selected Event 
        /// </summary>
        /// <param name="args">Eventargs</param>
        protected override void OnSelected(RoutedEventArgs args)
        {
        base.OnSelected(args);
        icon.Source = iconSource;
        }

        /// <summary>
        /// Gets/Sets the HeaderText of TreeViewWithIcons
        /// </summary>
        public string HeaderText
        {
            set
            {
                textBlock.Text = value;
            }
            get
            {
                return textBlock.Text;
            }
        }
        #endregion Event Handlers
    }

如何使用自定义类

一旦你获得了这个类，事情就变得非常简单。只需创建我们TreeViewWithIcons类的一个实例，并设置HeaderText和SelectedImage属性。将此节点附加到主TreeView。就完成了……

TreeViewWithIcons node = new TreeViewWithIcons(); 
node.HeaderText = "Root Node"; 
node.Icon = CreateImage(Directory.GetCurrentDirectory() + \\Workflow.ico); 
TreeViewWithIcons node1 = new TreeViewWithIcons(); 
node1.HeaderText = "Child Node"; 
node1.Icon = CreateImage(Directory.GetCurrentDirectory() + \\ArrowRight-Green.ico); 
tv.Items.Add(node); 
node.Items.Add(node1); 

注意：为了更好地理解，已附带一个示例应用程序。

历史

• 2008年4月22日：初始发布