CTkFrame is one of the fundamental components in CustomTkinter, used to create organized areas in the graphical interface. It is particularly useful for grouping and structuring widgets like buttons, labels, and entry fields.

In this tutorial, we will explore CTkFrame, learn how to configure it and use it in classes, and apply practical examples.

Creating a Basic CTkFrame

A CTkFrame can be created by specifying the parent widget (master) and other attributes such as width, height, and colors.

Basic Example

import customtkinter as ctk

# Initializing the main window
root_tk = ctk.CTk()
root_tk.geometry("400x300")
root_tk.title("Basic Example of CTkFrame")

# Creating a Frame
frame = ctk.CTkFrame(master=root_tk, width=200, height=200, border_width=2, fg_color="lightblue", border_color="darkblue")
frame.pack(padx=20, pady=20)

# Adding widgets to the Frame
label = ctk.CTkLabel(master=frame, text="Text inside Frame")
label.pack(pady=10)

button = ctk.CTkButton(master=frame, text="Click Here")
button.pack(pady=10)

# Running the application
root_tk.mainloop()

Explanation

  • master: Defines the parent widget (in this case, root_tk).

  • width & height: Define the width and height of the Frame.

  • border_width: Adds a border to the Frame.

  • fg_color: Sets the background color of the Frame.

  • border_color: Defines the color of the border.

Structuring CTkFrame in a Class

Organizing the code into classes improves readability and facilitates reuse.

Example: Frame Structured in a Class

import customtkinter as ctk

# Creating a class for the Frame
class MyFrame(ctk.CTkFrame):
    def __init__(self, master, **kwargs):
        super().__init__(master, **kwargs)

        # Adding widgets to the Frame
        self.label = ctk.CTkLabel(self, text="Label inside Frame")
        self.label.grid(row=0, column=0, padx=10, pady=10)

        self.button = ctk.CTkButton(self, text="Click Here")
        self.button.grid(row=1, column=0, padx=10, pady=10)

# Creating the main application class
class App(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.geometry("400x300")
        self.title("Example with Class")

        # Configuring the grid
        self.grid_rowconfigure(0, weight=1)
        self.grid_columnconfigure(0, weight=1)

        # Adding the Frame to the application
        self.my_frame = MyFrame(master=self, fg_color="lightgrey", border_width=2, border_color="black")
        self.my_frame.grid(row=0, column=0, padx=20, pady=20, sticky="nsew")

# Running the application
app = App()
app.mainloop()

Benefits of Using Classes

  • Organizes related widgets inside a single Frame.

  • Enables code reuse in different parts of the application.

CTkFrame Arguments

Argument Description
master Parent widget (root, another Frame, or Toplevel).
width Width in pixels.
height Height in pixels.
border_width Border width in pixels.
fg_color Background color (tuple for light/dark mode or a single color).
border_color Border color (tuple for light/dark mode or a single color).

CTkFrame Methods

.configure(attribute=value, ...)

Updates Frame attributes after its creation.

Example:

frame.configure(fg_color="lightgreen")

.cget(attribute_name)

Retrieves the current value of an attribute.

Example:

print(frame.cget("fg_color"))

.bind(sequence=None, command=None, add=None)

Associates events with the Frame, such as clicks or mouse movements.

Example:

frame.bind("<Button-1>", lambda e: print("Frame clicked!"))

Tips for Using CTkFrame

  • Use grid to position Frames in more structured layouts.

  • Customize colors and borders to highlight specific sections.

  • Combine Frames with other widgets like buttons and labels to create complete interfaces.

With CTkFrame, you can organize your interface elegantly and functionally. Explore the possibilities and create amazing applications!