Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Tkinter button expand using grid

I'm new to coding, just learning Python. I searched for answers but could not find one.

I'm trying to make a calculator for learning purposes, but I cannot make the bottom keyboard frame expand, or buttons inside expand to match the borders of the root window

Here is my code:

from tkinter import  *

# main window configuration
root=Tk()
root.geometry("1000x1000")

root.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(0, weight=1)
# main window frames

topmenu=Frame(root,padx=5,pady=5)
display=Frame(root,padx=5,pady=5)
keyboard=Frame(root,padx=5,pady=5,bg="red")

topmenu.grid(row=0,column=0)
display.grid(row=1,column=0)
keyboard.grid(row=2,column=0)




# topmenu widgets

# display widgets

#keyboard widgets
 #  prima riga
percentagebutton=Button(keyboard,padx=5,pady=5,text="%")
squarerootbutton=Button(keyboard,padx=5,pady=5,text="√x")
squarebutton=Button(keyboard,padx=5,pady=5,text="x²")
inversebutton=Button(keyboard,padx=5,pady=5,text="1/x")

percentagebutton.grid(row=0,column=0,sticky='EWNS')
squarerootbutton.grid(row=0,column=1,sticky='EWNS')
squarebutton.grid(row=0,column=2,sticky='EWNS')
inversebutton.grid(row=0,column=3,sticky='EWNS')

#   seconda riga
resetbutton=Button(keyboard,padx=5,pady=5,text="C")
deletebutton=Button(keyboard,padx=5,pady=5,text="←")
divisionbutton=Button(keyboard,padx=5,pady=5,text="÷")


resetbutton.grid(row=1,column=0,columnspan=2,sticky='EWNS')
deletebutton.grid(row=1,column=2,sticky='EWNS')
divisionbutton.grid(row=1,column=3,sticky='EWNS')


#   terza riga

sevenbutton=Button(keyboard,padx=5,pady=5,text="7")
eightbutton=Button(keyboard,padx=5,pady=5,text="8")
ninebutton=Button(keyboard,padx=5,pady=5,text="9")
moltiplicationbutton=Button(keyboard,padx=5,pady=5,text="X")

sevenbutton.grid(row=2,column=0,sticky='EWNS')
eightbutton.grid(row=2,column=1,sticky='EWNS')
ninebutton.grid(row=2,column=2,sticky='EWNS')
moltiplicationbutton.grid(row=2,column=3,sticky='EWNS')
#   quarta riga
fourbutton=Button(keyboard,padx=5,pady=5,text="4")
fivebutton=Button(keyboard,padx=5,pady=5,text="5")
sixbutton=Button(keyboard,padx=5,pady=5,text="6")
minusbutton=Button(keyboard,padx=5,pady=5,text="-")

fourbutton.grid(row=3,column=0,sticky='EWNS')
fivebutton.grid(row=3,column=1,sticky='EWNS')
sixbutton.grid(row=3,column=2,sticky='EWNS')
minusbutton.grid(row=3,column=3,sticky='EWNS')






#   quinta riga
onebutton=Button(keyboard,padx=5,pady=5,text="1")
twobutton=Button(keyboard,padx=5,pady=5,text="2")
threebutton=Button(keyboard,padx=5,pady=5,text="3")
plusbutton=Button(keyboard,padx=5,pady=5,text="+")

onebutton.grid(row=4,column=0,sticky='EWNS')
twobutton.grid(row=4,column=1,sticky='EWNS')
threebutton.grid(row=4,column=2,sticky='EWNS')
plusbutton.grid(row=4,column=3,sticky='EWNS')


#   sesta riga
signbutton=Button(keyboard,padx=5,pady=5,text="±")
zerobutton=Button(keyboard,padx=5,pady=5,text="0")
commabutton=Button(keyboard,padx=5,pady=5,text=",")
resultbutton=Button(keyboard,padx=5,pady=5,text="=")

signbutton.grid(row=5,column=0,sticky='EWNS')
zerobutton.grid(row=5,column=1,sticky='EWNS')
commabutton.grid(row=5,column=2,sticky='EWNS')
resultbutton.grid(row=5,column=3,sticky='EWNS')



root.mainloop()

Here is an image of my calculator how it currently is:

Another image to explain

How do I make the keyboard frame and buttons resize to match the borders of the root window?

like image 379
Pierluigi Puglielli Avatar asked Oct 30 '18 22:10

Pierluigi Puglielli


1 Answers

Question: Tkinter button expand using grid

TkDocs: The Grid Geometry Manager Handling Resize


You are configure only the root to grow:

root.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(0, weight=1)

You have to configure the keyboard frame also to grow if there is extra room, add:

keyboard.grid_columnconfigure(0, weight=1)
keyboard.grid_rowconfigure(0, weight=1)

You have to configure every keyboard row/column with weight=1.

You don't set the keyboard frame to expand

keyboard.grid(row=0,column=0)

change to

keyboard.grid(row=0,column=0, sticky=NSEW)

Working example:

root=Tk()
root.geometry("500x500")
root.grid_columnconfigure(0, weight=1)
root.grid_rowconfigure(0, weight=1)
keyboard=Frame(root,padx=5,pady=5,bg="red")
keyboard.grid(row=0,column=0, sticky=NSEW)

for row, row_buttons in enumerate([['%', '√x', 'x²', '1/x'], ["C", "←", "÷"]]):
    keyboard.grid_rowconfigure(row, weight=1)
    for col, text in enumerate(row_buttons):
        keyboard.grid_columnconfigure(col, weight=1)
        Button(keyboard, padx=5, pady=5, text=text).grid(row=row, column=col, sticky='EWNS')

enter image description here

Tested with Python: 3.5 - TkVersion: 8.6

like image 131
stovfl Avatar answered Sep 24 '22 17:09

stovfl