A A A
Prev | Next

PictureBox, ImageList, TreeView and ListView Controls

A PictureBox control displays a single image
1. Can display graphics from a bitmap, metafile, icon, JPEG, GIF, or PNG file
2. Image property holds image to display
```
// Loading image from disk
byte[] bytes = System.IO.File.ReadAllBytes(filename);
myPictureBox.Image = Image.FromStream(new MemoryStream(bytes));
```
3. Width and Height properties indicate PictureBox's size
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"));
}
```

The TreeView control is useful for showing hierarchical data

The TreeView property Nodes is a collection of TreeNode objects
Each TreeNode has a Nodes collection for storing children

Nodes can be added at design-time with the Property Editor or at run-time with the Add() method

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"));

Delete nodes

// Remove A
treeView1.Nodes.RemoveAt(0);

// Remove B and all its children
treeView1.Nodes["B"].Remove();

// or 
treeView1.Nodes.RemoveByKey("B");

// Delete all 
treeView1.Nodes.Clear();

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

Use TreeNode Tag property 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);

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

private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)
{
   // Send to debug Output window
	Debug.WriteLine("You selected " + treeView1.SelectedNode.Text);
	Debug.WriteLine("Tag = " + treeView1.SelectedNode.Tag);
}

ListView control for displaying a collection of items in four different views

Windows Explorer is an example of how a list view works
Drop a ListView onto your form
ListView's Items property is a collection of ListViewItem objects

Each ListViewItem's SubItems property is a collection that holds the data displayed in each column

// 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;

Note that the list view doesn't produce any images until the list view has an associated small and large image list
1. ImageList's ImageSize property indicates size of images (default is 16 x 16)
2. ListView's SmallImageList property references ImageList with 16 x 16 pixel images
3. ListView's LargeImageList property references ImageList with up to 256 x 256 pixel images
4. ListView's View property indicates if small images (View.SmallIcon, View.List) or large images (View.LargeIcon, View.Tile) are displayed

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;

// Assign each ListView item's image
for (int i = 0; i < listView1.Items.Count; i++)
{
	listView1.Items[i].ImageIndex = i;
}

Show different views

Small icons view
```
listView1.View = View.SmallIcon;
```
Large icons view
```
listView1.View = View.LargeIcon;
```
List view
```
listView1.View = View.List;
```
Tile view
```
listView1.View = View.Tile;
```

Selecting (activating) items
1. The ItemActivate event is triggered when an item is activated
```
private void myListView_ItemActivate(object sender, EventArgs e)
{
	foreach (ListViewItem item in myListView.SelectedItems)
	{
		MessageBox.Show(item.Text);
	}
}
```
2. Set MultiSelect property to false so user can only activate one item at a time
3. Set Activation property to Standard so double-clicking activates the item