UI Interest Group Documents

cancel
Showing results for 
Search instead for 
Did you mean: 

Picture Listbox XControl

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:

Simple Screenie.png

Screenie.png

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.

Contributors