TreeView CodeSample - Placing Images on nodes from an ImageList

From Visual WebGui Wiki
Jump to: navigation, search
VWG 64+ The content of this article is valid for version 6.4 and later, including v7.x;
Code sample projects are written in Visual Studio 2012 for v7.x, unless otherwise noted

Contents

Overview

This codesample shows how you place different Image, SelectedImage and ExpandedImage on TreeNodes in a TreeView

The codesample also assumes that you have those three used images in your Resources\Icons folder within your application's folder.


VB.NET Code

Imports Gizmox.WebGUI.Forms
Public Class UsingImageList
    Friend WithEvents TreeVault As Gizmox.WebGUI.Forms.TreeView
    Friend WithEvents Button1 As Gizmox.WebGUI.Forms.Button
 
    Sub New()
 
        ' This call is required by the Windows Form Designer.
        InitializeComponent()
 
        ' Add any initialization after the InitializeComponent() call.
    End Sub
 
    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
        TestImages()
    End Sub
 
    Private Sub InitializeComponent()
        Me.SuspendLayout()
 
        Dim ImageList1 As Gizmox.WebGUI.Forms.ImageList = New Gizmox.WebGUI.Forms.ImageList
        Dim IconResourceHandle1 As Gizmox.WebGUI.Common.Resources.IconResourceHandle = New Gizmox.WebGUI.Common.Resources.IconResourceHandle
        Dim IconResourceHandle2 As Gizmox.WebGUI.Common.Resources.IconResourceHandle = New Gizmox.WebGUI.Common.Resources.IconResourceHandle
        Dim IconResourceHandle3 As Gizmox.WebGUI.Common.Resources.IconResourceHandle = New Gizmox.WebGUI.Common.Resources.IconResourceHandle
        Me.TreeVault = New Gizmox.WebGUI.Forms.TreeView
        Me.Button1 = New Gizmox.WebGUI.Forms.Button
        '
        'TreeVault
        '
        Me.TreeVault.ImageList = ImageList1
        Me.TreeVault.Location = New System.Drawing.Point(277, 110)
        Me.TreeVault.Name = "TreeVault"
        Me.TreeVault.Size = New System.Drawing.Size(372, 334)
        Me.TreeVault.TabIndex = 0
        '
        'Button1
        '
        Me.Button1.Location = New System.Drawing.Point(378, 37)
        Me.Button1.Name = "Button1"
        Me.Button1.Size = New System.Drawing.Size(75, 23)
        Me.Button1.TabIndex = 1
        Me.Button1.Text = "Button1"
        IconResourceHandle1.File = "Add.png"
        IconResourceHandle2.File = "Back.png"
        IconResourceHandle3.File = "delete.png"
        ImageList1.Images.AddRange(New Gizmox.WebGUI.Common.Resources.ResourceHandle() {IconResourceHandle1, IconResourceHandle2, IconResourceHandle3})
        ImageList1.ImageSize = New System.Drawing.Size(16, 16)
        ImageList1.Images.SetKeyName(0, "Add.png")
        ImageList1.Images.SetKeyName(1, "Back.png")
        ImageList1.Images.SetKeyName(2, "delete.png")
        '
        'UsingImageList
        '
        Me.Controls.Add(Me.Button1)
        Me.Controls.Add(Me.TreeVault)
        Me.Size = New System.Drawing.Size(698, 490)
        Me.Text = "UsingImageList"
        Me.ResumeLayout(False)
    End Sub
 
    Private Sub TestImages()
        Dim tn As New TreeNode("My Documents")
        TreeVault.Nodes.Add(tn)
 
        tn.ImageIndex = 0
        tn.SelectedImageIndex = 1
        tn.ExpandedImageIndex = 2
 
        tn.NodeFont = New Drawing.Font("Tahoma", 9)
 
 
        For i As Integer = 1 To 3
            Dim tnn As New TreeNode("Folder #" & i)
            tnn.NodeFont = New Drawing.Font("Tahoma", 9)
            tnn.ImageIndex = 0
            tnn.SelectedImageIndex = 1
            tnn.ExpandedImageIndex = 2
 
            tn.Nodes.Add(tnn)
            tnn.Collapse()
 
            For j As Integer = 1 To 3
                Dim tnnn As New TreeNode("Subfolder #" & j)
                tnnn.ImageIndex = 0
                tnnn.NodeFont = New Drawing.Font("Tahoma", 9)
                tnnn.ImageIndex = 0
                tnnn.SelectedImageIndex = 1
                tnnn.ExpandedImageIndex = 2
                tnn.Nodes.Add(tnnn)
            Next
        Next
    End Sub
 
