Sierr Mountain Tech Sierr Mountain Tech - 5 months ago 23
Python Question

Other option for colored scrollbar in tkinter based program?

So after hours or reading post and looking at the documentation for tkinter I have found that on windows machines the color options for tkinter scrollbar will not work due to the scrollbar getting its theme from windows directly. My problem is the color of the default theme really clashes with my program and I am trying to find a solution that does not involve importing a different GUI package such as PyQt (I don't have access to pip at work so this is a problem to get new packages)

Aside from using a separate package can anyone point me towards some documentation on how to write my own sidebar for scrolling through the text widget. All I have found so far that is even close to what I want to be able to do is an answer on this question. (Changing the apperance of a scrollbar in tkinter using ttk styles)

From what I can see the example is only changing the background of the scrollbar and with that I was still unable to use the example. I got an error on one of the lines used to configure the style.

style.configure("My.Horizontal.TScrollbar", *style.configure("Horizontal.TScrollbar"))
TypeError: configure() argument after * must be an iterable, not NoneType


Not sure what to do with this error because I was just following the users example and I am not sure as to why it worked for them but not for me.

What I have tried so far is:

How I create my text box and the scrollbars to go with it.

root.text = Text(root, undo = True)
root.text.grid(row = 0, column = 1, columnspan = 1, rowspan = 1, padx =(5,5), pady =(5,5), sticky = W+E+N+S)
root.text.config(bg = pyFrameColor, fg = "white", font=('times', 16))
root.text.config(wrap=NONE)
vScrollBar = tkinter.Scrollbar(root, command=root.text.yview)
hScrollBar = tkinter.Scrollbar(root, orient = HORIZONTAL, command=root.text.xview)
vScrollBar.grid(row = 0, column = 2, columnspan = 1, rowspan = 1, padx =1, pady =1, sticky = E+N+S)
hScrollBar.grid(row = 1 , column = 1, columnspan = 1, rowspan = 1, padx =1, pady =1, sticky = S+W+E)
root.text['yscrollcommand'] = vScrollBar.set
root.text['xscrollcommand'] = hScrollBar.set


Following the documentation here My attempt below does not appear to do anything on windows machine. As I have read on other post this has to do with the scrollbar getting its theme natively from windows.

vScrollBar.config(bg = mainBGcolor)
vScrollBar['activebackground'] = mainBGcolor
hScrollBar.config(bg = mainBGcolor)
hScrollBar['activebackground'] = mainBGcolor


I guess it all boils down to:

Is it possible to create my own sidebar (with colors I can change per theme) without the need to import other python packages? If so, where should I start or can someone please link me to the documentation as my searches always seam to lead me back to Tkinter scrollbar Information. As these config() options do work for linux they do not work for windows.

Answer Source

not a complete answer, but have you considered creating your own scrollbar lookalike:

import tkinter as tk

class MyScrollbar(tk.Canvas):
    def __init__(self, master, *args, **kwargs):
        if 'width' not in kwargs:
            kwargs['width'] = 10
        if 'bd' not in kwargs:
            kwargs['bd'] = 0
        if 'highlightthickness' not in kwargs:
            kwargs['highlightthickness'] = 0
        self.command = kwargs.pop('command')

        tk.Canvas.__init__(self, master, *args, **kwargs)

        self.elements = {   'button-1':None,
                            'button-2':None,
                            'trough':None,
                            'thumb':None}

        self._oldwidth = 0
        self._oldheight = 0

        self._sb_start = 0
        self._sb_end = 1

        self.bind('<Configure>', self._resize)
        self.tag_bind('button-1', '<Button-1>', self._button_1)
        self.tag_bind('button-2', '<Button-1>', self._button_2)
        self.tag_bind('trough', '<Button-1>', self._trough)

        self._track = False
        self.tag_bind('thumb', '<ButtonPress-1>', self._thumb_press)
        self.tag_bind('thumb', '<ButtonRelease-1>', self._thumb_release)
        self.tag_bind('thumb', '<Leave>', self._thumb_release)

        self.tag_bind('thumb', '<Motion>', self._thumb_track)

    def _sort_kwargs(self, kwargs):
        for key in kwargs:
            if key in ['buttontype', 'buttoncolor', 'troughcolor', 'thumbcolor', 'thumbtype']:
                self._scroll_kwargs[key] = kwargs.pop(key) # add to custom dict and remove from canvas dict
        return kwargs

    def _resize(self, event):
        width = self.winfo_width()
        height = self.winfo_height()
#       print("canvas: (%s, %s)" % (width, height))
        if self.elements['button-1']: # exists
            if self._oldwidth != width:
                self.delete(self.elements['button-1'])
                self.elements['button-1'] = None
            else:
                pass
        if not self.elements['button-1']: # create
            self.elements['button-1'] = self.create_oval((0,0,width, width), fill='#006cd9', outline='#006cd9', tag='button-1')


        if self.elements['button-2']: # exists
            coords = self.coords(self.elements['button-2'])
            if self._oldwidth != width:
                self.delete(self.elements['button-2'])
                self.elements['button-2'] = None
            elif self._oldheight != height:
                self.move(self.elements['button-2'], 0, height-coords[3])
            else:
                pass
        if not self.elements['button-2']: # create
            self.elements['button-2'] = self.create_oval((0,height-width,width, height), fill='#006cd9', outline='#006cd9', tag='button-2')

        if self.elements['trough']: # exists
            coords = self.coords(self.elements['trough'])
            if (self._oldwidth != width) or (self._oldheight != height):
                self.delete(self.elements['trough'])
                self.elements['trough'] = None
            else:
                pass
        if not self.elements['trough']: # create
            self.elements['trough'] = self.create_rectangle((0,int(width/2),width, height-int(width/2)), fill='#00468c', outline='#00468c', tag='trough')

        self.set(self._sb_start, self._sb_end) # hacky way to redraw thumb
        self.tag_raise('thumb') # ensure thumb always on top of trough

        self._oldwidth = width
        self._oldheight = height

    def _button_1(self, event):
        self.command('scroll', -1, 'pages')
        return 'break'

    def _button_2(self, event):
        self.command('scroll', 1, 'pages')
        return 'break'

    def _trough(self, event):
        width = self.winfo_width()
        height = self.winfo_height()

        size = (self._sb_end - self._sb_start) / 1

        thumbrange = height - width
        thumbsize = int(thumbrange * size)
        thumboffset = int(thumbrange * self._sb_start) + int(width/2)

        thumbpos = int(thumbrange * size / 2) + thumboffset
        if event.y < thumbpos:
            self.command('scroll', -1, 'pages')
        elif event.y > thumbpos:
            self.command('scroll', 1, 'pages')
        return 'break'

    def _thumb_press(self, event):
        print("thumb press: (%s, %s)" % (event.x, event.y))
        self._track = True

    def _thumb_release(self, event):
        print("thumb release: (%s, %s)" % (event.x, event.y))
        self._track = False

    def _thumb_track(self, event):
        if self._track:
#           print("*"*30)
            print("thumb: (%s, %s)" % (event.x, event.y))
            width = self.winfo_width()
            height = self.winfo_height()

#           print("window size: (%s, %s)" % (width, height))

            size = (self._sb_end - self._sb_start) / 1
#           print('size: %s' % size)
            thumbrange = height - width
#           print('thumbrange: %s' % thumbrange)
            thumbsize = int(thumbrange * size)
#           print('thumbsize: %s' % thumbsize)
            clickrange = thumbrange - thumbsize
#           print('clickrange: %s' % clickrange)
            thumboffset = int(thumbrange * self._sb_start) + int(width/2)
#           print('thumboffset: %s' % thumboffset)

            thumbpos = int(thumbrange * size / 2) + thumboffset

#           print("mouse point: %s" % event.y)
#           print("thumbpos: %s" % thumbpos)

            point = (event.y - (width/2) - (thumbsize/2)) / clickrange
#           point = (event.y - (width / 2)) / (thumbrange - thumbsize)
#           print(event.y - (width/2))
#           print(point)
            if point < 0:
                point = 0
            elif point > 1:
                point = 1
#           print(point)
            self.command('moveto', point)
            return 'break'

    def set(self, *args):
        oldsize = (self._sb_end - self._sb_start) / 1

        self._sb_start = float(args[0])
        self._sb_end = float(args[1])

        size = (self._sb_end - self._sb_start) / 1

        width = self.winfo_width()
        height = self.winfo_height()

        if oldsize != size:
            self.delete(self.elements['thumb'])
            self.elements['thumb'] = None

        thumbrange = height - width
        thumbsize = int(thumbrange * size)
        thumboffset = int(thumbrange * self._sb_start) + int(width/2)

        if not self.elements['thumb']: # create
            self.elements['thumb'] = self.create_rectangle((0, thumboffset,width, thumbsize+thumboffset), fill='#4ca6ff', outline='#4ca6ff', tag='thumb')
        else: # move
            coords = self.coords(self.elements['thumb'])
            if (thumboffset != coords[1]):
                self.move(self.elements['thumb'], 0, thumboffset-coords[1])
        return 'break'

if __name__ == '__main__':
    root = tk.Tk()
    lb = tk.Listbox(root)
    lb.pack(side='left', fill='both', expand=True)
    for num in range(0,100):
        lb.insert('end', str(num))

    sb = MyScrollbar(root, width=50, command=lb.yview)
    sb.pack(side='right', fill='both', expand=True)

    lb.configure(yscrollcommand=sb.set)
    root.mainloop()

I've left my comments in, and for the life of me i can't seem to get click and dragging the thumb to work correctly, but its a simple scrollbar with the following features:

  • up and down buttons that can be coloured
  • thumb and trough that can be individually coloured
  • tracks movement in scrollable widget
  • thumb resizes with size of scroll area

Edit

I've revised the thumb code to fix the click and drag scrolling:

import tkinter as tk

class MyScrollbar(tk.Canvas):
    def __init__(self, master, *args, **kwargs):
        if 'width' not in kwargs:
            kwargs['width'] = 10
        if 'bd' not in kwargs:
            kwargs['bd'] = 0
        if 'highlightthickness' not in kwargs:
            kwargs['highlightthickness'] = 0
        self.command = kwargs.pop('command')

        tk.Canvas.__init__(self, master, *args, **kwargs)

        self.elements = {   'button-1':None,
                            'button-2':None,
                            'trough':None,
                            'thumb':None}

        self._oldwidth = 0
        self._oldheight = 0

        self._sb_start = 0
        self._sb_end = 1

        self.bind('<Configure>', self._resize)
        self.tag_bind('button-1', '<Button-1>', self._button_1)
        self.tag_bind('button-2', '<Button-1>', self._button_2)
        self.tag_bind('trough', '<Button-1>', self._trough)

        self._track = False
        self.tag_bind('thumb', '<ButtonPress-1>', self._thumb_press)
        self.bind('<ButtonRelease-1>', self._thumb_release)
#       self.bind('<Leave>', self._thumb_release)

        self.bind('<Motion>', self._thumb_track)

    def _sort_kwargs(self, kwargs):
        for key in kwargs:
            if key in ['buttontype', 'buttoncolor', 'troughcolor', 'thumbcolor', 'thumbtype']:
                self._scroll_kwargs[key] = kwargs.pop(key) # add to custom dict and remove from canvas dict
        return kwargs

    def _resize(self, event):
        width = self.winfo_width()
        height = self.winfo_height()
        if self.elements['button-1']: # exists
            if self._oldwidth != width:
                self.delete(self.elements['button-1'])
                self.elements['button-1'] = None
            else:
                pass
        if not self.elements['button-1']: # create
            self.elements['button-1'] = self.create_oval((0,0,width, width), fill='#006cd9', outline='#006cd9', tag='button-1')


        if self.elements['button-2']: # exists
            coords = self.coords(self.elements['button-2'])
            if self._oldwidth != width:
                self.delete(self.elements['button-2'])
                self.elements['button-2'] = None
            elif self._oldheight != height:
                self.move(self.elements['button-2'], 0, height-coords[3])
            else:
                pass
        if not self.elements['button-2']: # create
            self.elements['button-2'] = self.create_oval((0,height-width,width, height), fill='#006cd9', outline='#006cd9', tag='button-2')

        if self.elements['trough']: # exists
            coords = self.coords(self.elements['trough'])
            if (self._oldwidth != width) or (self._oldheight != height):
                self.delete(self.elements['trough'])
                self.elements['trough'] = None
            else:
                pass
        if not self.elements['trough']: # create
            self.elements['trough'] = self.create_rectangle((0,int(width/2),width, height-int(width/2)), fill='#00468c', outline='#00468c', tag='trough')

        self.set(self._sb_start, self._sb_end) # hacky way to redraw thumb
        self.tag_raise('thumb') # ensure thumb always on top of trough

        self._oldwidth = width
        self._oldheight = height

    def _button_1(self, event):
        self.command('scroll', -1, 'pages')
        return 'break'

    def _button_2(self, event):
        self.command('scroll', 1, 'pages')
        return 'break'

    def _trough(self, event):
        width = self.winfo_width()
        height = self.winfo_height()

        size = (self._sb_end - self._sb_start) / 1

        thumbrange = height - width
        thumbsize = int(thumbrange * size)
        thumboffset = int(thumbrange * self._sb_start) + int(width/2)

        thumbpos = int(thumbrange * size / 2) + thumboffset
        if event.y < thumbpos:
            self.command('scroll', -1, 'pages')
        elif event.y > thumbpos:
            self.command('scroll', 1, 'pages')
        return 'break'

    def _thumb_press(self, event):
#       print("thumb press: (%s, %s)" % (event.x, event.y))
        self._track = True

    def _thumb_release(self, event):
#       print("thumb release: (%s, %s)" % (event.x, event.y))
        self._track = False

    def _thumb_track(self, event):
        if self._track:
            width = self.winfo_width()
            height = self.winfo_height()
#           print("window size: (%s, %s)" % (width, height))

            coords = self.coords(self.elements['trough'])
#           print('trough coords: %s' % coords)

            trough_height = coords[3] - coords[1]
#           print('trough height: %s' % trough_height)

            size = (self._sb_end - self._sb_start) / 1
            thumbrange = height - width
            thumbsize = int(thumbrange * size)

            y = max(min(trough_height, event.y - coords[1] - (thumbsize/2)), 0)
#           print('y: %s' % y)

            point = y / trough_height
#           print('point: %s' % point)

            self.command('moveto', point)
            return 'break'

    def set(self, *args):
        oldsize = (self._sb_end - self._sb_start) / 1

        self._sb_start = float(args[0])
        self._sb_end = float(args[1])

        size = (self._sb_end - self._sb_start) / 1

        width = self.winfo_width()
        height = self.winfo_height()

        if oldsize != size:
            self.delete(self.elements['thumb'])
            self.elements['thumb'] = None

        thumbrange = height - width
        thumbsize = int(thumbrange * size)
        thumboffset = int(thumbrange * self._sb_start) + int(width/2)

        if not self.elements['thumb']: # create
            self.elements['thumb'] = self.create_rectangle((0, thumboffset,width, thumbsize+thumboffset), fill='#4ca6ff', outline='#4ca6ff', tag='thumb')
        else: # move
            coords = self.coords(self.elements['thumb'])
            if (thumboffset != coords[1]):
                self.move(self.elements['thumb'], 0, thumboffset-coords[1])
        return 'break'

if __name__ == '__main__':
    root = tk.Tk()
    lb = tk.Listbox(root)
    lb.pack(side='left', fill='both', expand=True)
    for num in range(0,100):
        lb.insert('end', str(num))

    sb = MyScrollbar(root, width=50, command=lb.yview)
    sb.pack(side='right', fill='both', expand=True)

    lb.configure(yscrollcommand=sb.set)
    root.mainloop()

so I've fixed the calculation to work out where the new scroll to position will be, and changed from binding on the thumb tag for the track and release events to binding on the whole canvas, so if the user scrolls quickly the binding will still release when the mouse is let go. I've commented out the binding for when the cursor leaves the canvas so the behavior more closely mimics the existing scroll bar, but can be re enabled if you want it to stop scrolling if the mouse leaves the widget. as for making two classes, now i have the binding fixed for the scrolling I'll look at adding the orient keyword to the config.