Tkinter 中的滚动条

Question

I tried many things to do 2 things :

• center my content (horizontal)
• have a scrollbar right and bottom

Here my code : # encoding: utf8 from tkinter import * from tkinter import ttk

class Program:

    def __init__(self):
        # Tk.__init__(self)
        # Fill the content of the window
        self.window = Tk()
        self.window.geometry("1080x720")

        self.createFrameWithScrollbar()
        self.content()

    def createFrameWithScrollbar(self):
        # Create a Main Frame
        self.mainFrame = Frame(self.window)
        self.mainFrame.pack(fill=BOTH, expand=True)
        # Create a canvas
        self.canvas = Canvas(self.mainFrame)
        self.canvas.pack(side=LEFT, fill=BOTH, expand=True)
        # Add a scrobar
        yScrollbar = ttk.Scrollbar(self.mainFrame, orient=VERTICAL, command=self.canvas.yview)
        yScrollbar.pack(side=RIGHT, fill=Y)
        xScrollbar = ttk.Scrollbar(self.mainFrame, orient=HORIZONTAL, command=self.canvas.xview)
        xScrollbar.pack(side=BOTTOM, fill=X)
        # Configure the canvas
        self.canvas.configure(yscrollcommand=yScrollbar.set)
        self.canvas.configure(xscrollcommand=xScrollbar.set)
        self.canvas.bind('<Configure>', lambda e: self.canvas.configure(scrollregion = self.canvas.bbox("all")))

        self.frame = Frame(self.canvas)
        self.canvas.create_window((0,0), window=self.frame, anchor="nw")

        self.currentFrame = Frame(self.frame)
        self.currentFrame.configure(bg="red")
        self.currentFrame.pack(fill=BOTH, expand=1)

    def content(self):
        label_title = Label(self.currentFrame, text="Title")
        label_title.grid(column=0, row=0, sticky=NSEW)
        label_description = Label(self.currentFrame, text="Title")
        label_description.grid(column=0, row=1, sticky=NSEW)
        label_version = Label(self.currentFrame, text="0.2 beta [Novembre 2020]")
        label_version.grid(column=0, row=2, sticky=NSEW)


# Lauch the program
app = Program()
app.window.mainloop()

So the result is the following :

So any suggestion ?

The bottom sidebar is so small ! I don't know why. Are regarding the text, it's not center at all ;( I want to have it center and changing position if I rezize the window

Thanks a lot

Answer 1

pack works by allocating space along an entire empty side of the master, so the order of when you call pack matters. When you pack the canvas before packing the scrollbar, the canvas takes up the entire left side from top to bottom.

The simple solution is to pack the scrollbars before you pack the canvas.

yScrollbar.pack(side=RIGHT, fill=Y)
xScrollbar.pack(side=BOTTOM, fill=X)
self.canvas.pack(side=LEFT, fill=BOTH, expand=True)

To make the UI look a bit more professional, grid is usually a better choice when laying out scrollbars. With pack , either one edge of the horizontal scrollbar will be below the vertical scrollbar, or the edge of the vertical scrollbar will be directly beside the horizontal one. That, or you have to add a little bit of padding so the scrollbars don't seem to overlap.

When I have a scrollable widget, I almost always put it and the one or two scrollbars together in a frame using grid . Then, I can treat them all as if they were a single widget when adding them to the rest of the UI.

---

In a comment you ask about how to do it in a grid. You simply need to place the widgets in the appropriate rows and columns, and make sure that the row and column with the scrollable widget has a non-zero weight so any extra space is allocated to it.

self.mainFrame.grid_rowconfigure(0, weight=1)
self.mainFrame.grid_columnconfigure(0, weight=1)

yScrollbar.grid(row=0, column=1, sticky="ns")
xScrollbar.grid(row=1, column=0, sticky="ew")
self.canvas.grid(row=0, column=0, sticky="nsew")