如何在Tkinter Treeview中更改选定单元格的前景色或背景色？ [英] How to change the foreground or background colour of a selected cell in tkinter treeview?

问题描述

我想在tkinter.treeview中更改选定单元格的前景色或背景色。我该怎么办？

I would like to change the foreground or background colour of a selected cell in tkinter.treeview. How can I do that?

此链接显示了命令更改树视图中所有单元格的颜色，但我无法将其用于单个单元格。

This link showed the command to change the colour of all cells in a treeview but I could not get it to work for a single cell.

ttk.Style().configure("Treeview", background="#383838", 
 foreground="white", fieldbackground="red")

我以前写过测试代码。请使用此代码得出您的解决方案/建议。谢谢。

I had previously written a test code. Please use this code to derive your solution/advice. Thanks.

此链接显示了如何使用标签来更改数据行（即所选项目，而不是单元格）的颜色。

This link showed how tags may be used to change the colour of a row of data, i.e. a selected item, but not a cell.

推荐答案

1. @BryanOkley认为，不能更改单个
   单元格的颜色ttk.Treeview。


2. 所以我使用tk.Canvas（）和tk.Canvas.create_text（）到
   进行了探索，产生了改变
   中选定单元格颜色的错觉ttk.Treeview（）小部件。我很幸运地收到
   j08lue / ttkcalendar.py ，它具有相同的目标，我从中改编了
   。


3. 我的改编脚本（带有相关注释）如下所示。我
   希望它可以帮助其他人考虑这样做。

1. @BryanOkley shared that one cannot change the color of an individual cell in ttk.Treeview.
2. So I explored using tk.Canvas() and tk.Canvas.create_text() to create the illusion of changing the color of a selected cell in a ttk.Treeview() widget. I was fortunate to come by j08lue/ttkcalendar.py which had the same objective and I adapted from it.
3. My adapted script (with the relevant comments) is shown below. I hope it can help others thinking of doing the same.

需要改进：还没有弄清楚为什么我的算法无法在图标/树列和值列中所选树状视图单元格中的值上准确覆盖画布文本框。为此，我求助于使用通过试用和测试确定的软糖值。错误。但是，这不是理想的。 有人可以分享我如何在不使用软糖值的情况下实现canvas_textbox叠加层与Treeview单元格值的精确对齐吗？

Improvement needed: I have not figured out why my algorithm could not accurately overlay the Canvas Textbox over the values in the selected Treeview cells in the icon/tree column and the value columns. To that end, I resorted to using fudge values determined via trial & error. However, this is not ideal. Can someone share how I can achieve accurate alignment of the canvas_textbox overlay with the Treeview cell value without using a fudge value?

import tkinter as tk
import tkinter.ttk as ttk
import tkinter.font as tkFont

class App(tk.Frame):
    def __init__(self, parent, *args, **kwargs):
        ttk.Frame.__init__(self, parent, *args, **kwargs)

        #1. Create Treeview with binding
        self.tree = ttk.Treeview(parent, columns=("size", "modified"))
        self.tree["columns"] = ("date", "time", "loc")

        self.tree.column("#0",   width=100, anchor='center')
        self.tree.column("date", width=100, anchor='center')
        self.tree.column("time", width=100, anchor='center')
        self.tree.column("loc",  width=100, anchor='center')

        self.tree.heading("#0",   text="Name")
        self.tree.heading("date", text="Date")
        self.tree.heading("time", text="Time")
        self.tree.heading("loc",  text="Location")

        self.tree.insert("","end", text = "Grace",
                         values = ("2010-09-23","03:44:53","Garden"))
        self.tree.insert("","end", text = "John" ,
                         values = ("2017-02-05","11:30:23","Airport"))
        self.tree.insert("","end", text = "Betty",
                         values = ("2014-06-25","18:00:00",""))

        self.tree.grid()
        self.tree.bind('<ButtonRelease-1>', self.selectItem)

        #2. Create a Canvas Overlay to show selected Treeview cell 
        sel_bg = '#ecffc4'
        sel_fg = '#05640e'
        self.setup_selection(sel_bg, sel_fg)


    def setup_selection(self, sel_bg, sel_fg):
        self._font = tkFont.Font()

        self._canvas = tk.Canvas(self.tree,
                                 background=sel_bg,
                                 borderwidth=0,
                                 highlightthickness=0)

        self._canvas.text = self._canvas.create_text(0, 0,
                                                     fill=sel_fg,
                                                     anchor='w')

    def selectItem(self, event):
        # Remove Canvas overlay from GUI
        self._canvas.place_forget()

        # Local Parameters
        x, y, widget = event.x, event.y, event.widget
        item = widget.item(widget.focus())
        itemText = item['text']
        itemValues = item['values']
        iid = widget.identify_row(y)
        column = event.widget.identify_column(x)
        print ('\n&&&&&&&& def selectItem(self, event):')
        print ('item = ', item)
        print ('itemText = ', itemText)
        print('itemValues = ',itemValues)
        print ('iid = ', iid)
        print ('column = ', column)

        #Leave method if mouse pointer clicks on Treeview area without data
        if not column or not iid:
            return

        #Leave method if selected item's value is empty
        if not len(itemValues): 
            return

        #Get value of selected Treeview cell
        if column == '#0':
            self.cell_value = itemText
        else:
            self.cell_value = itemValues[int(column[1]) - 1]
        print('column[1] = ',column[1])
        print('self.cell_value = ',self.cell_value)

        #Leave method if selected Treeview cell is empty
        if not self.cell_value: # date is empty
            return

        #Get the bounding box of selected cell, a tuple (x, y, w, h), where
        # x, y are coordinates of the upper left corner of that cell relative
        #      to the widget, and
        # w, h are width and height of the cell in pixels.
        # If the item is not visible, the method returns an empty string.
        bbox = widget.bbox(iid, column)
        print('bbox = ', bbox)
        if not bbox: # item is not visible
            return

        # Update and show selection in Canvas Overlay
        self.show_selection(widget, bbox, column)

        print('Selected Cell Value = ', self.cell_value)


    def show_selection(self, parent, bbox, column):
        """Configure canvas and canvas-textbox for a new selection."""
        print('@@@@ def show_selection(self, parent, bbox, column):')
        x, y, width, height = bbox
        fudgeTreeColumnx = 19 #Determined by trial & error
        fudgeColumnx = 15     #Determined by trial & error

        # Number of pixels of cell value in horizontal direction
        textw = self._font.measure(self.cell_value)
        print('textw = ',textw)

        # Make Canvas size to fit selected cell
        self._canvas.configure(width=width, height=height)

        # Position canvas-textbox in Canvas
        print('self._canvas.coords(self._canvas.text) = ',
              self._canvas.coords(self._canvas.text))
        if column == '#0':
            self._canvas.coords(self._canvas.text,
                                fudgeTreeColumnx,
                                height/2)
        else:
            self._canvas.coords(self._canvas.text,
                                (width-(textw-fudgeColumnx))/2.0,
                                height/2)

        # Update value of canvas-textbox with the value of the selected cell. 
        self._canvas.itemconfigure(self._canvas.text, text=self.cell_value)

        # Overlay Canvas over Treeview cell
        self._canvas.place(in_=parent, x=x, y=y)



if __name__ == "__main__":
    window = tk.Tk()
    app = App(window)
    window.mainloop()

这篇关于如何在Tkinter Treeview中更改选定单元格的前景色或背景色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！