Checkboxes, overlay icons and state images in ListViews

[LarsJ]

Checkboxes
If LVS_EX_CHECKBOXES extended style is applied to a listview, two images are automatically added to the state image list: An unchecked checkbox (index 0) and a checked checkbox (index 1).

You can get a handle for the state image list with

$hStateImageList = _GUICtrlListView_GetImageList( $hListView, 2 ) ; 2 = Image list with state images

Then you can set the state image list as a normal small icon image list:

_GUICtrlListView_SetImageList( $hListView, $hStateImageList, 1 ) ; 1 = Image list with small icons

If you apply this code line to all listview items the result is two checkboxes in first column:

_GUICtrlListView_SetItemImage( $hListView, $iItem, 0 ) ; Unchecked checkbox (index 0) for $iItem

Use this code line to add subitem checkboxes (requires LVS_EX_SUBITEMIMAGES extended style) to fourth column:

_GUICtrlListView_SetItemImage( $hListView, $iItem, 0, 3 ) ; 3 is the zero based index of fourth column

Another consequence of LVS_EX_CHECKBOXES extended style is that the image is automatically switched between the unchecked and checked ckeckbox when you click the icon.

You have to implement this functionality yourself for the checkboxes added through the normal image list. This is easily done by responding to NM_CLICK events in a WM_NOTIFY message handler:

Case $NM_CLICK
  Local $aHit = _GUICtrlListView_SubItemHitTest( $hListView )
  If $aHit[6] Then                         ; On item?
    If $aHit[3] Then                       ; On icon?
      If $aHit[1] = 0 Or $aHit[1] = 3 Then ; On subitem 0 or 3?
        Local $iImage = _GUICtrlListView_GetItemImage( $hListView, $aHit[0], $aHit[1] )  ; Image index 0 or 1
        _GUICtrlListView_SetItemImage( $hListView, $aHit[0], $iImage ? 0 : 1, $aHit[1] ) ; Switch index value
      EndIf                                      ; $iItem    $iImage          $iSubItem
    EndIf
  EndIf

The above is demonstrated in example 1) Subitem checkboxes.au3.

If you don't want checkboxes for all of the listview items example 2) Remove some checkboxes.au3 shows how to remove some of the checkboxes. This is a picture of example 2:

In example 1 and 2 the selected and focused states are removed from the listview items.

Overlay icons
In this picture of example 3) Overlay icons.au3 you can see cyan, green and yellow overlay icons on top of the original item icons:

Overlay icons are stored in the small and large image lists. The function ImageList_SetOverlayImage implemented in GuiImageListEx.au3 tells the image list that this is a special image that is used as an overlay icon. Overlay icons must be stored among the first 15 images in the image list.

To apply an overlay icon to a listview item the one based image index of the overlay icon must be stored in bits 8 - 11 in the state member of the LVITEM structure. Because 4 bits are used to store the image index you can only use 15 overlay icons. If all 4 bits are zero, it means that there is no overlay icon.

Use these commands to add cyan, green and yellow overlay icons as the first three images in the image list:

_GUIImageList_AddIcon( $hImageList, "icons\Cyan.ico" )   ; Index 0
_GUIImageList_AddIcon( $hImageList, "icons\Green.ico" )  ; Index 1
_GUIImageList_AddIcon( $hImageList, "icons\Yellow.ico" ) ; Index 2

Tell the imagelist that this is overlay icons:

ImageList_SetOverlayImage( $hImageList, 0, 1 ) ; First overlay icon
ImageList_SetOverlayImage( $hImageList, 1, 2 ) ; Second overlay icon
ImageList_SetOverlayImage( $hImageList, 2, 3 ) ; Third overlay icon

Add overlay icons to listview items A, B, C (256 = 2^8 is the value of bit 8):

_GUICtrlListView_SetItemState( $hListView, $iItemA, 1 * 256 , $LVIS_OVERLAYMASK ) ; First overlay icon, cyan
_GUICtrlListView_SetItemState( $hListView, $iItemB, 2 * 256 , $LVIS_OVERLAYMASK ) ; Second overlay icon, green
_GUICtrlListView_SetItemState( $hListView, $iItemC, 3 * 256 , $LVIS_OVERLAYMASK ) ; Third overlay icon, yellow
_GUICtrlListView_SetItemState( $hListView, $iItemD, 0 * 256 , $LVIS_OVERLAYMASK ) ; Remove an overlay icon

State images
If you want to use your own custom state images eg. green, yellow and red images (to signal ok, warning and error) instead of checkboxes, apply the LVS_EX_CHECKBOXES extended style to the listview, get a handle to the state image list, delete the images of the unchecked (index 0) and checked (index 1) checkboxes and add the green, yellow and red images to the state image list.

Add custom state images to listview items A, B, C:

