home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Python

วิธีเปลี่ยนสีพื้นหลังของ Treeview ใน Tkinter

Widget Treeview ใน Tkinter ถูกออกแบบมาเพื่อแสดงข้อมูลในโครงสร้างแบบลำดับชั้น (Hierarchical) สามารถนำมาใช้แสดงไดเรกทอรี ไฟล์ หรือข้อมูลที่มีความสัมพันธ์แบบผู้ปกครอง-ลูกได้อย่างมีประสิทธิภาพ

การเปลี่ยนสีพื้นหลัง Treeview

Treeview widget มีคุณสมบัติและแอตทริบิวต์มากมายที่ช่วยให้เราสามารถปรับแต่งรูปลักษณ์ได้ ในการเปลี่ยนสีพื้นหลัง สามารถกำหนดคุณสมบัติ background (หรือ bg) ในตัวสร้าง (Constructor) หรือใช้ ttk.Style เพื่อกำหนดธีมและสไตล์ได้อย่างยืดหยุ่นกว่า

ตัวอย่างโค้ด

import tkinter as tk
from tkinter import ttk

# สร้างหน้าต่างหลัก
root = tk.Tk()
root.title("Treeview Background Color Demo")
root.geometry("600x400")

# สร้าง Style สำหรับปรับแต่ง Treeview
style = ttk.Style()
style.theme_use('clam')  # ใช้ธีม 'clam' ที่รองรับการปรับสีได้ดี

# กำหนดสีพื้นหลังและสีข้อความสำหรับ Treeview
style.configure("Custom.Treeview",
                background="#2b2b2b",      # สีพื้นหลัง
                foreground="white",         # สีข้อความ
                fieldbackground="#2b2b2b",  # สีพื้นหลังพื้นที่ข้อมูล
                rowheight=25)               # ความสูงของแถว

# กำหนดสีเมื่อเลือกแถว
style.map("Custom.Treeview",
          background=[('selected', '#0078d7')],
          foreground=[('selected', 'white')])

# สร้าง Treeview widget
tree = ttk.Treeview(root, style="Custom.Treeview", columns=("Name", "Type", "Size"), show="headings")

# กำหนดหัวคอลัมน์
tree.heading("Name", text="ชื่อไฟล์/โฟลเดอร์")
tree.heading("Type", text="ประเภท")
tree.heading("Size", text="ขนาด")

# ปรับความกว้างคอลัมน์
tree.column("Name", width=250, anchor="w")
tree.column("Type", width=100, anchor="center")
tree.column("Size", width=100, anchor="e")

# เพิ่มข้อมูลตัวอย่าง
sample_data = [
    ("Documents", "Folder", "—"),
    ("report.pdf", "PDF", "2.4 MB"),
    ("image.png", "Image", "1.8 MB"),
    ("data.xlsx", "Excel", "3.1 MB"),
    ("script.py", "Python", "12 KB"),
    ("README.md", "Markdown", "4 KB"),
]

for item in sample_data:
    tree.insert("", "end", values=item)

# เพิ่ม Scrollbar
scrollbar = ttk.Scrollbar(root, orient="vertical", command=tree.yview)
tree.configure(yscrollcommand=scrollbar.set)

# จัดวาง Layout
tree.pack(side="left", fill="both", expand=True, padx=10, pady=10)
scrollbar.pack(side="right", fill="y", pady=10)

root.mainloop()

ผลลัพธ์

เมื่อรันโค้ดจะแสดงหน้าต่างที่มี Treeview พร้อมสีพื้นหลังสีเข้ม (Dark Theme) พร้อมข้อมูลตัวอย่าง และสามารถเลื่อนดูได้ด้วย Scrollbar

คำแนะนำเพิ่มเติม

  • ใช้ ttk.Style() แทนการกำหนดใน Constructor โดยตรง เพื่อความยืดหยุ่นและรองรับธีมสมัยใหม่
  • คุณสมบัติ fieldbackground ควบคุมสีพื้นหลังพื้นที่แสดงข้อมูล (Data Area)
  • ใช้ style.map() เพื่อกำหนดสีเมื่อมีการโฮเวอร์หรือเลือกแถว (Selection)
  • ธีม 'clam', 'alt', หรือ 'default' รองรับการปรับสีได้ดีกว่าธีมระบบปฏิบัติการ