Scrollable Frame

[Crussader]

I wanted to know if scrollable frames is possible with ctk and if not is there a reason?
If it is possible could I get a reference on how to achieve this.

[Valenterie]

Hey ! Don't know if you can achieve this with a label, but I know that you can do it with a Listbox, look at that video to see how it's done :
https://www.youtube.com/watch?v=xB68I2fMAuU
Check it from 8:20

[Crussader]

I think there might be a workaround which tried a while back but i dont think i did it properly because it become very buggy so scraped it thinking it wont work

I think the workaround would be using the CTkFrame.canvas and putting it in the command but then i dont know if it will actually work, i will try somethings but if anyone has any prior knowledge please do help

[felipetesc]

In order to create a scrollable region changes could be made inside frame like for example:

1. refactor frame constructor and add new params like a boolean vscroll, another boolean hscroll
2. if hscroll or vscroll are set true, remove some space from total width or total height of the main canvas component
3. if hscroll or vscroll are true, create one new canvas element for each scroll
4. refactor configure and add vscroll and hscroll checks, redraw is true inside the if statement
5. take a closer look to the functionality from slider

Problems to face:

1. How to show or hide subregions of the frame (IDK 'cause I haven't even searched for answers);it seems the worst problem to face (you will need to access all widgets inside the frame - WOW and know how to cut them)
2. Connect scroll functionality to toggle a frame subregion
3. Perhaps a partial draw should be created for every single widget to allow to "cut" and draw subregions of the ui elemements - wow again

[Crussader]

well, i will have to take a closer look on the code itself and see how it works and then try something, because clearly having a scrollable frame in customtkinter will make this lib standout a lot even if it already stands out. Thanks for the answer ill try something out and if i do find out a weird workaround, ill make a pr.

[felipetesc]

Now that ctk has exposed CTkBaseClass, you don't need to modify frame itself, the code below can be executed externally:

You could start with this

from customtkinter import CTkCanvas
from customtkinter import ThemeManager
from customtkinter import DrawEngine
from customtkinter import CTkBaseClass

# we need to know all width and height 
# for every element inside frame so we have
# a way to know the needed height and width
# to calculate how and where to cut regions 
# and parts of every widget when draging
# the scrollbar