_GUICtrlListView_SetItemStateImage( $hListView, $iItemA, 1 ) ; First state image, green
_GUICtrlListView_SetItemStateImage( $hListView, $iItemB, 2 ) ; Second state image, yellow
_GUICtrlListView_SetItemStateImage( $hListView, $iItemC, 3 ) ; Third state image, red
_GUICtrlListView_SetItemStateImage( $hListView, $iItemD, 0 ) ; Remove a state image

If you click a green state image, the image switches to yellow. If you click a yellow state image, it switches to red. If you click a red state image, it switches to green again. No code is needed for the image switching. It's a consequence of the LVS_EX_CHECKBOXES extended style.

This is demonstrated in example 4) State images.au3.

CheckboxesAndIcons.7z

• icons\ - Overlay icons
• 1) Subitem checkboxes.au3
• 2) Remove some checkboxes.au3
• 3) Overlay icons.au3
• 4) State images.au3
• GuiImageListEx.au3
• GuiListViewEx.au3

You need AutoIt 3.3.10 or later. Tested on Windows 7 32/64 bit and Windows XP 32 bit.

Comments are welcome. Let me know if there are any issues.

(Set tab width = 2 in SciTE to line up comments by column.)

CheckboxesAndIcons.7z

Edited March 20, 2018 by LarsJ
New image links

[Bowmore]

Many thanks LarsJ. I've often struggled often getting it to work and never managed to get overlay icons to work. Your concise expanations and demos will be a big help the next time I need to use these. The sccreen shots are a great help with a topic such as this so we can see what the output should look like.

[Skysnake]

Brilliant!

Many thanks!

 

[LarsJ]

Bowmore and Skysnake, You are welcome.

Thank you for feedback.

[kklee69]

I have a question. I don’t know if I can ask questions here.

I see two checkboxes in your example

Assuming I have three ICOs, I hope they can be side by side

Is there a way to do it?

like THIS 

[LarsJ]

You cannot add 3 icons in a single listview cell with the techniques used here. But I'm pretty sure it's possible. One way is to use custom draw in the post paint stage and add the icons with GDI/GDI+ functions. Another way is to create an owner drawn listview and again add the icons with GDI/GDI+ functions. But none of the techniques are completely trivial. If you also want to click the icons one at a time, you'll need pretty much code.
 

A small advertisement: My next project will be published in this forum the first coming weekend (in four days). Don't miss the Examples forum this weekend.

[kklee69]

5 hours ago, LarsJ said:

You cannot add 3 icons in a single listview cell with the techniques used here. But I'm pretty sure it's possible. One way is to use custom draw in the post paint stage and add the icons with GDI/GDI+ functions. Another way is to create an owner drawn listview and again add the icons with GDI/GDI+ functions. But none of the techniques are completely trivial. If you also want to click the icons one at a time, you'll need pretty much code.
 

A small advertisement: My next project will be published in this forum the first coming weekend (in four days). Don't miss the Examples forum this weekend.

as I know, ICO is a square  Like 16*16

Is this possible,Put three ICOs into one ICO

Then put this ICO into a single listview cell

Like a rectangular ICO

[LarsJ]

Creating an image from 3 icons and displaying the image in a listview cell is certainly possible, and it should not be too hard.

[kklee69]

But I can only make the icon 16*16 or 24*24

I cannot change the icon to 48*16

I tried to turn three icons into one icon

Then put this ICO into a single listview cell

It still displays an icon with a size of 16*16

Is there any sample of ListView with long icons?

[LarsJ]

It's much easier than you think:

#include <GUIConstantsEx.au3>
#include <GuiImageList.au3>
#include <GuiListView.au3>

Example()

Func Example()
  Local $hImage, $idListview

  GUICreate("ListView Create Solid BitMap", 400, 300)
  $idListview = GUICtrlCreateListView("", 2, 2, 394, 268)
  GUISetState(@SW_SHOW)

  ; Load images
  $hImage = _GUIImageList_Create( 48, 16 )
  _GUIImageList_Add($hImage, _GUICtrlListView_CreateSolidBitMap(GUICtrlGetHandle($idListview), 0xFF0000, 48, 16))
  _GUIImageList_Add($hImage, _GUICtrlListView_CreateSolidBitMap(GUICtrlGetHandle($idListview), 0x00FF00, 48, 16))
  _GUIImageList_Add($hImage, _GUICtrlListView_CreateSolidBitMap(GUICtrlGetHandle($idListview), 0x0000FF, 48, 16))
  _GUICtrlListView_SetImageList($idListview, $hImage, 1)

  ; Add columns
  _GUICtrlListView_AddColumn($idListview, "Items", 100)

  ; Add items
  _GUICtrlListView_AddItem($idListview, "Item 1", 0)
  _GUICtrlListView_AddItem($idListview, "Item 2", 1)
  _GUICtrlListView_AddItem($idListview, "Item 3", 2)

  ; Loop until the user exits.
  Do
  Until GUIGetMsg() = $GUI_EVENT_CLOSE
  GUIDelete()
EndFunc   ;==>Example