ImageList, TreeView and ListView Controls

1. An ImageList control is useful for storing multiple images
   1. Many controls like the TreeView, ListView, and ToolStrip use an ImageList
   2. An ImageList by itself doesn't display anything on the screen
   3. Use a PictureBox to display an image on the screen
   4. Loading images from file

      // Loading image from disk
      imageList1.Images.Add(Bitmap.FromFile(@"c:\happy1.png"));
      imageList1.Images.Add(Bitmap.FromFile(@"c:\happy2.png"));
      

   5. Links to images: happy1.png, happy2.png, happy3.png, happy4.png, happy5.png
   6. Loading image resources
      1. Add PNG, BMP, or JPG images to a folder called Images in your project
      2. Set the Build Action for each image to Embedded Resource which causes the images to be placed into the executable when the project
      3. Load the resources at run-time

         // Loading images happy1.png, happy2.png, ... happy5.png
         for (int i = 1; i <= 5; i++)
             imageList1.Images.Add(new Bitmap(GetType(), "Images.happy" + i + ".png"));
         

2. The TreeView control is useful for showing hierarchical data
   1. Nodes can be added at design-time by modifying the Nodes collection
   2. Use Add method to add a TreeNode at run-time

      treeView1.Nodes.Add("A");
      treeView1.Nodes.Add("B", "B");    // Give key
      treeView1.Nodes["B"].Nodes.Add("B1");
      treeView1.Nodes["B"].Nodes.Add("B2");
      treeView1.Nodes["B"].ExpandAll();
      treeView1.Nodes.Add(new TreeNode("C"));
      

      
   3. Delete nodes

      // Remove A
      treeView1.Nodes.RemoveAt(0);
      
      // Remove B and all its children
      treeView1.Nodes["B"].Remove();
      
      // or 
      treeView1.Nodes.RemoveByKey("B");
      

   4. Using an ImageList

      // ImageList from above
      treeView1.ImageList = imageList1;
      
      treeView1.Nodes.Add("A");        // Uses default image (first from image list)
      treeView1.Nodes.Add("B", "B");   // Uses default image
      treeView1.Nodes["B"].Nodes.Add("B1", "B1", 3);       // Use image 3 when not selected
      treeView1.Nodes["B"].Nodes.Add("B2", "B2", 4, 4);    // Use image 4 when selected and not
      treeView1.Nodes["B"].ExpandAll();
      treeView1.Nodes.Add(new TreeNode("C", 2, 1));        // Use image 2 when not selected, 1 when selected
      

      
   5. Use Tag to attach extra info to each node

      treeView1.Nodes.Add("A");
      treeView1.Nodes[0].Tag = "First Node";
      
      // Use object initializer to specify tag
      TreeNode node = new TreeNode("C", 2, 1) { Tag = "Last Node" };
      treeView1.Nodes.Add(node);
      

   6. AfterSelect triggered when the currently selected node is changed (clicking on it or using the arrow keys)

      private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)
      {
      	Console.WriteLine("You selected " + treeView1.SelectedNode.Text);
      	Console.WriteLine("Tag = " + treeView1.SelectedNode.Tag);
      }
      

3. ListView control for displaying a collection of items in four different views
   1. Windows Explorer is an example of how a list view works
   2. Drop a ListView onto your form
   3. Put some ListViewItems into the list view

      // Create three items with sets of subitems for each item
      
      ListViewItem item1 = new ListViewItem("item1", 0);   // Text and image index
      item1.SubItems.Add("1");   // Column 2
      item1.SubItems.Add("2");   // Column 3
      item1.SubItems.Add("3");   // Column 4
      
      ListViewItem item2 = new ListViewItem("item2", 1);
      item2.SubItems.Add("4");
      item2.SubItems.Add("5");
      item2.SubItems.Add("6");
      
      ListViewItem item3 = new ListViewItem("item3", 2);
      item3.SubItems.Add("7");
      item3.SubItems.Add("8");
      item3.SubItems.Add("9");
      
      // Create columns (Width of -2 indicates auto-size)
      listView1.Columns.Add("Column 1", -2, HorizontalAlignment.Left);
      listView1.Columns.Add("Column 2", -2, HorizontalAlignment.Left);
      listView1.Columns.Add("Column 3", 40, HorizontalAlignment.Right);
      listView1.Columns.Add("Column 4", 40, HorizontalAlignment.Center);
      
      // Add the items to the list view
      listView1.Items.AddRange(new ListViewItem[] { item1, item2, item3 });
      
      // Show default view
      listView1.View = View.Details;
      

      
   4. Note that the list view doesn't produce any images until the list view has an associated small and large image list
   5. Add small and large icons via ImageLists

      // Create two ImageLists
      ImageList imageListSmall = new ImageList();
      ImageList imageListLarge = new ImageList();
      
      // Set to a larger size since default is 16 x 16
      imageListLarge.ImageSize = new Size(32, 32);
      
      // Load happy1.png, happy2.png, etc. resources
      for (int i = 1; i <= 5; i++)
      {
      	imageListSmall.Images.Add(new Bitmap(GetType(), "Images.happy" + i + ".png"));
      	imageListLarge.Images.Add(new Bitmap(GetType(), "Images.happy" + i + ".png"));
      }
      
      // Assign the ImageLists to the ListView
      listView1.LargeImageList = imageListLarge;
      listView1.SmallImageList = imageListSmall;
      

      
   6. Show different views
      1. Small icons view

         listView1.View = View.SmallIcon;
         

         
      2. Large icons view

         listView1.View = View.LargeIcon;
         

         
      3. List view

         listView1.View = View.List;
         

         
      4. Tile view

         listView1.View = View.Tile;