How to Add Icons to a ListView
- Written by June Blender
- Last Updated: 01 February 2017
- Created: 19 January 2017
- Hits: 20093
In my example, I wanted to use icons to indicate that I had an installed version of the module. And, I wanted the color of the icon to indicate whether the version that I installed was the latest version.
For example, the PinnedItem module is not installed, so it shouldn't have an icon. The platyPS module is installed, but I don't have the latest version (sorry Sergei!), so it should have a different color icon than the Pinvoke module, which is up to date.
Let's do it!
Step 1: Add an ImageList
In PowerShell Studio, from the Toolbox pane, select an ImageList control. PowerShell Studio places the icon that represents the control under the ListView.
To rename the ImageList, right-click and click Rename. I renamed mine from imageList1 to imageListIcons.
Step 2: Add images to the ImageList
Next, we'll add images to the ImageList. You can add images in your script, but because the images are saved as bitmaps, it's easier to do in the Properties pane.
- Click the ImageList icon and, in the Properties pane, on the Images row, click the ellipsis (...).
- In the Image Collection Editor, click Add.
- Select the image files on disk. I used very small (3KB and 13KB) PNG files.
This creates an image collection. The collection is indexed beginning with 0. You'll use the image index to select the image from the collection.
Step 3: Associate the ImageList with the ListView
To associate the ImageList with the ListView
- Click the ListView and, in the Properties pane, check the value of the View property. (Check your script, too. The View property value might be changed in the script.)
- If the View property value is LargeIcon, set the value of the LargeImageList property to the name of the ImageList, such as imageListIcons. For any other value of the View property, set the value of the SmallImageList property to the name of the ImageList, such as imageListIcons.
Of course, you can do this in your script instead. For example:
$listView1.View = 'Details'
$listView1.SmallImageList = $imageListIcons
Step 4: Select the images
The ListView now has a ImageList that contains a collection of images. You can refer to the images by their index.
In this example, the index of the green checkmark is 0 and the index of the yellow check mark is 1.
Here's the script that assigns the value of the image index based on the version numbers of the modules.
if ($GalleryModule.Version -eq $InstalledModule.Version)
# If same version, green checkmark
$listViewItem.ImageIndex = 0
# If different version, yellow checkmark
$listViewItem.ImageIndex = 1
And, here's the result.
Add-ListViewItem makes it easy
When you add a ListView to a form, PowerShell Studio adds the Add-ListViewItem helper function to your script.
Add-ListViewItem has an ImageIndex parameter that takes the index of an image in a collection.
Add-ListViewItem -ListView $listview1 -Items Test -ImageIndex 0
Adding icons is one of those tasks that's easy once you know how to do it, but tough when you don't. For your first app, try something simple and get to know the process. Then, when you need to do something more complex, you'll be ready.
One more time:
- Add an ImageList control
- Add images to the ImageList
- Associate the ImageList with the ListView
- Set each item's ImageIndex to the index of an image in the ImageList
Give it a try!