Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to edit the style of a heading in Treeview (Python ttk)

I am trying to use ttk.Treeview to make a sortable table (as per Does tkinter have a table widget? and https://www.daniweb.com/software-development/python/threads/350266/creating-table-in-python).

Getting it to work is easy, but I'm having some issues with the styling. The default style for the Treeview heading is black text on a white background, which is fine. However, in my code I'm using:

ttk.Style().configure(".", font=('Helvetica', 8), foreground="white")

to format my GUI. This overarching style also affects the heading of the Treeview widget. Because the default heading background is white, I can not see the text (unless I mouse-over the heading, which turns it light-blue).

Normally, I'd override the style of a widget using a tag to change either the background or foreground, but I can't for the life of me figure out how to adjust the Treeview headers! ttk.Treeview(...) doesn't accept any tags, and ttk.Style().configure("Treeview", ...) has no effect. Only the Treeview items appear to accept tags when using widget.insert(...).

This baffles me, because the overarching ttk.Style().configure(".",...) does affect the Treeview headings, so it should be possible to apply a tag to them.

Does anybody know how to alter the style of a Treeview heading?

Below is a Minimum Working Example. Notice that the tag works for items but not for headings, that the Treeview style has no effect, and that the "." style does have an effect. I'm using Python 2.7 on Windows 7 in case that makes a difference.

    from Tkinter import *
    import ttk

    header = ['car', 'repair']
    data = [
    ('Hyundai', 'brakes') ,
    ('Honda', 'light') ,
    ('Lexus', 'battery') ,
    ('Benz', 'wiper') ,
    ('Ford', 'tire')]

    root = Tk()
    frame = ttk.Frame(root)
    frame.pack()
    table = ttk.Treeview(frame, columns=header, show="headings")
    table.pack()

    ## table.tag_configure('items', foreground='blue')
    ## ttk.Style().configure("Treeview", background='red', foreground='yellow')
    ## ttk.Style().configure(".", font=('Helvetica', 8), foreground="white")

    for col in header:
        table.heading(col, text=col.title(), command=lambda c=col: sortby(table, c, 0))
    for item in data:
        table.insert('', 'end', values=item, tags=('items',))

    def sortby(tree, col, descending):
        """sort tree contents when a column header is clicked on"""
        # grab values to sort
        data = [(tree.set(child, col), child) \
            for child in tree.get_children('')]
        # if the data to be sorted is numeric change to float
        #data =  change_numeric(data)
        # now sort the data in place
        data.sort(reverse=descending)
        for ix, item in enumerate(data):
            tree.move(item[1], '', ix)
        # switch the heading so it will sort in the opposite direction
        tree.heading(col, command=lambda col=col: sortby(tree, col, \
            int(not descending)))

    root.mainloop()
like image 367
Koen Peters Avatar asked Aug 17 '15 13:08

Koen Peters


People also ask

How do I edit a Treeview in Python?

The Treeview widget items can be edited and deleted by selecting the item using tree. selection() function. Once an item is selected, we can perform certain operations to delete or edit the item.

How do I change my Treeview font?

"Treeview. Heading" is the name of the element for the column headings. font=(None, 100) is a "cheaty" way of increasing font size without having to change the font itself. If you wanted to change the font style substitute None with whichever font you wanted.

Can you style tkinter?

Introduction to Tkinter ttk themes Each theme comes with a set of styles. It's possible to change the appearance of widgets by: Modifying the built-in styles. or creatting new styles.


2 Answers

this works where I am -

style = ttk.Style()
style.configure(".", font=('Helvetica', 8), foreground="white")
style.configure("Treeview", foreground='red')
style.configure("Treeview.Heading", foreground='green') #<----

http://www.tkdocs.com/tutorial/styles.html

like image 123
Oblivion Avatar answered Oct 06 '22 23:10

Oblivion


You can alter the font used in the Treeview headers using the default named font 'TkHeadingFont'.

Eg:

font.nametofont('TkHeadingFont').configure(size = 15)
like image 39
Emmaline Cooke Avatar answered Oct 06 '22 22:10

Emmaline Cooke