Treeview scrollbar in Python-Tkinter

When working with hierarchical data in a graphical user interface (GUI), you often need to display the data in a structured and organized manner. The Treeview widget in Python-Tkinter provides a powerful solution for presenting hierarchical data in a user-friendly way. However, as the number of items in a Treeview increases, it becomes crucial to include scroll bars to ensure smooth navigation and usability.

First, make sure Python and Tkinter are installed on your system. Python 3 is recommended for improved compatibility and functionality. If you don't have Tkinter installed, you can easily install it using the Python package manager pip. Open your terminal or command prompt and run the following command −

pip install tk

With Tkinter installed, you will have access to the powerful GUI toolkit needed for building Treeview widgets and adding scrollbars.

Create a tree view

First, we will create a basic Treeview widget. Open your favorite text editor or integrated development environment (IDE) and create a new Python file. We will start by importing the necessary modules -

import tkinter as tk
from tkinter import ttk

The tkinter module provides the foundation for building GUI applications in Python, and the ttk module contains the themed widgets, including the Treeview widget.

Next, let's create a Tkinter root window and a Treeview widget. Add the following code to your Python file −

root = tk.Tk()

# Create a Treeview widget
tree = ttk.Treeview(root)
tree.pack()

Here, we use tk.Tk() to create a root window, which serves as the main window of our application. Then, we create a tree object of the ttk.Treeview class, which represents our Treeview widget. Finally, we use the pack method to display the Treeview widget in the root window.

Add scroll bar

To add a scrollbar to our Treeview, we will use the ttk.Scrollbar widget provided by Tkinter. The scrollbar enables smooth vertical scrolling when the items in the Treeview exceed the available space.

After creating the TreeView widget, add the following code to create the scrollbar and configure the TreeView to use it −

# Create a Scrollbar
scrollbar = ttk.Scrollbar(root, orient="vertical", command=tree.yview)

# Configure the Treeview to use the scrollbar
tree.configure(yscrollcommand=scrollbar.set)

# Place the scrollbar on the right side of the Treeview
scrollbar.pack(side="right", fill="y")

Here, we create a scrollbar object of the ttk.Scrollbar class, specifying the orientation as "vertical" using the orient parameter. The command parameter is set to tree.yview, which associates the scrollbar with the vertical scrolling of the Treeview .

Next, we configure the Treeview to use the scroll bar's set method as its yscrollcommand option. This ensures that the scrollbar controls the vertical scrolling of the Treeview.

Finally, we use the pack method to place the scroll bar on the right side of the Treeview widget, using the fill="y" option to make it fill the entire height of the Treeview.

With these additions, if you now run the Python file, you will see the Treeview widget accompanied by a vertical scrollbar on the right. Scrollbars will allow browsing the Treeview's contents when needed.

Fill tree view

Now that we have the TreeView and scrollbars set up, let's populate the TreeView with some sample data. This way we can observe how the scrollbar behaves when dealing with a large number of items.

To add columns and items to Treeview, modify your Python file as follows −

# Add columns to the Treeview
tree["columns"] = ("Name", "Age")

# Define column headings
tree.heading("#0", text="ID")
tree.heading("Name", text="Name")
tree.heading("Age", text="Age")

# Add items to the Treeview
tree.insert("", "end", text="1", values=("John Doe", "30"))
tree.insert("", "end", text="2", values=("Jane Smith", "25"))
tree.insert("", "end", text="3", values=("Mike Johnson", "35"))

Here, we have added two columns to the Treeview by setting the columns property to a tuple containing the column names: "Name" and "Age". Column #0 represents the default first column, which we will use to display the ID. We use the heading method to set the column header accordingly.

Next, we use the insert method to insert the item into the Treeview. Each item is represented by a unique ID, and the corresponding column has a corresponding value. In this example, we inserted three items whose IDs are 1, 2, and 3, which correspond to name and age respectively.

Stylized scroll bar

While basic scrollbar functionality is essential, you may also want to customize its appearance to match the overall theme of your application. Tkinter provides the option to modify the scroll bar style using the ttk.Style class. Let's explore how to style scroll bars to achieve a more coordinated look.

First, import the ttk module and create an instance of the ttk.Style class −

from tkinter import ttk

# Create a Style object
style = ttk.Style()

Next, we can configure the style of the scroll bar. In this example, we'll change the scrollbar's background color, handle color, and thickness. Add the following code after creating the style object −

# Configure the style for the scrollbar
style.configure("Treeview.Scrollbar",
                background="gray",
                troughcolor="light gray",
                gripcount=0,
                gripcolor="white",
                gripinset=2,
                gripborderwidth=0,
                thickness=10)

Here, we use the configure method of the ttk.Style class to customize the appearance of the scroll bar. The "Treeview.Scrollbar" string refers to the specific style element we want to modify.

在这个例子中，我们将滚动条的背景颜色设置为灰色，槽的颜色设置为浅灰色，手柄的颜色设置为白色。gripcount选项设置为0以隐藏手柄，并使用gripinset和gripborderwidth选项调整手柄的外观。最后，我们将滚动条的厚度设置为10像素。

将自定义样式应用于滚动条，将其与 Treeview 小部件关联。将滚动条创建代码修改如下 −

# Create a Scrollbar with the customized style
scrollbar = ttk.Scrollbar(root, orient="vertical", command=tree.yview, style="Treeview.Scrollbar")

通过将style参数指定为"Treeview.Scrollbar"，滚动条将使用之前定义的自定义样式。

保存Python文件并运行它。现在你应该在Treeview中看到带有更新样式的滚动条。

测试滚动条

保存Python文件并运行。您应该会看到一个带有Treeview小部件和垂直滚动条的窗口。尝试调整窗口大小或向Treeview添加更多项目，以查看滚动条的效果。

结论

在这里，我们探讨了如何在Python-Tkinter中为Treeview小部件添加滚动条。我们首先创建了一个基本的Treeview，然后添加了一个垂直滚动条，以实现对Treeview内容的平滑滚动。我们还介绍了如何样式化滚动条，以使其与应用程序的整体主题相匹配。此外，我们还学习了如何处理滚动条事件，使我们能够对用户交互作出特定的响应。通过按照这些步骤，您可以通过添加可滚动的Treeview来增强您的Python-Tkinter应用程序，为导航分层数据提供高效和用户友好的方式。

The above is the detailed content of Treeview scrollbar in Python-Tkinter. For more information, please follow other related articles on the PHP Chinese website!