Search code examples
pythontkinterttkpython-class

Classes and Styling in Tkinter

I'm still in my first week of Python, so I'm sorry if this is an obvious mistake...

I want to style a Frame in Tkinter with rounded corners, therefore I got a base64 encoded image, which I applied using ttk.Style following this answer (Tkinter: How to make a rounded corner text widget?) and that worked fine.

My problem is now adapting this into a Class structured program, there the frame is not showing at all.

I replicated the Problem in the code below.

The first window is showing the problem, and the second one how its supposed to look.

How do I make this work? And could there be any new conflicts coming up when I'm not packing the frame to the main window, but into another Frame?

Thanks in advance!

import tkinter as tk
from tkinter import ttk


borderImageData = '''
    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
'''


class Application(tk.Tk):

    def __init__(self, *args, **kwargs):
        
        tk.Tk.__init__(self, *args, **kwargs)

        style = ttk.Style()
        style.theme_use('clam')
        borderImage = tk.PhotoImage("borderImage", data=borderImageData)
        style.element_create("RoundedFrame", "image", borderImage, border=16, sticky="nsew")
        style.layout("RoundedFrame", [("RoundedFrame", {"sticky": "nsew"})])
        

        frame = ttk.Frame(self, style = "RoundedFrame", padding = 10)
        frame.pack()

        entry = tk.Entry(frame, borderwidth = 0, width = 40)
        entry.pack(fill="both", expand=True)
        
        
        
app = Application()
app.mainloop()




root = tk.Tk()


style = ttk.Style()
style.theme_use('clam')
borderImage = tk.PhotoImage("borderImage", data=borderImageData)
style.element_create("RoundedFrame", "image", borderImage, border=16, sticky="nsew")
style.layout("RoundedFrame", [("RoundedFrame", {"sticky": "nsew"})])
            

frame = ttk.Frame(root, style = "RoundedFrame", padding = 10)
frame.pack()

entry = tk.Entry(frame, borderwidth = 0, width = 40)
entry.pack(fill="both", expand=True)


root.mainloop()
Solution

  • The problem is pythons garbage collections destroying the PhotoImage instance. You need to keep a reference to it (this is also somewhere in the docs). You probably just wanna save most stuff as an attribute anyway:

    class Application(tk.Tk):

    def __init__(self, *args, **kwargs):
        tk.Tk.__init__(self, *args, **kwargs)

        self.style = ttk.Style()
        self.style.theme_use('clam')
        self.borderImage = tk.PhotoImage("borderImage", data=borderImageData)
        self.style.element_create("RoundedFrame", "image", self.borderImage, border=16, sticky="nsew")
        self.style.layout("RoundedFrame", [("RoundedFrame", {"sticky": "nsew"})])

        self.frame = ttk.Frame(self, style="RoundedFrame", padding=10)
        self.frame.pack()

        self.entry = tk.Entry(self.frame, borderwidth=0, width=40)
        self.entry.pack(fill="both", expand=True)

    Works for me.