I am developing a desktop application using Python tkinter. I am facing problems while styling it. Is there any way to get the desired output. It may not be exact but some what similar like: button with red/green/yellow background, treeview with grid-lines. I have tried
customed_style.configure('Custom.TButton', font=('Helvetica', 11), background="red", foreground='white')
customed_style.configure("Custom.Treeview.Heading", background="blue", foreground="white", relief="flat", font=('Helvetica', 10, 'bold'))
But these don't make the desired output, these only changes the text color to white but not the background.
I am working on Windows 10 Operating System
Desired Style:
Current Code:
import tkinter as tk
from tkinter import ttk
class MainWindow:
def __init__(self, master):
self.master = master
self.master.title("Python tkinter ttk Style")
self.master.wm_iconbitmap('icon.ico')
self.frame_buttons = ttk.Frame(self.master)
self.frame_buttons.grid(row=0, column=0, padx=4, pady=4, sticky='nesw')
self.frame_treeview = ttk.Frame(self.master)
self.frame_treeview.grid(row=1, column=0, padx=4, pady=4, sticky='nesw')
self.create_buttons()
self.create_treeview()
def create_buttons(self):
self.details_button_image = tk.PhotoImage(file='details_button.png').subsample(3, 3)
self.edit_button_image = tk.PhotoImage(file='edit_button.png').subsample(3, 3)
self.delete_button_image = tk.PhotoImage(file='delete_button.png').subsample(3, 3)
self.button_details = ttk.Button(self.frame_buttons, text="Details", image=self.details_button_image, compound="left", style='Custom.TButton')
self.button_details.grid(row=0, column=0, padx=4, pady=4)
self.button_edit = ttk.Button(self.frame_buttons, text="Edit", image=self.edit_button_image, compound="left", style='Custom.TButton')
self.button_edit.grid(row=0, column=1, padx=4, pady=4)
self.button_delete = ttk.Button(self.frame_buttons, text="Delete", image=self.delete_button_image, compound="left", style='Custom.TButton')
self.button_delete.grid(row=0, column=2, padx=4, pady=4)
def create_treeview(self):
self.treeview_person_list = ttk.Treeview(self.frame_treeview, columns=('name', 'email', 'contact', 'address'), height=6)
self.treeview_person_list.grid(row=0, column=0, padx=4, pady=4)
self.treeview_person_list.heading('#0', text="ID")
self.treeview_person_list.column("#0", minwidth=50, width=50, anchor='center')
self.treeview_person_list.heading('#1', text="Full Name")
self.treeview_person_list.column("#1", minwidth=150, width=150, anchor='w')
self.treeview_person_list.heading('#2', text="Email")
self.treeview_person_list.column("#2", minwidth=150, width=150, anchor='w')
self.treeview_person_list.heading('#3', text="Phone")
self.treeview_person_list.column("#3", minwidth=150, width=150, anchor='w')
self.treeview_person_list.heading('#4', text="Street Address")
self.treeview_person_list.column("#4", minwidth=150, width=150, anchor='w')
self.treeview_person_list.insert('', 'end', text='01', values=('Annabel Geffen', 'ageffen0@hc360.com', '+55 138 953 4728', '34346 6th Pass'))
self.treeview_person_list.insert('', 'end', text='02', values=('Ailey Myring', 'amyring1@lulu.com', '+234 874 785 2200', '72 Cody Street'))
self.treeview_person_list.insert('', 'end', text='03', values=('Sherie Meeron', 'smeeron2@xing.com', '+86 348 534 4411', '0896 Express Park'))
self.treeview_person_list.insert('', 'end', text='04', values=('Alice Grayston', 'agrayston3@phpbb.com', '+51 591 958 5938', '540 Beilfuss Circle'))
self.treeview_person_list.insert('', 'end', text='05', values=('Hasheem Halbard', 'hhalbard4@wikia.com', '+593 493 130 1417', '08291 Shasta Parkway'))
def main():
root = tk.Tk()
customed_style = ttk.Style()
customed_style.configure('Custom.TButton', font=('Helvetica', 11))
app = MainWindow(root)
root.mainloop()
if __name__ == '__main__':
main()
Current Style:
With Custom Style Code:
import tkinter as tk
from tkinter import ttk
class MainWindow:
def __init__(self, master):
self.master = master
self.master.title("Python tkinter ttk Style")
self.master.wm_iconbitmap('icon.ico')
self.frame_buttons = ttk.Frame(self.master)
self.frame_buttons.grid(row=0, column=0, padx=4, pady=4, sticky='nesw')
self.frame_treeview = ttk.Frame(self.master)
self.frame_treeview.grid(row=1, column=0, padx=4, pady=4, sticky='nesw')
self.create_buttons()
self.create_treeview()
def create_buttons(self):
self.details_button_image = tk.PhotoImage(file='details_button.png').subsample(3, 3)
self.edit_button_image = tk.PhotoImage(file='edit_button.png').subsample(3, 3)
self.delete_button_image = tk.PhotoImage(file='delete_button.png').subsample(3, 3)
self.button_details = ttk.Button(self.frame_buttons, text="Details", image=self.details_button_image, compound="left", style='Custom.TButton')
self.button_details.grid(row=0, column=0, padx=4, pady=4)
self.button_edit = ttk.Button(self.frame_buttons, text="Edit", image=self.edit_button_image, compound="left", style='Custom.TButton')
self.button_edit.grid(row=0, column=1, padx=4, pady=4)
self.button_delete = ttk.Button(self.frame_buttons, text="Delete", image=self.delete_button_image, compound="left", style='Custom.TButton')
self.button_delete.grid(row=0, column=2, padx=4, pady=4)
def create_treeview(self):
self.treeview_person_list = ttk.Treeview(self.frame_treeview, columns=('name', 'email', 'contact', 'address'), height=6, style='Custom.Treeview')
self.treeview_person_list.grid(row=0, column=0, padx=4, pady=4)
self.treeview_person_list.heading('#0', text="ID")
self.treeview_person_list.column("#0", minwidth=50, width=50, anchor='center')
self.treeview_person_list.heading('#1', text="Full Name")
self.treeview_person_list.column("#1", minwidth=150, width=150, anchor='w')
self.treeview_person_list.heading('#2', text="Email")
self.treeview_person_list.column("#2", minwidth=150, width=150, anchor='w')
self.treeview_person_list.heading('#3', text="Phone")
self.treeview_person_list.column("#3", minwidth=150, width=150, anchor='w')
self.treeview_person_list.heading('#4', text="Street Address")
self.treeview_person_list.column("#4", minwidth=150, width=150, anchor='w')
self.treeview_person_list.insert('', 'end', text='01', values=('Annabel Geffen', 'ageffen0@hc360.com', '+55 138 953 4728', '34346 6th Pass'), tag='odd')
self.treeview_person_list.insert('', 'end', text='02', values=('Ailey Myring', 'amyring1@lulu.com', '+234 874 785 2200', '72 Cody Street'), tag='even')
self.treeview_person_list.insert('', 'end', text='03', values=('Sherie Meeron', 'smeeron2@xing.com', '+86 348 534 4411', '0896 Express Park'), tag='odd')
self.treeview_person_list.insert('', 'end', text='04', values=('Alice Grayston', 'agrayston3@phpbb.com', '+51 591 958 5938', '540 Beilfuss Circle'), tag='even')
self.treeview_person_list.insert('', 'end', text='05', values=('Hasheem Halbard', 'hhalbard4@wikia.com', '+593 493 130 1417', '08291 Shasta Parkway'), tag='odd')
self.treeview_person_list.tag_configure('odd', background='#F5F5F5')
self.treeview_person_list.tag_configure('even', background='#FFFFFF')
def main():
root = tk.Tk()
customed_style = ttk.Style()
customed_style.configure('Custom.TButton', font=('Helvetica', 11), background="red", foreground='white')
customed_style.configure('Custom.Treeview', highlightthickness=0, bd=0, font=('Helvetica', 10))
customed_style.configure('Custom.Treeview.Heading', font=('Helvetica', 10, 'bold'), background="blue", foreground="red")
app = MainWindow(root)
root.mainloop()
if __name__ == '__main__':
main()
With Custom Style:
If anyone wants to try with the images also here are the three images used in the code:
details_button:
edit_button:
delete_button:
Any good resource on complete custom styling for Python tkinter ttk will be appreciated. Thanks in advance.