End Class


C# Code

#region Visual WebGui Form Designer generated code
 
/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
    this.components = new System.ComponentModel.Container();
    System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Form1));
    this.TreeVault = new Gizmox.WebGUI.Forms.TreeView();
    this.imageList1 = new Gizmox.WebGUI.Forms.ImageList(this.components);
    this.button1 = new Gizmox.WebGUI.Forms.Button();
    this.SuspendLayout();
    // 
    // TreeVault
    // 
    this.TreeVault.ImageList = this.imageList1;
    this.TreeVault.Location = new System.Drawing.Point(29, 22);
    this.TreeVault.Name = "TreeVault";
    this.TreeVault.Size = new System.Drawing.Size(372, 334);
    this.TreeVault.TabIndex = 0;
    // 
    // imageList1
    // 
    this.imageList1.Images.AddRange(new Gizmox.WebGUI.Common.Resources.ResourceHandle[] {
    new Gizmox.WebGUI.Common.Resources.ImageResourceHandle(resources.GetString("imageList1.Images")),
    new Gizmox.WebGUI.Common.Resources.ImageResourceHandle(resources.GetString("imageList1.Images1")),
    new Gizmox.WebGUI.Common.Resources.ImageResourceHandle(resources.GetString("imageList1.Images2"))});
    this.imageList1.ImageSize = new System.Drawing.Size(16, 16);
    this.imageList1.Images.SetKeyName(0, "blue.jpg");
    this.imageList1.Images.SetKeyName(1, "green.jpg");
    this.imageList1.Images.SetKeyName(2, "rose.jpg");
    // 
    // button1
    // 
    this.button1.Location = new System.Drawing.Point(423, 182);
    this.button1.Name = "button1";
    this.button1.Size = new System.Drawing.Size(75, 23);
    this.button1.TabIndex = 1;
    this.button1.Text = "Test images";
    this.button1.Click += new System.EventHandler(this.button1_Click);
    // 
    // Form1
    // 
    this.Controls.Add(this.button1);
    this.Controls.Add(this.TreeVault);
    this.FormBorderStyle = Gizmox.WebGUI.Forms.FormBorderStyle.Sizable;
    this.Size = new System.Drawing.Size(533, 418);
    this.Text = "Form1";
    this.ResumeLayout(false);
 
}
 
#endregion
 
private Gizmox.WebGUI.Forms.TreeView TreeVault;
private Gizmox.WebGUI.Forms.Button button1;
private Gizmox.WebGUI.Forms.ImageList imageList1;
private void TestImages()
{
    TreeNode tn = new TreeNode("My Documents");
    TreeVault.Nodes.Add(tn);
 
    tn.ImageIndex = 0;
    tn.SelectedImageIndex = 1;
    tn.ExpandedImageIndex = 2;
 
    tn.NodeFont = new System.Drawing.Font("Tahoma", 9);
 
 
    for (int i = 1; i <= 3; i++)
    {
        TreeNode tnn = new TreeNode("Folder #" + i);
        tnn.NodeFont = new System.Drawing.Font("Tahoma", 9);
        tnn.ImageIndex = 0;
        tnn.SelectedImageIndex = 1;
        tnn.ExpandedImageIndex = 2;
 
        tn.Nodes.Add(tnn);
        tnn.Collapse();
 
        for (int j = 1; j <= 3; j++)
        {
            TreeNode tnnn = new TreeNode("Subfolder #" + j);
            tnnn.ImageIndex = 0;
            tnnn.NodeFont = new System.Drawing.Font("Tahoma", 9);
            tnnn.ImageIndex = 0;
            tnnn.SelectedImageIndex = 1;
            tnnn.ExpandedImageIndex = 2;
            tnn.Nodes.Add(tnnn);
        }
    }
}

Download

Down.gif Download CS and VB code for VS2012

SDK Version specifics

VWG 64 The following section is valid only for version 6.4;

Note that in version 6.4.0P3 and earlier 6.4 preview versions, only the Image and SelectedImage functionality is working correctly, while the ExpandedImage is non-operational. In versions prior to 6.4, only the Image is functional.