Tkinter multiple frames/'pages': using canvas images

Question

I would like to employ multiple frames in a GUI, where the page switches depending on the button clicked. I know that there's several threads already about this, and I've been looking at this one. However, for my pages, I need different images on canvasses within each of my frames, so that when I raise a different frame, it comes with a new canvas and a new image on that canvas. I've tried a lot but I don't know how to get it to work so that the canvasses appear with their images.

Here's what I have so far, mostly copying from above link:

import tkinter as tk   # python3

TITLE_FONT = ("Helvetica", 18, "bold")

class SampleApp(tk.Tk):

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

        # the container is where we'll stack a bunch of frames
        # on top of each other, then the one we want visible
        # will be raised above the others
        container = tk.Frame(self)
        container.pack(side="top", fill="both", expand=True)
        container.grid_rowconfigure(0, weight=1)
        container.grid_columnconfigure(0, weight=1)

        self.frames = {}
        self.frames["StartPage"] = StartPage(parent=container, controller=self)
        self.frames["PageOne"] = PageOne(parent=container, controller=self)
        self.frames["PageTwo"] = PageTwo(parent=container, controller=self)

        self.frames["StartPage"].grid(row=0, column=0, sticky="nsew")
        self.frames["PageOne"].grid(row=0, column=0, sticky="nsew")
        self.frames["PageTwo"].grid(row=0, column=0, sticky="nsew")

        self.show_frame("StartPage")

    def show_frame(self, page_name):
        '''Show a frame for the given page name'''
        frame = self.frames[page_name]
        frame.tkraise()


class StartPage(tk.Frame):

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller

        self._canvas = tk.Canvas(parent, bg='white', width=900, height=3517, scrollregion=(0, 2800, 100, 800))
        self._photo = tk.PhotoImage(file='images/homegraphic.gif')
        self._canvas.create_image(0, 0, image=self._photo, anchor='nw')

        label = tk.Label(self, text="This is the start page", font=TITLE_FONT)
        label.pack(side="top", fill="x", pady=10)

        button1 = tk.Button(self, text="Go to Page One",
                            command=lambda: controller.show_frame("PageOne"))
        button2 = tk.Button(self, text="Go to Page Two",
                            command=lambda: controller.show_frame("PageTwo"))
        button1.pack()
        button2.pack()


class PageOne(tk.Frame):

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller
        label = tk.Label(self, text="This is page 1", font=TITLE_FONT)
        label.pack(side="top", fill="x", pady=10)
        button = tk.Button(self, text="Go to the start page",
                           command=lambda: controller.show_frame("StartPage"))
        button.pack()


class PageTwo(tk.Frame):

    def __init__(self, parent, controller):
        tk.Frame.__init__(self, parent)
        self.controller = controller
        label = tk.Label(self, text="This is page 2", font=TITLE_FONT)
        label.pack(side="top", fill="x", pady=10)
        button = tk.Button(self, text="Go to the start page",
                           command=lambda: controller.show_frame("StartPage"))
        button.pack()


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

How do I get the canvas image to appear? I've spent a long time trying to figure this out and would appreciate any help!

forgot to add, when I do grid the canvas in class StartPage, the window pops up the right size but shows nothing, just the normal grey tkinter background with the text and buttons at the top. — amrungwaew, May 08 '17 at 18:34
Your canvas needs to use the current frame itself as master, not the parent, just like your Buttons do: `self._canvas = tk.Canvas(self, bg='white', width=900, height=3517, scrollregion=(0, 2800, 100, 800))`. And then you need to use `pack` to lay out, since the StartPage is managed by pack. — Novel, May 08 '17 at 18:48

score 0 · Answer 1 · answered May 08 '17 at 18:49

0

The problem is here:

self._canvas = tk.Canvas(parent, ...)

Everything within a page needs to be a child of the page or one of its descendants.

It needs to be this:

self._canvas = tk.Canvas(self, ...)

answered May 08 '17 at 18:49

Bryan Oakley

370,779
53
539
685

Tkinter multiple frames/'pages': using canvas images

1 Answers1