I want to add the listbox scroll fade effect in my app - how?

Question

I am referring to the effect eg. the session indicator has or the keyboard language adder has. I'd prefer it with the responsiveness the session listbox has.

Answer 1

The most common way a designer can do this is by applying on an upper layer a semitransparent png image or gradient with fading transparency from 1 to 0 and white color. Another option is a gtk box shadow with white color.

edit: I believe this is what are you looking for:

ctl+shft+d

The style is into gtk-widgets.css, line 3840

popover undershoot.top {
background:
    linear-gradient(
        @bg_color 0%,
        alpha(@bg_color, 0) 50%
    );}

Answer 2

Gtk.ScrolledWindow is what you're looking for. It comes with everything you see in the screenshot you added: the vertical scroll bar to the right, the blue hue animations when reaching the top or the bottom of the list...

Basically, I suggest creating a Gtk.ListBox, populate it with whatever widgets you might need, and then add it to a Gtk.ScrolledWindow. Then, add the Gtk.ScrollerWindow to whatever container you need it to appear into. It will most likely inherit the container's width and height, and try to display the ListBox's contents as pretty as possible. Using a ListBox will also allow you to easily implement filtering of it's contents, if needed. I can supply an example here if you're interested.

This a screenshot of the implementation linked above: