Introduction

Drop down lists are great for selecting from a list of items.  However, a plain text list can be difficult to read if there are a lot of items.  Icons help to make a list easier to read, however the standard ComboBox control does not support images.

OwnerDraw

As with the ListView control that I customised here, the ComboBox can also be modified.

My new control supports not only adding icons, but also indenting and disabling specific items.

The first image shows multicoloured icons with randomly applied indenting.  Indents can be any value you require.  Only 0 and 1 are shown here.  The second image shows all green icons, however items 3 and 4 are “disabled”.  Notice that the icons and text appear greyed out.

The Code

As with the ListView control, a few more lines of code are required…

ComboBox Definition

# Define ComboBox control
$cmoComboBox                       = New-Object 'System.Windows.Forms.ComboBox'

# Add OwnerDraw code
$cmoComboBox.ItemHeight            = '22'
$cmoComboBox.DrawMode              = 'OwnerDrawFixed'
$cmoComboBox.Add_DrawItem($ComboIcons_OnDrawItem)
$cmoComboBox.Add_SelectedIndexChanged($ComboIcons_SelectedIndexChanged)

# Set ComboBox properties
$cmoComboBox.Location              = ' 12,  65'
$cmoComboBox.Size                  = '370,  35'
$cmoComboBox.Font                  = $sysFont
$cmoComboBox.DropDownStyle         = 'DropDownList'

# Add control to the main form
$MainFORM.Controls.Add($cmoComboBox)

OwnerDraw Code

# Required Bits
[int]$script:ComboIcons_SelectedItem = 0               # Keeps track of the currently selected item
[System.Collections.ArrayList]$IconComboItems = @{}    # Holds all the custom items for the ComboxBox
Function New-IconComboItem { Return ( New-Object -TypeName PSObject -Property @{'Icon' = ''; 'Name' = ''; 'Text' = ''; 'Indent' = '0'; 'Enabled' = $True; } ) }

# Used to "disable" an image (turn it into a greyscale image of itself)
Function GreyScaleImage ([System.Drawing.Image]$Image)
{
    If ([string]::IsNullOrEmpty($Image) -eq $True) { Return $Image }
    [System.Drawing.Image]                  $newImage  = New-Object 'System.Drawing.Bitmap'($Image.Width, $Image.Height)
    [System.Drawing.Graphics]               $graphics  = [System.Drawing.Graphics]::FromImage($newImage)
    [System.Drawing.Imaging.ColorMatrix]    $matrix    = New-Object 'System.Drawing.Imaging.ColorMatrix'
    [System.Drawing.Imaging.ImageAttributes]$imgAttrib = New-Object 'System.Drawing.Imaging.ImageAttributes'
    $matrix.Matrix00 = '0.0'; $matrix.Matrix10 = '1.0'; $matrix.Matrix11 = '1.0'; $matrix.Matrix12 = '1.0'; $matrix.Matrix22 = '0.0'; $matrix.Matrix33 = '0.5'
    $imgAttrib.SetColorMatrix($matrix, [System.Drawing.Imaging.ColorMatrixFlag]::Default, [System.Drawing.Imaging.ColorAdjustType]::Bitmap)
    $graphics.DrawImage($Image, (New-Object 'System.Drawing.Rectangle'(0, 0, $Image.Width, $Image.Height)), 0, 0, $newImage.Width, $newImage.Height, [System.Drawing.GraphicsUnit]::Pixel, $imgAttrib)
    $graphics.Dispose()
    Return $newImage
}

# Custom draws each cmoComboBox item
$ComboIcons_OnDrawItem = {
    [System.Windows.Forms.DrawItemEventArgs]$e = $_
    $e.DrawBackground()
    $e.DrawFocusRectangle()

    [System.Drawing.Rectangle]$bounds = $e.Bounds    
    If (($e.Index -gt -1) -and ($e.Index -lt $IconComboItems.Count))
    {
        $currItem = $IconComboItems[$e.Index]

        [int]                      $indent     = ($currItem.Indent * 14) 
        [System.Drawing.Image]     $icon       = $imgResult.Images[$currItem.Icon]
        [System.Drawing.SolidBrush]$solidBrush = [System.Drawing.SolidBrush]$e.ForeColor

        If ($currItem.Enabled -eq $False) {
            $icon = (GreyScaleImage -Image $icon)
            $solidBrush.Color = [System.Drawing.SystemColors]::GrayText
         }

        $iconRect = New-Object 'System.Drawing.RectangleF'((($bounds.Left) + 5 + $indent), (($bounds.Top) + 2), 16, 16)
        $textRect = New-Object 'System.Drawing.RectangleF'((($bounds.Left) + ($iconRect.Width) + 9 + $indent), $bounds.Top, (($bounds.Width) - ($iconRect.Width) - 9 - $indent), $bounds.Height)
        $format   = New-Object 'System.Drawing.StringFormat'
        $format.Alignment     = [System.Drawing.StringAlignment]::Near
        $format.LineAlignment = [System.Drawing.StringAlignment]::Center

        If ($icon -ne $null) { $e.Graphics.DrawImage($icon, $iconRect) }
        $e.Graphics.DrawString($currItem.Text, $e.Font, $solidBrush, $textRect, $format)
    }
}

