How Do I Achieve The Following Tkinter GUI Layout With Either Pack Or Grid?

Here's my current GUI layout for my checkers game: As you can see, it consists of a Menu along the top, a Canvas on the left where I draw the checkerboard, a toolbar (Frame) on th

Solution 1:

For this simple layout you could use grid, pack or both. Neither has a clear advantage in this particular case. Both have the resize behavior you desire.

Off the top of my head I would use a horizontal frame to hold the buttons, and pack the buttons in it. I would then probably use grid to place the toolbar, text widget and scrollbar inside a frame. Pack can be used too, either would work. That takes care of the right side.

If you want the menubar the way it is in the picture (ie: non-standard, only over the chessboard) I would use a similar technique: another frame for the left side with the menubar packed on the top, chessboard on the bottom.

i would then use pack in the main window, with statusbar on the bottom, the chessboard on the left, and then the text area on the right.

However, it's better to use a standard menubar which means you don't need a containing frame for the chessboard/menubar combination

Here's a quick hack at one solution using a standard menubar. This uses the technique of putting most widgets as children of the parent, then using the in_ parameter to put them in a container. This makes it much easier to change the layout later since you don't have to change a whole hierarchy, but only placement of widgets in containers.

import Tkinter as tk
import random

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

        size = 40
        menubar = tk.Menu(self)
        menubar.add_cascade(label="Game")
        menubar.add_cascade(label="Options")
        menubar.add_cascade(label="Help")
        chessboard = tk.Canvas(width=8*size, height=8*size, borderwidth = 0,
                               highlightthickness=0)
        statusbar = tk.Label(self, borderwidth=1, relief="sunken")
        right_panel = tk.Frame(self, borderwidth = 1, relief="sunken")
        scrollbar = tk.Scrollbar(orient="vertical", borderwidth=1)
        # N.B. height is irrelevant; it will be as high as it needs to be
        text = tk.Text(background="white",width=40, height=1, borderwidth=0, yscrollcommand=scrollbar.set)
        scrollbar.config(command=text.yview)

        toolbar = tk.Frame(self)
        for i in range(10):
            b = tk.Button(self, text="B%s" % i, borderwidth=1)
            b.pack(in_=toolbar, side="left")

        self.config(menu=menubar)
        statusbar.pack(side="bottom", fill="x")
        chessboard.pack(side="left", fill="both", expand=False)
        toolbar.grid(in_=right_panel, row=0, column=0, sticky="ew")
        right_panel.pack(side="right", fill="both", expand=True)
        text.grid(in_=right_panel, row=1, column=0, sticky="nsew")
        scrollbar.grid(in_=right_panel, row=1, column=1, sticky="ns")
        right_panel.grid_rowconfigure(1, weight=1)
        right_panel.grid_columnconfigure(0, weight=1)

if __name__ == "__main__":
    app = App()
    app.mainloop()