class CTkScrollableFrame(CTkBaseClass):
    def __init__(self, *args,
                 bg_color=None,
                 fg_color="default_theme",
                 border_color="default_theme",
                 border_width="default_theme",
                 corner_radius="default_theme",
                 width=200,
                 height=200,
                 vscroll=False,
                 hscroll=False,
                 overwrite_preferred_drawing_method: str = None,
                 **kwargs):

        # transfer basic functionality (bg_color, size, _appearance_mode, scaling) to CTkBaseClass
        super().__init__(*args, bg_color=bg_color, width=width, height=height, **kwargs)

        # color
        self.border_color = ThemeManager.theme["color"]["frame_border"] if border_color == "default_theme" else border_color

        # determine fg_color of frame
        if fg_color == "default_theme":
            if isinstance(self.master, CTkScrollableFrame):
                if self.master.fg_color == ThemeManager.theme["color"]["frame_low"]:
                    self.fg_color = ThemeManager.theme["color"]["frame_high"]
                else:
                    self.fg_color = ThemeManager.theme["color"]["frame_low"]
            else:
                self.fg_color = ThemeManager.theme["color"]["frame_low"]
        else:
            self.fg_color = fg_color

        # shape
        self.corner_radius = ThemeManager.theme["shape"]["frame_corner_radius"] if corner_radius == "default_theme" else corner_radius
        self.border_width = ThemeManager.theme["shape"]["frame_border_width"] if border_width == "default_theme" else border_width

        self.hscroll = hscroll
        self.vscroll = vscroll

        if self.vscroll == True:
            # remove area from width
            # self._current_width need a new value simple subtraction
            pass

        if self.hscroll == True:
            # remove area from height
            # self._current_height need a new value simple subtraction
            pass


        self.canvas = CTkCanvas(master=self,
                                highlightthickness=0,
                                width=self.apply_widget_scaling(self._current_width),
                                height=self.apply_widget_scaling(self._current_height))
        self.canvas.place(x=0, y=0, relwidth=1, relheight=1)
        self.canvas.configure(bg=ThemeManager.single_color(self.bg_color, self._appearance_mode))
        self.draw_engine = DrawEngine(self.canvas)
        self._overwrite_preferred_drawing_method = overwrite_preferred_drawing_method

        # create a vcanvas for  vscroll if self.vscroll == True

        # create a hcanvas for  vscroll self.hscroll == True

        self.bind('<Configure>', self.update_dimensions_event)

        self.draw()

    def winfo_children(self):
        """ winfo_children of CTkFrame without self.canvas widget,
        because it's not a child but part of the CTkFrame itself """

        child_widgets = super().winfo_children()
        try:
            child_widgets.remove(self.canvas)
            return child_widgets
        except ValueError:
            return child_widgets

    def set_scaling(self, *args, **kwargs):
        super().set_scaling(*args, **kwargs)

        self.canvas.configure(width=self.apply_widget_scaling(self._desired_width), height=self.apply_widget_scaling(self._desired_height))
        self.draw()

    def set_dimensions(self, width=None, height=None):
        super().set_dimensions(width, height)

        self.canvas.configure(width=self.apply_widget_scaling(self._desired_width),
                              height=self.apply_widget_scaling(self._desired_height))
        self.draw()

    def draw(self, no_color_updates=False):
        # modify draw for every widget 
        # access to all children
        # try to read only once the total width and height needed
        # perhaps use set theory? 
        # only draw the widgets between the drawable region
        # or since we know all widgets width i.e. we create a table or a dict ?

        requires_recoloring = self.draw_engine.draw_rounded_rect_with_border(self.apply_widget_scaling(self._current_width),
                                                                             self.apply_widget_scaling(self._current_height),
                                                                             self.apply_widget_scaling(self.corner_radius),
                                                                             self.apply_widget_scaling(self.border_width),
                                                                             overwrite_preferred_drawing_method=self._overwrite_preferred_drawing_method)

        if no_color_updates is False or requires_recoloring:
            if self.fg_color is None:
                self.canvas.itemconfig("inner_parts",
                                       fill=ThemeManager.single_color(self.bg_color, self._appearance_mode),
                                       outline=ThemeManager.single_color(self.bg_color, self._appearance_mode))
            else:
                self.canvas.itemconfig("inner_parts",
                                       fill=ThemeManager.single_color(self.fg_color, self._appearance_mode),
                                       outline=ThemeManager.single_color(self.fg_color, self._appearance_mode))

            self.canvas.itemconfig("border_parts",
                                   fill=ThemeManager.single_color(self.border_color, self._appearance_mode),
                                   outline=ThemeManager.single_color(self.border_color, self._appearance_mode))
            self.canvas.configure(bg=ThemeManager.single_color(self.bg_color, self._appearance_mode))

        self.canvas.tag_lower("inner_parts")
        self.canvas.tag_lower("border_parts")

    def configure(self, require_redraw=False, **kwargs):
        # new methods
        if "vscroll" in kwargs:
            self.vscroll = kwargs.pop("vscroll")
            require_redraw = True

        if "hscroll" in kwargs:
            self.hscroll = kwargs.pop("hscroll")
            require_redraw = True

        if "fg_color" in kwargs:
            self.fg_color = kwargs.pop("fg_color")
            require_redraw = True

            # check if CTk widgets are children of the frame and change their bg_color to new frame fg_color
            for child in self.winfo_children():
                if isinstance(child, CTkBaseClass):
                    child.configure(bg_color=self.fg_color)

        if "border_color" in kwargs:
            self.border_color = kwargs.pop("border_color")
            require_redraw = True

        if "corner_radius" in kwargs:
            self.corner_radius = kwargs.pop("corner_radius")
            require_redraw = True

        if "border_width" in kwargs:
            self.border_width = kwargs.pop("border_width")
            require_redraw = True

        if "width" in kwargs:
            self.set_dimensions(width=kwargs.pop("width"))

        if "height" in kwargs:
            self.set_dimensions(height=kwargs.pop("height"))

        super().configure(require_redraw=require_redraw, **kwargs)

[felipetesc]

Another possibility is to simply override tkinter Scrollbar modifying its theme which is ways faster

[Crussader]

But that's not going to achieve what is needed right?

[felipetesc]

We would need to test it. The problem we may find is related if ctk widgets can be drawed correctly. I'll give a try with examples/complex_example. Give me some minutes.

