Intro:
LabVIEW Listboxes can contain pictures. Well, 16x16px pictures (and offer very limited features) associated with their text. Most applications or website use icons/pictures as toolbars now. They can be vertical or horizontal, but the principle remains the same. You should select a new item by clicking a picture, or with arrow keys. WPF and most web languages can do it natively. It's time for LabVIEW to catch up with them.
These attached XControls aim at giving a suitable experience while creating such UIs.
Implementation:
- Well it's a picture listbox. So it uses pictures. A one-dimensional picture array to be more accurate.
- Two buttons are added in case the total number of pictures can not fit the control size. Those buttons enable you to navigate in the listbox without changing its value.
- Icons are loaded by an invoke node : from files (it handles png, jpg, jpeg and bmp), and from a folder (only png). All icons must be of the same size. I chose this constraint for a greater harmony in the pictures. How hideous it is to have 4 64x64 icons with a 48x48 one in the middle...
- The selection color (blue by default) may be changed to whichever you want through a property node.
- Hover the mouse on a picture and you will activate an overlay.
- The listbox is implemented as a single-selection list.
- Splitters inside the Façade VI make the XControl life easier so that it resizes rather smoothly (you can set the XControl to scale with the pane - see examples).
- You may see lines when clicking or navigating the pictures (with arrow keys). That is a counterpart of having to set the key focus on the picture array... 😕
Screenies:
Known issues :
- Clicking the pictures array enables the key focus, and displays lines around it.
- If a control in your application needs the key focus, the XControl loses it (thus you can't navigate with key arrows).
- No warning/error is thrown when importing icons that have different sizes.
Attachments :
- Horizontal Picture Listbox XControl.
- Sample project showing the integration of the Vertical Picture Listbox XControl with subpanels.
Eric M. - Senior Software Engineer
Certified LabVIEW Architect - Certified LabVIEW Embedded Systems Developer - Certified LabWindows™/CVI Developer
Neosoft Technologies inc.