How to make ttk.Ttreeview rows cover the whole available height?

Good time of day!

My Treeview widget sticks to “news” directions, so whenever I resize my app – it shrinks/expands with it. The problem is, when Treeview doesn’t expand enough to fit a whole another row, it leaves a blank space. (Blank space)

Is there a way to make rows cover the whole Treeview height at all times, like tk.Listbox does?
(Wanted result)

So far I’ve tried tweaking row height parameter, but it, obviously, didn’t help, since there are still moments, when there isn’t enough space to fit another row.

Here is my code so far (the whole app code is quite lengthy, so I’ll leave only Treeview-related snippets):

Initializing Treeview widget:

self.colorTreeView = ttk.Treeview(self.colorListSubFrame, columns=['savedColors'], show='tree', selectmode=tk.BROWSE, style="DARK_THEME.Treeview", height=11)
self.colorTreeView.heading("savedColors", text="Colors", anchor="nw")
self.colorTreeView.column("savedColors", width=10, anchor="center", stretch=True)
self.colorTreeView.grid(column=0, row=0, sticky="news", padx=5, pady=12)

Methods interacting with the Treeview:

def SaveColor(self, *args):
    newColor = ColorConvertor.Color(self.currentPixelColor)
    self.colorList.insert(0, newColor)
    self.colorTreeView.tag_configure(newColor, background= '#'+ newColor.stringColorValueHEX)
    if newColor.colorName is not None:
        t = self.colorTreeView.insert('', 0, text= newColor.colorName, tags=(newColor,))
    else:
        t = self.colorTreeView.insert('', 0,text= eval("newColor.stringColorValue" + f"{self.currentColorSpace}"), tags=(newColor,))


def RefreshList(self):
    self.colorTreeView.delete(*self.colorTreeView.get_children())
    for i in self.colorList:
        self.colorTreeView.insert('', tk.END,text= eval("i.stringColorValue" + f"{self.currentColorSpace}"), tags=(i,))


def SwitchColorSpace(self, *args):
    _newCS = self.colorSpaceCB.get()
    self.colorSpaceCB.selection_clear()
    self.currentColorSpace = _newCS
    self.RefreshList()
    self.colorTreeView.update()

My style settings:

DARK_THEME_SETTINGS ={
        'DARK_THEME_MAIN-FRAME.TFrame': {
            'configure':{
                'background': '#1F1F1F',
            }
        },
        'TEST_THEME_MAIN-FRAME.TFrame': {
            'configure':{
                'background': 'orange',
            }
        },
        'DARK_THEME_IMAGEBOX.TLabel': {
            'configure':{
                'relief': 'solid',
                'borderwidth': 2,
                'bordercolor': "white",
            },
        },
        'DARK_THEME_INFO-TEXT.TLabel':{
            'configure':{
                'foreground': 'white',
            }
        },
        'DARK_THEME.Treeview': {
            'configure': {
                'background': '#1F1F1F"',
                'foreground': 'white',
                'fieldbackground': '#1F1F1F',
                'font': ('Segoe UI', 9),
                'padding': 0,
                'relief': 'solid',
                'borderwidth': 1,
                'bordercolor': 'white',
                'rowheight': 20,
            },
            'map': {
                'font': [('selected', ('Segoe UI', 9, 'bold'))],
                'foreground': [('selected', 'white')],
            }
        },
        'DARK_THEME.TCombobox': {
            'configure': {
                'foreground': 'white',
                'background': "#1F1F1F",
                'fieldbackground': "#1F1F1F",
                'selectbackground' : '#0066D1',
                'selectforeground': "white",
                'bordercolor': 'white',
                'borderwidth': 0.5,
                'arrowcolor': 'white',
                'relief': "flat",
            },
            'map': {
                'foreground': [('active', "#1F1F1F"), ('disabled', "#1F1F1F")],
                'background': [('active', "#1F1F1F"), ('disabled', "#1F1F1F")],
                'arrowcolor': [('active', 'white'), ('disabled', 'white')],
            },
        },
        'DARK_THEME.TEntry':{
            'configure': {
                'foreground': 'white',
                'background': "#1F1F1F",
                'fieldbackground': "#1F1F1F",
                'selectbackground' : '#0066D1',
                'relief': "solid",
                'bordercolor': 'white',
                'borderwidth': 1,
            }
        }
    }

  • Maybe you can edit your question and add there code you have.

    – 

  • @Andrej Kesely, sure!

    – 

  • As there is only one column in the treeview, so why don’t you just use Listbox instead then?

    – 

  • @acw1668 because ttk doesn’t have a Listbox, only Treeview. Which means I’ll have to make quite a workaround to keep it’s style consistent with the rest of the app.

    – 

Leave a Comment