How to change the background color of tkinter ttk.PanedWindow widget?

Question

How do I change the white colour zone in this tkinter GUI to a different color?

I tried making the change via ttk.Style, however, it did not work.

Below is my test code.

#!/usr/bin/python3
# -*- coding: utf-8 -*-

import tkinter.ttk as ttk
import tkinter as tk


root = tk.Tk()
root['background'] = 'pink'
root.geometry('1200x400+0+100')
# root.rowconfigure(0, weight=1)
# root.columnconfigure(0, weight=1)

style = ttk.Style()
style.configure('my.TPanedwindow', background='black')
style.configure('my.Treeview', background='orange', foreground='grey')
style.configure('my.Treeview.Heading', background='blue', foreground='red')
style.configure('my.Treeview.field', fieldbackground='green')

pw = ttk.PanedWindow(root, cursor='sb_h_double_arrow',
                     orient=tk.HORIZONTAL,
                     style='my.TPanedwindow',
                     width=1000, height=200)
pw.grid(row=0, column=0, )  # sticky='nsew')

b = ttk.Button(pw, text='Test ttk.PanedWindow')
pw.add(b)


def create_treeview(parent):
    # Create Treeview
    Cols = ('#01', '#02', '#03', '#04', '#05', '#06')
    tv = ttk.Treeview(parent, columns=Cols, height=2,
                      displaycolumn=['#05', '#06', '#01',
                                     '#02', '#03', '#04'],
                      style='my.Treeview',
                      selectmode='extended', takefocus=True)
    # Setup column & it's headings
    tv.column('#0', stretch=0, minwidth=100, width=100, anchor='w')
    tv.column('#01', stretch=0, anchor='n', width=70)
    tv.column('#02', stretch=0, anchor='n', width=80)
    tv.column('#03', stretch=0, anchor='n', width=75)
    tv.column('#04', stretch=0, anchor='w')
    tv.column('#05', stretch=0, anchor='e', width=80)
    tv.column('#06', stretch=0, anchor='n', width=70)
    tv.heading('#0', text=' Directory ', anchor='w')
    tv.heading('#01', text='#01', anchor='center')
    tv.heading('#02', text='#02', anchor='center')
    tv.heading('#03', text='#03', anchor='center')
    tv.heading('#04', text='#04', anchor='w')
    tv.heading('#05', text='#05', anchor='center')
    tv.heading('#06', text='#06', anchor='center')
    # #0, #01, #02 denotes the 0, 1st, 2nd columns
    return tv


tv = create_treeview(pw)
pw.add(tv)
v0 = ('', '', '', '', 'xxx', str('home'), '', '')
tv.insert('', '0', iid='home',
          text='Hello',
          open=True,
          tag='dir',
          values=v0
          )

root.mainloop()

Sorry to tell, but it did work. See the black space between your Button and your Treeview? Thats the panedwindow. — Thingamabobs, Nov 11 '21 at 00:50
@Atlas435 So what is the white colour space called? This will help me to rephrase the title of my question. — Sun Bear, Nov 11 '21 at 00:59
The white color zone is part of treeview, not the panedwindow. Set the `fieldbackground` in style for `"my.Treeview"` and use another theme (some styles may not be supported in current theme). — acw1668, Nov 11 '21 at 01:00
@SunBear as acw says its the Treeview. I configured mine with 'default'. — Thingamabobs, Nov 11 '21 at 01:01
@SunBear I recently wrote this [answer](https://stackoverflow.com/a/69890743/13629335). Its far from complete but gives some input. — Thingamabobs, Nov 11 '21 at 01:06
@acw1668 I did specify `style.configure('my.Treeview.field', fieldbackground='green')` and used themes `'default'`, `'alt'`, `'clam'` but the white space still persist. — Sun Bear, Nov 11 '21 at 01:07
@SunBear As I said set it for `"my.Treeview"`, not `"my.Treeview.field"`. According to [`tkdoc`](https://tcl.tk/man/tcl8.6/TkCmd/ttk_treeview.htm#M82), `"my.Treeview.field"` is not a valid style class. — acw1668, Nov 11 '21 at 01:10
`style.configure('my.Treeview', background='orange', foreground='grey',fieldbackground='green')` and `style.theme_use('default')` works for me. — Thingamabobs, Nov 11 '21 at 01:12
[In this list](https://stackoverflow.com/a/65464537/13629335) its also specified for Treeview, not Treeview.field. — Thingamabobs, Nov 11 '21 at 01:13
@Atlas435 your right. Defining `fieldbackground='green'` inside `'my.Treeview'` worked. Thanks. — Sun Bear, Nov 11 '21 at 01:17
@Atlas435 It's kind of strange b'cos when I ran my [script](https://stackoverflow.com/a/48933106/5722359), `ttk.Style` reports that the `fieldbackground` option appears inside element `Treeview.field`. The tcl wiki you found is accurate. Thanks. — Sun Bear, Nov 11 '21 at 01:33
If this question is cleared, you can either delete or vote to close — Delrius Euphoria, Nov 11 '21 at 04:30

score 0 · Accepted Answer · answered Nov 11 '21 at 15:42

As identified by @Atlas435 in the question's comment section, the background of the ttk.PanedWindow was indeed correctly set. It is the black space between the ttk.Button and ttk.Treeview.

The color of the "white space" in the GUI is actually the space controlled by the fieldbackground option of the Treeview style layout. Although the ttk.Style() layout and element_options methods report fieldbackground as an option of the Treeview.field element of the Treeview layout, the correct syntax to set the colour of the fieldbackground is:

style.configure('Treeview', background='orange', foreground='grey',
                fieldbackground='orange')

and not:

style.configure('Treeview', background='orange', foreground='grey)
style.configure('Treeview.field', fieldbackground='orange')

A good reference to defining the ttk.Style().configure() statement is to refer to this tcl wiki on Changing Widget Color.

@acw1668 and @Atlas435 are credited here to have answered my question. Thanks

I have written up this learning as an answer because I suspect tkinter user will face similar issue and hope this answer can help them shorten/ease their learning curve.

Please be sure to accept your answer, so that other users know that the question has been answered satisfactorily. — Sylvester Kruin, Nov 11 '21 at 16:44
@SylvesterKruin SO requires a day for the author of the question to accept his/her own answer. — Sun Bear, Nov 11 '21 at 16:50
Huh. Now that I come to think of it, I knew that (I just forgot), but I can't remember if I've ever had trouble with that myself. Is it a day after you post the _question_ (not a day after you post the answer)? That would explain why I've never had trouble with this rule, because I always answered my questions at least a day after asking them. Sorry to bother you about that :-)! I will try to remember this in the future! — Sylvester Kruin, Nov 11 '21 at 16:55
@SylvesterKruin It is a day after posting an answer to your own question. — Sun Bear, Nov 11 '21 at 17:00

How to change the background color of tkinter ttk.PanedWindow widget?

1 Answers1