[Crussader]

Alright Thank you

[felipetesc]

In order to use Scrollbar ctkFrame must be changed:
Change the variables so you will now the diffrent issues:
ADD_SCROLLBAR = True
TEST_FRAME_COMPATIBILITY = False
and run the code :

import tkinter
import customtkinter
from tkinter import ttk


ADD_SCROLLBAR = True
TEST_FRAME_COMPATIBILITY = True 

customtkinter.set_appearance_mode("dark")  # Modes: "System" (standard), "Dark", "Light"
customtkinter.set_default_color_theme("blue")  # Themes: "blue" (standard), "green", "dark-blue"

app = customtkinter.CTk()
app.geometry("400x580")
app.title("CustomTkinter simple_example.py")


def button_callback():
    print("Button click", combobox_1.get())


def slider_callback(value):
    progressbar_1.set(value)


frame_1 = customtkinter.CTkFrame(master=app)
frame_1.pack(side=tkinter.LEFT, pady=20, padx=60, fill="both", expand=True)

if ADD_SCROLLBAR == True:
#from https://www.pythontutorial.net/tkinter/tkinter-scrollbar/
    if TEST_FRAME_COMPATIBILITY == True:
        scrollbar = ttk.Scrollbar(app, orient='vertical', command=frame_1.yview)
        scrollbar.pack(side=tkinter.RIGHT, fill="y", expand=True)
        frame_1['yscrollcommand'] = scrollbar.set
    else:
        scrollbar = ttk.Scrollbar(app, orient='vertical')
        scrollbar.pack(side=tkinter.RIGHT, fill="y", expand=True)
        frame_1['yscrollcommand'] = scrollbar.set


label_1 = customtkinter.CTkLabel(master=frame_1, justify=tkinter.LEFT)
label_1.pack(pady=12, padx=10)

progressbar_1 = customtkinter.CTkProgressBar(master=frame_1)
progressbar_1.pack(pady=12, padx=10)

button_1 = customtkinter.CTkButton(master=frame_1, command=button_callback)
button_1.pack(pady=12, padx=10)

slider_1 = customtkinter.CTkSlider(master=frame_1, command=slider_callback, from_=0, to=1)
slider_1.pack(pady=12, padx=10)
slider_1.set(0.5)

entry_1 = customtkinter.CTkEntry(master=frame_1, placeholder_text="CTkEntry")
entry_1.pack(pady=12, padx=10)

optionmenu_1 = customtkinter.CTkOptionMenu(frame_1, values=["Option 1", "Option 2", "Option 42 long long long..."])
optionmenu_1.pack(pady=12, padx=10)
optionmenu_1.set("CTkOptionMenu")

combobox_1 = customtkinter.CTkComboBox(frame_1, values=["Option 1", "Option 2", "Option 42 long long long..."])
combobox_1.pack(pady=12, padx=10)
optionmenu_1.set("CTkComboBox")

checkbox_1 = customtkinter.CTkCheckBox(master=frame_1)
checkbox_1.pack(pady=12, padx=10)

radiobutton_var = tkinter.IntVar(value=1)

radiobutton_1 = customtkinter.CTkRadioButton(master=frame_1, variable=radiobutton_var, value=1)
radiobutton_1.pack(pady=12, padx=10)

radiobutton_2 = customtkinter.CTkRadioButton(master=frame_1, variable=radiobutton_var, value=2)
radiobutton_2.pack(pady=12, padx=10)

switch_1 = customtkinter.CTkSwitch(master=frame_1)
switch_1.pack(pady=12, padx=10)

app.mainloop()

I get:

AttributeError: 'CTkFrame' object has no attribute 'yview'

[felipetesc]

Ask for a new enhaencemnt of CTkFrame, perhaps.

About yview and xview: ctk uses its own child of tkinter canvas, and tkinter canvas is a child of Xview and YView, that means it's possible to add scrollbar:

tkinter canvas line 1997
https://github.com/python/cpython/blob/4bed0db7c222f8df1b4e31107c0305214caf3f56/Lib/tkinter/__init__.py#L1997

tkinter source of YView Class:
https://github.com/python/cpython/blob/4bed0db7c222f8df1b4e31107c0305214caf3f56/Lib/tkinter/__init__.py#L1997

[kelltom]

Would love to see this implemented. Would be a huge QoL upgrade.