The CTkScrollableFrame is an extension of the CTkFrame that adds scrolling functionality. It is particularly useful for creating areas with many widgets when screen space is limited.

In this tutorial, we will explore CTkScrollableFrame, learn how to configure it, and use it to build elegant and organized interfaces.

Creating a Basic CTkScrollableFrame

The CTkScrollableFrame can be created by specifying the parent widget (master), width, height, and other properties.

Basic Example

import customtkinter as ctk

# Initialize the main window
app = ctk.CTk()
app.geometry("400x300")
app.title("Basic Example of CTkScrollableFrame")

# Create a Scrollable Frame
scrollable_frame = ctk.CTkScrollableFrame(master=app, width=300, height=200, border_width=2, fg_color="lightgrey")
scrollable_frame.pack(padx=20, pady=20)

# Adding widgets to the Scrollable Frame
for i in range(20):
    label = ctk.CTkLabel(master=scrollable_frame, text=f"Item {i+1}")
    label.pack(pady=5, padx=10)

# Run the application
app.mainloop()

Explanation

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

  • width and height: Define the visible area dimensions.

  • border_width: Sets the border width in pixels.

  • fg_color: Defines the background color of the frame.

  • Internal widgets can be added to the frame and will be accessible via scrolling.

Structuring CTkScrollableFrame in a Class

Organizing CTkScrollableFrame into a class enhances code reusability and makes complex interfaces more manageable.

Example: Structured Class

import customtkinter as ctk

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

        # Adding widgets to the Scrollable Frame
        for i in range(30):
            label = ctk.CTkLabel(self, text=f"Item {i+1}")
            label.grid(row=i, column=0, padx=10, pady=5)

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

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

        # Adding the Scrollable Frame
        self.my_frame = MyFrame(master=self, width=300, height=200, corner_radius=5, fg_color="lightblue")
        self.my_frame.grid(row=0, column=0, padx=20, pady=20, sticky="nsew")

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

Explanation

  • Widgets such as Label, Button, etc., can be dynamically added to CTkScrollableFrame.

  • Scrolling is automatically managed by CustomTkinter.

Adjusting CTkScrollableFrame to Fill the Screen

We can configure CTkScrollableFrame to occupy the entire available screen space.

Example

import customtkinter as ctk

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

        # Adding widgets to the Frame
        for i in range(50):
            label = ctk.CTkLabel(self, text=f"Item {i+1}")
            label.grid(row=i, column=0, padx=10, pady=5)

# Creating the main application class
class App(ctk.CTk):
    def __init__(self):
        super().__init__()
        self.geometry("400x400")
        self.title("Scrollable Frame Filling the Screen")

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

        # Creating the Scrollable Frame
        self.my_frame = MyFrame(master=self, width=300, height=200, corner_radius=0, fg_color="transparent")
        self.my_frame.grid(row=0, column=0, sticky="nsew")

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

Tip

When using grid_rowconfigure and grid_columnconfigure with weight=1, the frame automatically adjusts when resizing the window.

CTkScrollableFrame Properties

Argument Description
master Parent widget (root, another Frame, or Toplevel).
width Width in pixels (internal dimension).
height Height in pixels (internal dimension).
corner_radius Defines the radius of rounded corners.
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).
scrollbar_fg_color Scrollbar color.
scrollbar_button_color Scrollbar button color.
scrollbar_button_hover_color Hover color for scrollbar button.
label_fg_color Background color of the label.
label_text_color Label text color.
label_text Label text (title of the frame).
label_font Label text font.
orientation Scroll direction: "vertical" (default) or "horizontal".

Useful Methods

.configure(attribute=value, ...)

Updates attributes after creation.

Example:

scrollable_frame.configure(fg_color="lightgreen")

.cget(attribute_name)

Gets the current value of an attribute.

Example:

print(scrollable_frame.cget("fg_color"))

With CTkScrollableFrame, you can organize large amounts of content in an elegant and functional way. Use it to create scrollable areas that adapt to user needs!

Copyright Statement: Unless stated otherwise, all articles are original to this site, please credit the source when sharing.

Article link:http://pybeginners.com/customtkinter/ctkscrollableframe-in-customtkinter/

License Agreement:Attribution-NonCommercial 4.0 International License