Utilizing Tkinter's Grid Manager to Center Buttons But also Fill Entire Frame

Question

I am using Tkinter to design a dialog box. One of the things I want in the box is a set of buttons that doing something. I want to add these to a frame I've created, but am having trouble. I want the frame to show the background color and the buttons to be centered in that frame. Right now, I can only figure out how to do one or the other. If I include the sticky=N+S+E+W in the frame's grid placement, the whole frame is filled by the background color, but the buttons are stuck to the top left. If I don't include the sticky, the buttons are centered beautifully, but you can only see a small portion of the background color.

How can you make both of these things happen?

Thanks so much. Here is my code:

from tkinter import *

def clearA():
    pass

root = Tk()
root.geometry("800x400")

for r in range(2):
    root.rowconfigure(r, weight=1)
for c in range(5):
    root.columnconfigure(c, weight=1)

clearButtonsFrame = Frame(root, bg='#E0EEEE')
clearButtonsFrame.grid(row = 0, column = 0, rowspan = 3, columnspan = 6, sticky=N+E+S+W)


clearButton = Button(clearButtonsFrame, text="Button 1", width=40)
clearButton.grid(row =0, column=0, padx=10)

selectButton = Button(clearButtonsFrame, text="Button 2", width=40)
selectButton.grid(row =0, column=1)


root.mainloop()

Answer 1

from tkinter import *

def clearA():
    pass

root = Tk()
root.geometry("800x400")
root.configure(background='lightblue')  # You can configure background color

for r in range(2):
    root.rowconfigure(r, weight=1)
for c in range(5):
    root.columnconfigure(c, weight=1)

clearButtonsFrame = Frame(root, bg='#E0EEEE')
clearButtonsFrame.grid(row = 0, column = 0, rowspan = 3, columnspan = 6)


clearButton = Button(clearButtonsFrame, text="Button 1", width=40)
clearButton.grid(row =0, column=0, padx=10)

selectButton = Button(clearButtonsFrame, text="Button 2", width=40)
selectButton.grid(row =0, column=1)


root.mainloop()

You can configure background color by using root.configure(background='whatever color'). I've removed the N+E+S+W and just added the configuration line, so that the background color stays and the buttons are centered.

Answer 2

You are maybe complicating things a bit.

The buttons are in their own frame; what you have to do is (1) ensure that the buttons are centered vertically, and placed on each side relative to the center, in that frame. (2) you have to ensure that the frame fills the container it will be placed into, instead of shrinking around its widgets.

I suggest to pack the frame inside root, using the kwargs expand=True , and fill=tk.BOTH to fulfill (2). You could use grid for a more complicated layout, but in the example provided, that is not necessary.

Inside the frame, you can place the buttons relative to the center using anchor=tk.CENTER , halfway in the vertical direction rely=0.5 , and centered on the left half, and the right half in the horizontal direction relx=0.25 and relx=0.75

You can now resize root , and the proportional layout of the buttons will remain the same.

import tkinter as tk

root = tk.Tk()
root.geometry("800x400")

clearButtonsFrame = tk.Frame(root, bg='cyan')
clearButtonsFrame.pack(expand=True, fill='both')

clearButton = tk.Button(clearButtonsFrame, text="Button 1", width=40)
clearButton.place(relx=0.25, rely=0.5, anchor=tk.CENTER)

selectButton = tk.Button(clearButtonsFrame, text="Button 2", width=40)
selectButton.place(relx=0.75, rely=0.5, anchor=tk.CENTER)

root.mainloop()