Ndtyjky

I have attempted to create a tkinter GUI which can overlap each page Page 1, Page 2, Page 3. I am struggling in two places:

Using the class rather than the method so I have commented them out, but what I have tried at is putting the class in brackets within the command i.e. command=(mainPage) but this gives the error:

builtins.NameError: name 'mainPage' is not defined

Second place I am struggling is not being able to overlap each class.

My code is as follows:

from tkinter import *



class testOverlap(Frame):



    def __init__(self, root):

        Frame.__init__(self, root)

        self.root = root



        self.topButtons()



        self.pageOne()

        self.pageTwo()

        self.pageThree()



    def topButtons(self):



        self.firstPage = Button(self.root, text="Go to Page 1", background="WHITE", height = 2, width = 16, command= self.pageOne())

        self.firstPage.place(x=0, y=0)



        self.secondPage = Button(self.root, text="Go to Page 2", background="WHITE",height = 2, width = 16, command= self.pageTwo())

        self.secondPage.place(x=121, y=0)



        self.thirdPage = Button(self.root, text="Go to Page 3", background="WHITE",height = 2, width = 17, command= self.pageThree())

        self.thirdPage.place(x=242, y=0)



#class mainPage(Frame):

    def pageOne(self):

        self.Label1 = Label(self.root, text=" First Page ", height = 20, width = 52, background="Green")

        self.Label1.place(x=0, y=40)



#class middlePage(Frame):

    def pageTwo(self):

        self.Label2 = Label(self.root, text=" Second Page ", height = 20, width = 52, background="Blue")

        self.Label2.place(x=0, y=40)



#class finalPage(Frame):

    def pageThree(self):

        self.Label3 = Label(self.root, text=" Third Page ", height = 20, width = 52, background="Red")

        self.Label3.place(x=0, y=40)



def main():

    root = Tk()

    root.title("Tk")

    root.geometry('370x340')

    app = testOverlap(root)

    root.mainloop()





if __name__ == '__main__':

    main()

Creating a Frame (page) and raising it (bringing it to the top to view it) are 2 completely different operations. To create it you need to use a layout like grid on the class instance, and to raise it you need to use the tkraise method of the instance. We usually do this by dedicating a class to do nothing but handle all the pages. Try this:

from tkinter import *



class Controller(Frame):

    def __init__(self, root):

        Frame.__init__(self, root)



        self.pageOne = mainPage(self)

        self.pageOne.grid(row=0, column=0, sticky='nsew')

        self.pageTwo = middlePage(self)

        self.pageTwo.grid(row=0, column=0, sticky='nsew')

        self.pageThree = finalPage(self)

        self.pageThree.grid(row=0, column=0, sticky='nsew')

        self.menu = testOverlap(self)

        self.menu.grid(row=0, column=0, sticky='nsew')



        self.menu.tkraise() # show the testOverlap Frame now



class testOverlap(Frame):

    def __init__(self, root):

        Frame.__init__(self, root)

        self.topButtons()



    def topButtons(self):

        self.firstPage = Button(self, text="Go to Page 1", background="WHITE", height = 2, width = 16, command= self.master.pageOne.tkraise)

        self.firstPage.grid(row=0, column=0)



        self.secondPage = Button(self, text="Go to Page 2", background="WHITE",height = 2, width = 16, command= self.master.pageTwo.tkraise)

        self.secondPage.grid(row=0, column=1)



        self.thirdPage = Button(self, text="Go to Page 3", background="WHITE",height = 2, width = 17, command= self.master.pageThree.tkraise)

        self.thirdPage.grid(row=0, column=2)



class mainPage(Frame):

    def __init__(self, root):

        Frame.__init__(self, root)

        self.Label1 = Label(self, text=" First Page ", height = 20, width = 52, background="Green")

        self.Label1.grid()



class middlePage(Frame):

    def __init__(self, root):

        Frame.__init__(self, root)

        self.Label2 = Label(self, text=" Second Page ", height = 20, width = 52, background="Blue")

        self.Label2.grid()



class finalPage(Frame):

    def __init__(self, root):

        Frame.__init__(self, root)

        self.Label3 = Label(self, text=" Third Page ", height = 20, width = 52, background="Red")

        self.Label3.grid()



def main():

    root = Tk()

    root.title("Tk")

    root.geometry('370x340')

    app = Controller(root)

    app.pack(expand=True, fill=BOTH)

    root.mainloop()



if __name__ == '__main__':

    main()

Note also I removed your use of place. I recommend you stay away from place if you can, use grid or pack instead. Using place requires specifying the exact size in a lot of other places, and grid or pack can handle that for you.