Recent

Author Topic: Styling ListView with icons  (Read 1015 times)

AsleyCruz

  • Jr. Member
  • **
  • Posts: 99
    • Graphic and web designer
Styling ListView with icons
« on: February 29, 2020, 07:10:06 pm »
Hello team,
Please, help me with this view. See attached image.

Can you provide me a code to do that grid with icons? (It's from Firefox downloads window)
Icon on left. Main title on right and below title, some text.

Many thanks in advance.
Graphic & web designer

lucamar

  • Hero Member
  • *****
  • Posts: 4219
Re: Styling ListView with icons
« Reply #1 on: February 29, 2020, 07:33:32 pm »
Very basically, set OwnerDraw to True, set ViewStyle to vsReport and code handlers for the OnCustomDraw* or OnAdvancedCustomDraw* events.

It might be a little frustating if you want to make it cross-platform, and you'll probably not be able to achieve that exact look, but it shouldn't be too difficult; just a tad laborious to get the look you want.

Unfortunately I have neither an example at hand or time to build one, sorry :(
« Last Edit: February 29, 2020, 07:35:03 pm by lucamar »
Turbo Pascal 3 CP/M - Amstrad PCW 8256 (512 KB !!!) :P
Lazarus/FPC 2.0.8/3.0.4 & 2.0.12/3.2.0 - 32/64 bits on:
(K|L|X)Ubuntu 12..18, Windows XP, 7, 10 and various DOSes.

jamie

  • Hero Member
  • *****
  • Posts: 6131
Re: Styling ListView with icons
« Reply #2 on: February 29, 2020, 08:23:32 pm »
There is a lot of ways to achieve that …

off the top of my head I would say using TDrawGrid. set it for 2 columns ,  adjust the cell width for the first one and turn off the grid lines.
 
 You can maintain a TstringList off the side to be used when the OnDraw event is called. This list will hold the two lines for each entry and the object index value can be used to point to the icon in a list.

 There is also the TvirualControls package you can install which gives you a lot of flex for doing such things.

The only true wisdom is knowing you know nothing

balazsszekely

  • Guest
Re: Styling ListView with icons
« Reply #3 on: February 29, 2020, 09:21:49 pm »
With VirtualTreeView you can easily achieve that look. Take a look at the following thread: https://forum.lazarus.freepascal.org/index.php/topic,37834.0.html
It's very similar to your screenshot. You can download the demo project from here: https://forum.lazarus.freepascal.org/index.php/topic,37834.msg256597.html#msg256597

PS: VTV works great in every major platform and widgetset(cocoa included).
« Last Edit: February 29, 2020, 09:25:11 pm by GetMem »

 

TinyPortal © 2005-2018