Search code examples
python-3.xtkintertreeview

About the space between image and text in ttk.treeview item


In a tkinter treeview, I'm adding images to each row, but there is no space between the image and the text.
Here's the code for a working example:


import tkinter as tk
from tkinter import ttk
from PIL import ImageTk, Image


class App(ttk.Frame):

    def __init__(self, parent, *args, **kwargs):
        ttk.Frame.__init__(self, parent)
        self.parent = parent

        # Create Treeview
        self.tree = ttk.Treeview(self.parent, selectmode='browse')
        ttk.Style().configure("Treeview", rowheight=21)
        self.tree.pack(expand=True, fill='both', side='left')
        # Setup column heading
        self.tree.heading('#0', text='Items', anchor='center')
        # Setup columns
        self.tree.column('#0', minwidth=100, width=200, stretch=False)

        image = Image.new('RGB', (24, 18), 'cyan')
        self.cyan = ImageTk.PhotoImage(image)
        image = Image.new('RGB', (24, 18), 'orange')
        self.orange = ImageTk.PhotoImage(image)
        image = Image.new('RGB', (24, 18), 'yellow')
        self.yellow = ImageTk.PhotoImage(image)
        image = Image.new('RGB', (24, 18), 'red')
        self.red = ImageTk.PhotoImage(image)
        image = Image.new('RGB', (24, 18), 'green')
        self.green = ImageTk.PhotoImage(image)
        image = Image.new('RGB', (24, 18), 'purple')
        self.purple = ImageTk.PhotoImage(image)

        self.tree.insert('', '0', '0', text="Cyan", image=self.cyan)
        self.tree.insert('', '1', '1', text="Orange", image=self.orange)
        self.tree.insert('', '2', '2', text="Green", image=self.green)
        self.tree.insert('', '3', '3', text="Purple", image=self.purple)
        self.tree.insert('', '4', '4', text="Red", image=self.red)
        self.tree.insert('', '5', '5', text="Yellow", image=self.yellow)


if __name__ == '__main__':
    root = tk.Tk()
    root.geometry('400x175+200+100')
    App(root)
    root.mainloop()

With this code, I get the following window: enter image description here

I'd like to have more space before the text in each row.
This seems unlike anything I see in any software I have.

Surely there is an easy fix: just add a couple of spaces in the beginning of the text, but that doesn't seem to be a very good solution, since it's more likely to get errors once one starts to deal with that text (retrieving it or changing it) from different methods.
Another way would be to frame the picture with a transparent layer a little bit wider behind it, but that's also not so good, because it's very elaborated (actually I'm not sure that would work) and also I use the same pictures in a different context where the space is ok, so I would have to duplicate the images.

I thought there must be a more clever way, but I couldn't find it. Anyone knows about it?


Solution

  • You can use a trasparent image and paste your image, something like:

    def image_pad(color, x, y, padx=5):
        image = Image.new('RGBA', (x + padx, y))
        image.paste(Image.new('RGB', (x, y), color))
        return ImageTk.PhotoImage(image)
    

    (I tested it under window)