How to explicitly resize frames in tkinter?

Question

so i'm currently working on a piece of code that'll be integrating into something else later to act as a settings configurator. For the time being, i want to have a window that is laid out like you see below:

where each coloured box is a frame. This window is not resizable and will always be 480x720 pixels. As such, i want the 3 frames im using, sideBar(yellow), container (blue) and static(red) to always remain the same size and fill the window as pictured above with roughly the same ratios (doesn't need to be exact).

The code for this window is below

        self.window = tk.Tk()

        self.windowHeight = 480
        self.windowLength = 720
        self.windowDimensions = str(self.windowLength)+"x"+str(self.windowHeight) #make diemnsions string; dimensions are set as a single string
        self.window.geometry(self.windowDimensions)
        self.window.resizable(width=False, height=False)

        self.container = tk.Frame(self.window, relief="sunken", borderwidth=2) #instantiate new window
        self.sideBar = tk.Frame(self.window,  relief="sunken", borderwidth=2)
        self.static = tk.Frame(self.window, relief="sunken", borderwidth=2)

        self.sideBar.grid_propagate(False)
        self.sideBar.grid(row=0, column=0)
        self.container.grid(row=0,column=1)
        self.static.grid(row=5, column=1)


        self.configuratorObject = configuratorObject 

        audioButton = tk.Button(self.sideBar, text="Audio Page", command=lambda: self.raisePage("audioPage"))
        colourButton = tk.Button(self.sideBar, text="Colours", command=lambda: self.raisePage("coloursPage"))
        saveButton = tk.Button(self.static, text = "Save", state="disabled")
        applyButton = tk.Button(self.static, text = "Apply", state="disabled")
        audioButton.pack()
        colourButton.pack()
        saveButton.pack()
        applyButton.pack()

I've attempted to change the height and width parameters of the grids, but they really don't seem to be doing anything. So how could i go about explicitly defining the layout and sizes of the frames?

Any help is appreciated

Why do you want to explicitly set sizes, rather than letting tkinter do all the work of calculating the best fit? Also, why prevent the user from resizing the window? — Bryan Oakley
– Bryan Oakley, Commented May 28, 2020 at 14:55
@BryanOakley If theres a way of getting tkinter to do it then that'd be great, however i can only seem to get pack() or grid() to make the frames as big as their contents rather than filling the whole window. I'm preventing resizing for ease of use — carbaretta
– carbaretta, Commented May 28, 2020 at 14:57
Preventing resize is the opposite of ease-of-use. If a user's resolution is different than yours, or their font sizes are different, or their vision is worse than yours, they may not be able to use the window. — Bryan Oakley
– Bryan Oakley, Commented May 28, 2020 at 14:59
@BryanOakley i understand that, i'm just looking for a solution to my problem atm thanks — carbaretta
– carbaretta, Commented May 28, 2020 at 15:02

Bryan Oakley · Accepted Answer · 2020-05-28 15:16:38Z

6

In the comments you wrote

If theres a way of getting tkinter to do it then that'd be great

That is definitely the preferred way, over forcing widgets to be a particular size.

We'll start by using pack instead of grid for the three frames. For such a basic layout it requires fewer lines of code than grid.

self.sideBar.pack(side="left", fill="y")
self.static.pack(side="bottom", fill="x")
self.container.pack(side="top", fill="both", expand=True)

Next, add the buttons on the left. This will cause the left frame to shrink in width to fit the buttons. Because we used fill="y", the height will be forced to remain the full height of the window.

audioButton.pack(side="top", fill="x")
colourButton.pack(side="top", fill="x")

Finally, add the buttons on the bottom. Your original code shows them stacked top-to-bottom but your illustration shows them in a single horizontal row. This example adheres to the illustration.

applyButton.pack(side="right", padx=10)
saveButton.pack(side="right", padx=10)

With that we end up with a window that looks like the following, and the proportions and orientation stays exactly the same when you resize the window:

Note: you can do this with grid too, but it requires a few more lines of code to apply weights to the rows and columns. I personally prefer pack when the layout doesn't naturally fit in a grid since it requires fewer lines of code.

edited May 28, 2020 at 15:16

answered May 28, 2020 at 15:10

Bryan Oakley

389k53 gold badges582 silver badges739 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

carbaretta Over a year ago

if i were to want to make the sidebar wider purely for aesthetics, how would i go about doing that? I tried using padx on the buttons, however that leaves a gap between the edge of the button and the frame

Bryan Oakley Over a year ago

@carbaretta If you want wider buttons, one technique is to simply make wider buttons. Button objects have a width attribute. Another solution is to use pack's ipadx option, for example audioButton.pack(side="top", fill="x", ipadx=20).

Collectives™ on Stack Overflow

How to explicitly resize frames in tkinter?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related