example enhancements

examples/example_background_image.py

@@ -8,49 +8,54 @@ customtkinter.set_appearance_mode("dark")
 
 class App(customtkinter.CTk):
 
-    APP_NAME = "CustomTkinter example_background_image.py"
-    WIDTH = 900
-    HEIGHT = 600
+    width = 900
+    height = 600
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
-        self.title(App.APP_NAME)
-        self.geometry(f"{App.WIDTH}x{App.HEIGHT}")
-        self.minsize(App.WIDTH, App.HEIGHT)
-        self.maxsize(App.WIDTH, App.HEIGHT)
+        self.title("CustomTkinter example_background_image.py")
+        self.geometry(f"{self.width}x{self.height}")
         self.resizable(False, False)
 
-        # load image with PIL and convert to PhotoImage
+        # load and create background image
         current_path = os.path.dirname(os.path.realpath(__file__))
         self.bg_image = customtkinter.CTkImage(Image.open(current_path + "/test_images/bg_gradient.jpg"),
-                                               size=(self.WIDTH, self.HEIGHT))
+                                               size=(self.width, self.height))
+        self.bg_image_label = customtkinter.CTkLabel(self, image=self.bg_image)
+        self.bg_image_label.grid(row=0, column=0)
 
-        self.image_label = customtkinter.CTkLabel(master=self, image=self.bg_image)
-        self.image_label.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
+        # create login frame
+        self.login_frame = customtkinter.CTkFrame(self, corner_radius=0)
+        self.login_frame.grid(row=0, column=0, sticky="ns")
+        self.login_label = customtkinter.CTkLabel(self.login_frame, text="CustomTkinter\nLogin Page",
+                                                  font=customtkinter.CTkFont(size=20, weight="bold"))
+        self.login_label.grid(row=0, column=0, padx=30, pady=(150, 15))
+        self.username_entry = customtkinter.CTkEntry(self.login_frame, width=200, placeholder_text="username")
+        self.username_entry.grid(row=1, column=0, padx=30, pady=(15, 15))
+        self.password_entry = customtkinter.CTkEntry(self.login_frame, width=200, show="*", placeholder_text="password")
+        self.password_entry.grid(row=2, column=0, padx=30, pady=(0, 15))
+        self.login_button = customtkinter.CTkButton(self.login_frame, text="Login", command=self.login_event, width=200)
+        self.login_button.grid(row=3, column=0, padx=30, pady=(15, 15))
 
-        self.frame = customtkinter.CTkFrame(master=self,
-                                            width=300,
-                                            height=App.HEIGHT,
-                                            corner_radius=0)
-        self.frame.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
+        # create main frame
+        self.main_frame = customtkinter.CTkFrame(self, corner_radius=0)
+        self.main_frame.grid_columnconfigure(0, weight=1)
+        self.main_label = customtkinter.CTkLabel(self.main_frame, text="CustomTkinter\nMain Page",
+                                                 font=customtkinter.CTkFont(size=20, weight="bold"))
+        self.main_label.grid(row=0, column=0, padx=30, pady=(30, 15))
+        self.back_button = customtkinter.CTkButton(self.main_frame, text="Back", command=self.back_event, width=200)
+        self.back_button.grid(row=1, column=0, padx=30, pady=(15, 15))
 
-        self.label_1 = customtkinter.CTkLabel(master=self.frame, width=200, height=60, corner_radius=6,
-                                              fg_color=("gray70", "gray25"), text="CustomTkinter\ninterface example")
-        self.label_1.place(relx=0.5, rely=0.3, anchor=tkinter.CENTER)
+    def login_event(self):
+        print("Login pressed - username:", self.username_entry.get(), "password:", self.password_entry.get())
 
-        self.entry_1 = customtkinter.CTkEntry(master=self.frame, corner_radius=6, width=200, placeholder_text="username")
-        self.entry_1.place(relx=0.5, rely=0.52, anchor=tkinter.CENTER)
+        self.login_frame.grid_forget()  # remove login frame
+        self.main_frame.grid(row=0, column=0, sticky="nsew", padx=100)  # show main frame
 
-        self.entry_2 = customtkinter.CTkEntry(master=self.frame, corner_radius=6, width=200, show="*", placeholder_text="password")
-        self.entry_2.place(relx=0.5, rely=0.6, anchor=tkinter.CENTER)
-
-        self.button_2 = customtkinter.CTkButton(master=self.frame, text="Login",
-                                                corner_radius=6, command=self.button_event, width=200)
-        self.button_2.place(relx=0.5, rely=0.7, anchor=tkinter.CENTER)
-
-    def button_event(self):
-        print("Login pressed - username:", self.entry_1.get(), "password:", self.entry_2.get())
+    def back_event(self):
+        self.main_frame.grid_forget()  # remove main frame
+        self.login_frame.grid(row=0, column=0, sticky="ns")  # show login frame
 
 
 if __name__ == "__main__":