Can I stack a Frame on top of a canvas? (Tkinter)

Question

I'm new to coding and am attempting to make some sort of EPOS type system just as a project for the shop I work in. I want to stack a frame to have a keypad for a log in code on top of a background image, just for the start of the program. Essentially no matter how I try to stack the different Tkinter widgets, it never seems to work.

I've tried placing the canvas which holds the image in the main Tk() and then place the frame on top of that, to then use a grid structure to build the keypad put that didn't work.

I tried different combinations of which widget parents which other widget etc, and couldn't get anything to work. It usually ended up with no frame visible, and the 1920x1080 image being pushed to the bottom right of the screen.

screen_width = 1920
screen_height = 1080
screen_geometry = '{}x{}'.format(screen_width, screen_height)

main_window = Tk()
main_window.title('Shop')
main_window.resizable(0,0)
main_window.geometry(screen_geometry)

background_image = PhotoImage(master=C, file='logo.png')

C = Canvas(main_window, bg="blue", height=screen_height, width=screen_width)
background_label = Label(C, image=background_image)
background_label.place(x=0, y=0, relwidth=1, relheight=1)
C.place(x=0, y=0, relwidth=1, relheight=1)

login_window = Frame(main_window, borderwidth=5, relief=GROOVE)
login_window.config(width=10, height=10)
login_window.place(x=0, y=0, relwidth=1, relheight=1)

test_button = Button(login_window, text="test")
test_button.grid(column=0, row=0)

main_window.mainloop()

I expected the logo to be placed underneath the frame, and then I'd be able to use the frame with a normal grid structure, but it didn't seem to work at all.

This code is messy and poor, so some constructive criticism and help overall would be lovely.

Thank you.

Is the `Canvas` object necessary in your application? As from your sample code, it is not necessary. Since the frame will block the content of Canvas behind it and so you can never see the background image. Try put the `background_label` inside `login_window` instead. — acw1668, Apr 01 '19 at 02:16
Have a look at: [How to use an image for the background in tkinter?](https://stackoverflow.com/a/10181434/8172933) — figbeam, Apr 01 '19 at 13:37
@acw1668 This image here may help. [link](https://gyazo.com/662479b52eefa2ce3693cc92ab762499); the red parts are where the image isn't transparent, whilst the grid with numbers is where I'd like to put a keypad sorta thing? — T Burnard, Apr 01 '19 at 14:42
Does it mean you want to see the background image in the red regions? — acw1668, Apr 01 '19 at 23:12

score 0 · Answer 1 · answered Apr 02 '19 at 01:24

From my understanding, you want to have a login window with a background image and a keypad at the center of the window. Below is a sample code:

from tkinter import *

screen_width = 1920 // 2
screen_height = 1080 // 2
screen_geometry = '{}x{}'.format(screen_width, screen_height)

main_window = Tk()
main_window.title('Shop')
main_window.resizable(0, 0)
main_window.geometry(screen_geometry)

# background image
background_image = PhotoImage(file='logo.png')
background_label = Label(main_window, image=background_image)
background_label.place(x=0, y=0, relwidth=1, relheight=1)

# keypad at the center of window
login_frame = Frame(main_window)
login_frame.place(relx=0.5, rely=0.5, anchor=CENTER)

display = Label(login_frame, bg='black', font=('', 20))
display.grid(row=0, column=0, columnspan=3, sticky='ew')

def input_digit(n):
    print(n)

font = ('', 16, 'bold')
numpad = []
for number in range(9):
    row = number // 3
    col = number % 3
    btn = Button(login_frame, text=number+1, font=font, width=5, height=2)
    btn.grid(row=row+1, column=col)
    btn.config(command=lambda n=number+1:input_digit(n))
    numpad.append(btn)

main_window.mainloop()

Can I stack a Frame on top of a canvas? (Tkinter)

1 Answers1