Question

I’m trying to set up a scrollable series of Frames, so I’ve nested them into a Canvas. Below, I’ve included some sample code that demonstrates the problem.

However, I have three issues:

1. Frame c doesn’t seem to expand horizontally to fill the canvas.
2. If I use multiple frames c, the canvas scrolls, but if I try to nest my FrameRows into a single frame c, the canvas no longer scrolls.
3. With multiple frames c, the last of the FrameRows is cut off.

Buttons “Left” and “Right” demonstrate the behavior I get when the buttons are not nested in a Canvas.

I’d prefer using the single Frame c and nesting all FrameRows in that, but I would need the scrolling to work properly for that.

import * from Tkinter
import FrameRow
root = Tk()
root.title("Testing")

containerFrame =  Frame(root)
containerFrame.config(bg="red")
containerFrame.pack(side=TOP, fill=BOTH, expand=1)

# Frame showing proper behavior
a = Frame(containerFrame, bg="black")
a.pack(side=TOP, fill=X, expand=0)

btnLeft = Button(a)
btnLeft.config(text="LEFT")
btnLeft.pack(side=LEFT, fill=X, expand=1)

btnRight = Button(a)
btnRight.config(text="RIGHT")
btnRight.pack(side=RIGHT, fill=X, expand=0)


# Canvas
canvas = Canvas(containerFrame)
scrollbar = Scrollbar(containerFrame, orient=VERTICAL)

scrollbar.config(command=canvas.yview)
canvas.config(bg="blue", yscrollcommand=scrollbar.set)
scrollbar.pack(side=RIGHT, fill=Y)
canvas.pack(side=LEFT, fill=BOTH, expand=1)

# Multiple Frames within Canvas    
frameRow = range(30)
c = range(30)
for r in xrange(0,30):
    c[r] = Frame(canvas)
    c[r].config(bg="green")

    frameRow[r] = FrameRow.FrameRow()
    frameRow[r].setFrame(c[r])
    frameRow[r].setRow(r)
    frameRow[r].createRow()

    c[r].pack(side=TOP, fill=X, expand=1)
    canvas.create_window(0, (r+1)*30, window=c[r], anchor="nw")

canvas.config(scrollregion = canvas.bbox(ALL))

# OR
# Single Frame within Canvas
##c = Frame(canvas)
##c.config(bg="green")
##
##frameRow = range(30)
##for r in xrange(0,30):
##    frameRow[r] = FrameRow.FrameRow()
##    frameRow[r].setFrame(c)
##    frameRow[r].setRow(r)
##    frameRow[r].createRow()
##
##c.pack(side=TOP, fill=X, expand=1)
##canvas.create_window(0, 0, window=c, anchor="nw")

root.mainloop()

The FrameRow class is defined as:

from Tkinter import *

class FrameRow():
    _frame = "Default"
    _row = 0

    def setFrame(self, frame):
        self._frame = frame

    def setRow(self, row):
        self._row = row

    def createRow(self):
        self.frameRow = Frame(self._frame)
        self.frameRow.config(bg="yellow")
        self.frameRow.pack(side=TOP, fill=X, expand=1)

        self.btn1 = Button(self.frameRow)
        self.btn1.config(text="Button "+str(self._row)+"A")
        self.btn1.pack(side=LEFT, fill=X, expand=1)

        self.btn2 = Button(self.frameRow)
        self.btn2.config(text="Button "+str(self._row)+"B")
        self.btn2.pack(side=RIGHT, anchor=E, fill=X, expand=0)

Is there something I’m missing in getting Frame(s) c to expand to the width of the canvas?

Am I doing something wrong with the scrolling and the single Frame c?

Are there any decent tutorials or examples that show how I should be doing this?

Thanks!

Answer 1

It looks like you are both packing the window in a canvas and creating a window object. I honestly have never done that but I don’t think the packing does any good.

When you create a widget that is an object in a canvas, it will not expand to fill the canvas. What you’ll need to do is create a binding to the <Configure> event of the canvas. This event will fire whenever the canvas changes size (and a few other times). You can then resize each frame to fit the width of the canvas.

Since you say you prefer using a single frame where you nest the other rows inside it, that is probably the easiest solution. But again, this single frame won’t grow or shrink to fit the canvas, you’ll have to do that with a <Configure> binding.

Make sure that you configure the scrollregion of the canvas after adding the frame to the canvas using create_window. It looks like you’re forgetting to do that in the commented-out code, and that would definitely prevent the canvas from scrolling.