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()

CodePudding user response：

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.