1

I am trying to keep a horizontal scrollbar to a canvas with an image to view the image which I want to stretch horizontally. When I grid the scrollbar, it displays the content in a different way. Here is the Tkinter code,

import os
import tkinter as tk
import sys
from ttkwidgets import CheckboxTreeview
from PIL import ImageTk, Image
import PIL as pl

basePath = r'C:/'

class App(object):
    def __init__(self, master, path):
        self.nodes = dict()
        frame = tk.Frame(master)

        self.tree = CheckboxTreeview(frame ,height=28)
        self.tree.column("#0", width=300)
        self.tree.heading('#0', text='Select files', anchor='n')
        ysb = tk.Scrollbar(frame, orient='vertical', command=self.tree.yview)
        xsb = tk.Scrollbar(frame, orient='horizontal', command=self.tree.xview)
        self.tree.configure(yscroll=ysb.set, xscroll=xsb.set)

        self.tree.grid()
        ysb.grid(row=0, column=1, sticky='ns')
        xsb.grid(row=1, column=0, sticky='ew')
        frame.grid(row=0,column=0,sticky='w')

        frame2.grid(row=0,column=2,sticky='n')
        canvas = tk.Canvas(master,bg="lightblue",height=300, width=680)
        canvas.grid(row=0, column=2, sticky='s')
        self.img1 = Image.open(("logos/pic.jfif"))
        self.img1 =  self.img1.resize((1000,100))
        self.img1 = ImageTk.PhotoImage(self.img1)
        canvas.create_image(101, 101,anchor='nw',image=self.img1)

        canvasHorizontalScroll = tk.Scrollbar(canvas,orient = "horizontal",command = canvas.xview)
        #canvasHorizontalScroll.grid(row=1, column=0, sticky='ew') #this is where the scrollbar is being placed in the canvas

        abspath = os.path.abspath(path)
        self.insert_node('', abspath, abspath)
        self.tree.bind('<<TreeviewOpen>>', self.open_node)

    def insert_node(self, parent, text, abspath):
        node = self.tree.insert(parent, 'end', text=text, open=False)
        if os.path.isdir(abspath):
            self.nodes[node] = abspath
            self.tree.insert(node, 'end')

   def open_node(self, event):
       node = self.tree.focus()
       abspath = self.nodes.pop(node, None)
       if abspath:
           self.tree.delete(self.tree.get_children(node))
        for p in os.listdir(abspath):
            self.insert_node(node, p, os.path.join(abspath, p))

if __name__ == '__main__':
    root = tk.Tk()
    root.geometry("1000x600")
    global frame2
    frame2 = tk.Frame(root,bg="grey60",height=300,width=680)
    label2 = tk.Label(root,text='frame2',bg="grey60").place(x=340, y=10)
    app = App(root, path=basePath)
    root.mainloop()

And the output is something like this, window without scrollbar placement

But when I uncomment the line to place the scrollbar with grid and then view the result, It is something different like this,

window with scrollbar placement

It pretty much hides the canvas and keeps a small scrollbar at the bottom. I could keep the horizontal scrollbar for the treeview frame but I couldn't do the same for this canvas. I just want a horizontal scrollbar to scroll and view the image in the canvas till the image ends

Dr.Die_OXide
  • 300
  • 2
  • 18
  • 1
    You have created the scrollbar as a child of canvas, so when `.grid(...)` is executed on the scrollbar, it will shrink the canvas to the size of the scrollbar. – acw1668 May 30 '22 at 07:38
  • Ok then, under what parent should I create the scrollbar? – Dr.Die_OXide May 30 '22 at 11:20
  • 1
    You should use the same parent of canvas, i.e. `master`, and put it in `row=1` and `column=2` (one row below the canvas). You need to remove `root.geometry(...)` in order to see the scrollbar. – acw1668 May 30 '22 at 11:46
  • The scrollbar and canvas are now visible, but the scrollbar is behaving in a weird way. The left and right buttons in the scrollbar are working but it seems like it's going infinitely without ending at the picture ending also I could notice touching and dragging the scrollbar is not showing the exact result. I think this is something to do with setting the scrollbar to adjust to the image view(size) or canvas view if the canvas size is adjusted to the image size. – Dr.Die_OXide May 30 '22 at 12:10
  • 1
    It is because you have not configured `xscrollcommand` and `scrollregion` of the canvas. – acw1668 May 30 '22 at 12:16

0 Answers0