GUI: Vertical list of arbitrary elements with TkInter

Question

Sorry if complete basic question. I'm doing my first steps with TkInter, trying to develop a GUI interface to a video library (I do have experience though with WPF/XAML, the MVVM paradigm, and to some extent with html/css).

I would like to have a horizontal list, scroll-able, of custom elements. Each element will have video data, including metadata (length, bitrate, etc.), a picture (thumbnail), and some action buttons (play, delete, mark, etc.). Ideally I also want to have dragging handle, to rearrange the order of the videos.

I'm looking, but cannot find, what should be the equivalent of element in WPF, with binding to data and templates. Is that even exist in Tk, or is it too ambitious requirement for a portable, free framework?

Even if templates don't exist in Tk, I still can manage by populating the parent control manually (e.g. similar to HTML's elements - each has many controls) - but I couldn't event find a list of arbitrary widgets.

Is two way binding exists (e.g. adding an item to the list of items, should automatically update the UI)?

Is Tk the right direction? The underlying logic is in python, so I'm looking for a python friendly solution. Iron Python with WPF would be the obvious solution, but I want to be portable, and Iron Python's current state isn't very promising, and I'm using libraries not supported by Iron Python.

Your title asks for a vertical list, the body asks for a horizontal list. — Bryan Oakley, May 09 '16 at 16:40

score 1 · Answer 1 · edited May 23 '17 at 11:59

The most common way to make a custom element is to subclass Frame. You can put whatever you want in that frame (image, buttons, etc), and then you can treat the whole thing as a single GUI element.

import Tkinter as tk
...
class CustomElement(tk.Frame):
    def __init__(self, parent, meta, image_file, ...):
        tk.Frame.__init__(self, parent)
        # <create widgets for image, metadata, etc here>

You can then create a custom widget that acts as a container for these items. For example, you can use a canvas which makes it easy to line this objects up horizontally, and to which you can attach a scrollbar.

Finally, tkinter has a robust event management system that makes it possible to move things around with drag and drop. There isn't any built-in drag and drop per se, but you can create your own grab handles and custom bindings for click and release to implement it.

For an example of moving things on a canvas with the mouse, see this answer: https://stackoverflow.com/a/6789351/7432

GUI: Vertical list of arbitrary elements with TkInter

1 Answers1