# Get the currently selected item (but only if not disabled)
$ComboIcons_SelectedIndexChanged = {
    If ($cmoComboBox.SelectedIndex -lt 0) { Return }
    If ($cmoComboBox.SelectedIndex -lt $IconComboItems.Count)
    {
        If ($IconComboItems[$cmoComboBox.SelectedIndex].Enabled -eq $false) { $cmoComboBox.SelectedIndex = $script:ComboIcons_SelectedItem }
        Else                                                             { $script:ComboIcons_SelectedItem = $cmoComboBox.SelectedIndex }
    }
    $lbl_Description.Text = $($IconComboItems[$script:ComboIcons_SelectedItem])
}

ComboxBox List Items

There is a little more to adding items to the ComboBox list however.  You need to create a new object, populate it your required values, then add that to the $IconComboItems array.  Once you have created all your items, add them to the ComboBox control

Single Item Example

# Define new custom ComboBox item
$newItem         = New-IconComboItem
$newItem.Name    = 'item01'
$newItem.Text    = 'This is Item 01'
$newItem.Icon    = 0
$newItem.Indent  = 0
$newItem.Enabled = $True

# Add the new item to the array of items
[void]$IconComboItems.Add($newItem)

# Repeat the above until you have added all the items you need

# Add the array of items to the ComboBox itself
[void]$cmoComboBox.Items.AddRange($IconComboItems)
$cmoComboBox.SelectedIndex = 0

Coloured Folder Example (Screen Shot 1)

[string[]]$colors = @('Black', 'Blue', 'Cyan', 'Green', 'Grey', 'Orange', 'Pink', 'Red', 'White', 'Yellow')
0..9 | ForEach-Object -Process {
    $tmp = New-IconComboItem
    $tmp.Name = "Item$_"
    $tmp.Text = $colors[$_]
    $tmp.Icon = $_
    If ($_ -gt 0) { $tmp.Indent = (Get-Random -Maximum 2 -Minimum 0) }

    [void]$IconComboItems.Add($tmp)
    $tmp = $null
}

[void]$cmoComboBox.Items.AddRange($IconComboItems)
$cmoComboBox.SelectedIndex = 0

Conclusion

Obviously there is a lot of code missing that is used in the screen shots, but the important part is there in order to get you up and running.  Have a play, and let me know what you think in the comments below.

A full demo can be found on my GitHub

Introduction

I am writing a small PowerShell tool that will perform a few checks against several virtual machines in vCenter.  I wanted to show the results in a nice grid view.  The ListView control is the easy choice for this.

Basic Grid

This picture below shows the basic layout that I started with (with random dummy data), and as you can see it’s not great.

The ‘P’ass and ‘F’ail display could be better, icons would be great.  The problem is that the basic ListView does not support more than one icon in the grid – usually the first one next to the name.

There are some tweaks you can do to move the single icon about by changing columns, but it’s still just one icon.

OwnerDraw

With a lot of the Windows forms controls they support an OwnerDraw method.  This allows developers to hack around with controls and make them do things that they can’t normally do – like having more that one icon in a ListView, including its subitems.  🙂

Looks great doesn’t it.!

It works by replacing “P” or “F” in the top screenshot with “ICON|x” where “x” is the index number of the image you want to use.  For example, my ticks are in position 1, and the crosses are position 2.  Therefore “ICON|1” or “ICON|2” would be used.  My code has an additional option of displaying an icon and text in the same box.  To show this use “BOTH|x|text”

The Code

In order to change a standard ListView into an awsome ListView does not require a lot of code.

about 50 lines of additional code for the OwnerDraw part, and 3x lines in the middle of the ListView definition.

ListView Definition

# Define ListView Control
$lstList                      = New-Object 'System.Windows.Forms.ListView'

# Add OwnerDraw Code
$lstList.OwnerDraw            = $True
$lstList.Add_DrawSubItem($SubIcons_DrawSubItem)
$lstList.Add_DrawColumnHeader($SubIcons_DrawColumnHeader)

# Set ListView properties
$lstList.Location             = ' 43,  12'
$lstList.Size                 = '589, 208'
$lstList.LabelEdit            = $True
$lstList.FullRowSelect        = $True
$lstList.GridLines            = $True
$lstList.HideSelection        = $True
$lstList.HeaderStyle          = 'Nonclickable'
$lstList.SmallImageList       = $imgResult
$lstList.Sorting              = 'Ascending'
$lstList.View                 = 'Details'

# Add first two columns
$lstList_CH_1                 = New-Object 'System.Windows.Forms.ColumnHeader'
$lstList_CH_2                 = New-Object 'System.Windows.Forms.ColumnHeader'
$lstList_CH_1.Text            = 'Virtual Machine Name'
$lstList_CH_2.Text            = 'Status'
$lstList_CH_1.Width           = 244
$lstList_CH_2.Width           = 100
$lstList_CH_2.TextAlign       = 'Center'
$lstList.Columns.Add($lstList_CH_1) | Out-Null
$lstList.Columns.Add($lstList_CH_2) | Out-Null

# Add 'results' columns
For ($i=0; $i -le 7; $i++)
{
    $newCH           = New-Object 'System.Windows.Forms.ColumnHeader'
    $newCH.Text      = 'RESULTS'.Substring($i, 1)
    $newCH.Width     = 32
    $newCH.TextAlign = 'Center'
    $lstList.Columns.Add($newCH) | Out-Null
}

# Add control to the main form
$MainFORM.Controls.Add($lstList)

Most of this code you should already know if you write PowerShell Forms.  Lines 05,06 and 07 are the new ones that you need for the OwnerDraw parts.

OwnerDraw Code

This next code block has two functions, they are explained below.

$SubIcons_DrawColumnHeader = {
    [System.Windows.Forms.DrawListViewColumnHeaderEventArgs]$e = $_
    $e.DrawDefault = $True
    $e.DrawBackground()
    $e.DrawText()
}

$SubIcons_DrawSubItem = {
    [System.Windows.Forms.DrawListViewSubItemEventArgs]$e = $_

    If ($e.SubItem.Text.Length -le 5) { $e.DrawDefault = $True }
    Else
    {
        If ($e.SubItem.Text.Contains('|') -eq $True)
        {
            [System.Drawing.Image]$icon = ($imgResult.Images[$e.SubItem.Text.Split('|')[1] -as [int]])
            [int]$xPos = ($e.SubItem.Bounds.X + (($e.SubItem.Bounds.Width  / 2) -as [int]) - (($icon.Width  /2) -as [int]))
            [int]$yPos = ($e.SubItem.Bounds.Y + (($e.SubItem.Bounds.Height / 2) -as [int]) - (($icon.Height /2) -as [int]))
        }

        Switch ($e.SubItem.Text.Substring(0,5).ToUpper())
        {
            'ICON|'
            {
                $r = New-Object 'System.Drawing.Rectangle'($xPos, $yPos, $icon.Width, $icon.Height)

                $e.DrawDefault = $false
                $e.Graphics.DrawImage($icon, $r)
            }

            'BOTH|'
            {
                [int]$fPos = ((($e.SubItem.Bounds.Height - $sysFont.Height) / 2) -as [int])
                $fColor    = New-Object 'System.Drawing.SolidBrush'($e.SubItem.ForeColor)

                $rI = New-Object 'System.Drawing.Rectangle'($($e.SubItem.Bounds.X + 3), $yPos, $icon.Width, $icon.Height)
                $rS = New-Object 'System.Drawing.PointF'   ($($e.SubItem.Bounds.X + 5 + $icon.Width), $($e.SubItem.Bounds.Y + $fPos))

                $e.DrawDefault = $false
                $e.Graphics.DrawImage($icon, $rI)
                $e.Graphics.DrawString($e.SubItem.Text.Split('|')[2], $sysFont, $fColor, $rS)
            }

            Default { $e.DrawDefault = $True }
        }
    }
}

The first SubIcons_DrawColumnHeader can largely be ignored.  It’s needed to draw the default column headers.

The second is the main worker.  It turns the text “ICON|x” into the image to be used, and displays it centred in the subitem window.  It also displays “BOTH|x|text” with the icon on the left with the text left-aligned next to it.

Conclusion

Obviously there is a lot of code missing that is used in the screen shots, but the important part is there in order to get you up and running.  Have a play, and let me know what you think in the comments below.

A full demo can be found on my GitHub