fixed bug when resizing CTkButton and CTkEntry in grid, added auto resizing to CTkSlider and CTkProgressBar, changed Readme

Readme.md

@@ -5,7 +5,7 @@
 
 # CustomTkinter library
 
-![](documentation_images/macOS_light_dark_comparison.jpg)
+![](documentation_images/tkinter_customtkinter_comparison.jpg)
 
 With CustomTkinter you can create modern looking user
 interfaces in python with tkinter. CustomTkinter is a
@@ -17,9 +17,6 @@ CustomTkinter also supports a light and dark theme,
 which can either be set manually or get controlled by
 the system appearance mode.
 
-![](documentation_images/tkinter_customtkinter_comparison.png)
-
-
 ### Installation
 
 To use CustomTkinter, just place the /customtkinter folder from this repository
@@ -105,9 +102,9 @@ there are at the moment. Maybe this is a good reference if you want to
 create your own application with this library.
 (Code: `examples/complex_example.py`)
 
-With macOS dark-mode turned on, it looks like this:
+With the green theme or the blue theme it looks like this:
 
-![](documentation_images/macOS_complex_dark.png)
+![](documentation_images/macOS_light_dark_comparison.jpg)
 
 ### Default color themes
 
@@ -226,12 +223,12 @@ def button_event():
     print("button pressed")
 
 button = customtkinter.CTkButton(master=root_tk,
-                                 text="CTkButton",
-                                 command=button_event,
                                  width=120,
                                  height=32,
                                  border_width=0,
-                                 corner_radius=8)
+                                 corner_radius=8,
+                                 text="CTkButton",
+                                 command=button_event)
 button.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
 ```
 <details>

customtkinter/customtkinter_button.py

@@ -111,7 +111,7 @@ class CTkButton(tkinter.Frame):
                                      highlightthicknes=0,
                                      width=self.width,
                                      height=self.height)
-        self.canvas.grid(row=0, column=0, rowspan=2, columnspan=2)
+        self.canvas.grid(row=1, column=0, rowspan=2, columnspan=2)
 
         # event bindings
         if self.hover is True:
@@ -143,7 +143,7 @@ class CTkButton(tkinter.Frame):
             self.width = event.width
             self.height = event.height
 
-            self.canvas.config(width=self.width, height=self.height)
+            # self.canvas.config(width=self.width, height=self.height)
             self.draw(no_color_updates=True)  # fast drawing without color changes
 
     def detect_color_of_master(self):

customtkinter/customtkinter_entry.py

@@ -114,10 +114,10 @@ class CTkEntry(tkinter.Frame):
     def update_dimensions(self, event):
         # only redraw if dimensions changed (for performance)
         if self.width != event.width or self.height != event.height:
+            # print(event.x, event.width, self.width)
             self.width = event.width
             self.height = event.height
 
-            self.canvas.config(width=self.width, height=self.height)
             self.draw()
 
     def draw(self):

customtkinter/customtkinter_progressbar.py

@@ -68,6 +68,9 @@ class CTkProgressBar(tkinter.Frame):
                                      height=self.height)
         self.canvas.place(x=0, y=0)
 
+        # Each time an item is resized due to pack position mode, the binding Configure is called on the widget
+        self.bind('<Configure>', self.update_dimensions)
+
         self.draw()  # initial draw
 
         if self.variable is not None:
@@ -103,6 +106,14 @@ class CTkProgressBar(tkinter.Frame):
             else:
                 return user_height
 
+    def update_dimensions(self, event):
+        # only redraw if dimensions changed (for performance)
+        if self.width != event.width or self.height != event.height:
+            self.width = event.width
+            self.height = event.height
+
+            self.draw()
+
     def draw(self, no_color_updates=False):
 
         # decide the drawing method

customtkinter/customtkinter_slider.py

@@ -89,6 +89,9 @@ class CTkSlider(tkinter.Frame):
         self.canvas.bind("<Button-1>", self.clicked)
         self.canvas.bind("<B1-Motion>", self.clicked)
 
+        # Each time an item is resized due to pack position mode, the binding Configure is called on the widget
+        self.bind('<Configure>', self.update_dimensions)
+
         self.draw()  # initial draw
 
         if self.variable is not None:
@@ -126,6 +129,14 @@ class CTkSlider(tkinter.Frame):
             else:
                 return user_height
 
+    def update_dimensions(self, event):
+        # only redraw if dimensions changed (for performance)
+        if self.width != event.width or self.height != event.height:
+            self.width = event.width
+            self.height = event.height
+
+            self.draw()
+
     def draw(self, no_color_updates=False):
 
         # decide the drawing method

examples/simple_example.py

@@ -5,7 +5,7 @@ customtkinter.set_appearance_mode("System")  # Modes: "System" (standard), "Dark
 customtkinter.set_default_color_theme("blue")  # Themes: "blue" (standard), "green", "dark-blue"
 
 root_tk = customtkinter.CTk()  # create CTk window like you do with the Tk window (you can also use normal tkinter.Tk window)
-root_tk.geometry("400x300")
+root_tk.geometry("400x340")
 root_tk.title("CustomTkinter Test")
 
 
@@ -21,27 +21,29 @@ def check_box_function():
     print("checkbox_1:", checkbox_1.get())
 
 
-frame_1 = customtkinter.CTkFrame(master=root_tk, width=300, height=260, corner_radius=15)
-frame_1.place(relx=0.5, rely=0.5, anchor=tkinter.CENTER)
+y_padding = 13
+
+frame_1 = customtkinter.CTkFrame(master=root_tk, corner_radius=15)
+frame_1.pack(pady=20, padx=60, fill="both", expand=True)
 
 label_1 = customtkinter.CTkLabel(master=frame_1)
-label_1.place(relx=0.5, rely=0.1, anchor=tkinter.CENTER)
+label_1.pack(pady=y_padding, padx=10)
 
 progressbar_1 = customtkinter.CTkProgressBar(master=frame_1)
-progressbar_1.place(relx=0.5, rely=0.25, anchor=tkinter.CENTER)
+progressbar_1.pack(pady=y_padding, padx=10)
 
 button_1 = customtkinter.CTkButton(master=frame_1, corner_radius=10, command=button_function)
-button_1.place(relx=0.5, rely=0.4, anchor=tkinter.CENTER)
+button_1.pack(pady=y_padding, padx=10)
 # button_1.configure(state="disabled")
 
 slider_1 = customtkinter.CTkSlider(master=frame_1, command=slider_function, from_=0, to=1)
-slider_1.place(relx=0.5, rely=0.55, anchor=tkinter.CENTER)
+slider_1.pack(pady=y_padding, padx=10)
 slider_1.set(0.5)
 
 entry_1 = customtkinter.CTkEntry(master=frame_1)
-entry_1.place(relx=0.5, rely=0.75, anchor=tkinter.CENTER)
+entry_1.pack(pady=y_padding, padx=10)
 
 checkbox_1 = customtkinter.CTkCheckBox(master=frame_1, command=check_box_function)
-checkbox_1.place(relx=0.5, rely=0.9, anchor=tkinter.CENTER)
+checkbox_1.pack(pady=y_padding, padx=10)
 
 root_tk.mainloop()