Search code examples
python-3.xtkintersliderscrollbarguizero

How do you convert a slider into a scrollbar in guizero/tkinter?


I am trying to make scrollbar using the slider widget in Guizero that works with app window and the box widget. I have come up with a way to use a slider to move objects but it does not change dynamically. I need a way for the slider length and and limit for how far it can scroll/move down base on how many items are not visible. I have tried using tkinter directly scrollbar directly with Guizero but it only display but does not work. I need to use a slider because it is over all the easiest to add to widgets.

What I'm using

What I'm trying to do

  • Use Guizero
  • Change slider length( like you web browser does)
  • change max scroll limit(Base on how much is not visible)

My current code

Based on answer given by Joe Michail tkinter: binding mousewheel to scrollbar

from guizero import *
app=App(title='Guizero - Scrollbar slider',bg='blue',height=500,width=350)
def mouse_wheel(event):
    global count
    # respond to Linux or Windows wheel event
    if event.num == 4 or event.delta == -120:
        if count!=200:
            count += 2
    if event.num == 5 or event.delta == +120:
        if count>=0:
            count -= 2
    slider.value=count
    boxs.tk.place(x=0,y=-count)
count = 0

def slide():
    global count
    count=slider.value
    boxs.tk.place(x=0,y=-count)

# with Windows OS
app.tk.bind("<MouseWheel>", mouse_wheel)
# with Linux OS
app.tk.bind("<Button-4>", mouse_wheel)
app.tk.bind("<Button-5>", mouse_wheel)

#slider end need to change
slider = Slider(app,horizontal=False,width=8,height='fill',start=0, end=200,align='right',command=slide)
slider.tk.config(sliderrelief='flat',
                 sliderlength=(app.height/4),#need to change length dynamically
                 bd=1,
                 borderwidth=1,
                 highlightthickness=0,
                 showvalue=True,
                 fg='white',
                 troughcolor='white',
                 activebackground='orange',
                 bg='blue')

boxs=Box(app,align='right')

for x in range(1,12):    
    Hello_text=Text(boxs, text=" \nHello\n"+str(x), align="top")
    #change the look so you can tell them apart
    if x%2==1:
        Hello_text.bg='white'
    else:
        Hello_text.bg='lightblue'

#default box location
boxs.tk.place(x=0,y=0)

app.display()

Solution

  • You can update the slider range whenever boxs is resized by using the callback assigned to boxs.when_resized:

    def on_boxs_resized(event):
        slider.tk.config(to=event.tk_event.height-app.tk.winfo_height())
    
    boxs.when_resized = on_boxs_resized
    

    Note that you can simplify the two functions, mouse_wheel() and slide() without using global variable count:

    def mouse_wheel(event):
        slider.value += 2 if event.delta < 0 else -2
    
    def slide():
        boxs.tk.place(x=0, y=-slider.value)
    

    Updated: you can update the sliderlength option inside callback assigned to app.when_resized:

    def on_app_resized(event):
        percent = min(app.height/boxs.tk.winfo_height(), 1.0)
        sliderlength = slider.tk.winfo_height() * percent
        slider.tk.config(sliderlength=sliderlength)
    
    app.when_resized = on_app_resized
    
    # update the app
    app.tk.update()
    # adjust sliderlength of slider
    on_app_resized(None)
    
    app.display()