Changing the selected item colour in a GtkTreeview

Question

I have a dialog which contains a pygtk.treeview for listing tasks by priority. Each row has the background colour set based on that priority, so for example the highest priority has a light red background.

The row selection color is not so easy to change. I can set it using treeview.modify_base(gtk.STATE_SELECTED, "#C4C4C4"), but no colours work well with the colours used to enhance the concept of priority.

I had the idea to change the selection colour to be a slightly darker version of the colour used as the normal row background, so in the example above, that would be a darker red. I tried calling the function above in response to the treeselection's changed signal, and it works, but with heavy flickering.

Another idea was to change the selection to transparent and put a border around it instead, but as far as I can tell, this isn't possible.

1. How can I change the selection colour in the way described above without the flickering?
2. Can I change show the selection by having only a border around the row?

Note: I'm aware that this violates the theme selected by the user. I feel I have a good reason for it. Having the priority indicated by colour makes it instantly recognisable. The selection colour hides this. If you have alternative suggestions, I am open to them, but it needs to retain the ease at which a user can identify the priority.

Answer 1

You can use the method described here – I have tested it briefly and it does the job without flickering. Basically, the trick is to use the "Markup" property of the cell renderer. There's one catch, though: if you want to change the background colour with this method, only the background behind the "actual" text is changed, not the whole row. However, if you want to change the text colour (with <span foreground= ... ), which was actually my intention, it looks ok.

I have the following CellDataFunc (this is C#, but I hope it's still useful):

private void CellDataFunc(Gtk.TreeViewColumn column, Gtk.CellRenderer cell, Gtk.TreeModel model, Gtk.TreeIter iter) {
    Item item = (Item) model.GetValue (iter, 0);
    if(cell is CellRendererText) {
        int id = (int)column.GetData("colId");
        string text = "";
        switch(id) {
            case 0: text = item.Name;  break;
            case 1: text = item.Size; break;
            case 2: text = item.Time.ToString();  break;                
        }
        //(cell as Gtk.CellRendererText).Text = text;
        if(item.Highlight) {
            (cell as Gtk.CellRendererText).Markup = 
                            "<span background=\"red\">"+text+"</span>";
        } else {
            (cell as Gtk.CellRendererText).Markup = text;
        }
    }
}

Answer 2

Not sure what you mean by flickering. A border would require subclassing TreeView.

I'd make the STATE_SELECTED color identical to STATE_NORMAL to disable the built-in highlighting. Then set a data_func on each column and change some color on the cell renderer depending on whether it's in the selection or not.

You're probably already doing this for your priority, so just multiply the color with something to highlight a row.

Answer 3

You could add a separate pixbuf cell (say, the same size as a small icon) to the far left to indicate selection. Selected rows could fill this with a more "solid" (saturated) version of the colour used for the background. For example. if you use a pink background for high priority, you could use red for the selection indicator. Or you could use an icon.

To implement this with the colour filling method:

1. Disable the built-in highlighting as per Tobias' suggestion ("make the STATE_SELECTED color identical to STATE_NORMAL").
2. Create a widget based on gtk.gdk.Pixbuf that allows you to create a solid area of colour, perhaps using the fill method.
3. Use a CellRendererPixbuf for your "selection" cell.

You can then color or uncolour the "selection cell" upon selection changes to indicate which row is selected, or display an icon (eg. a stock symbol).

Note that I haven't implemented this, it's just an idea. It departs significantly from the usual GTK selection indication, so (obviously) use your judgement as to whether it's useable.

Answer 4

The question is outdated, but it is possible for someone else to be useful... For totally disabling selection and making hover effect in the tree: 1. Disable system selection in the tree:

  _treeView.Selection.Mode = SelectionMode.None;

2. Handle MotionNotifyEvent event:

   [ConnectBefore]
   private void TreeViewOnMotionNotifyEvent(object o, MotionNotifyEventArgs args)
   {
       TreePath treePath;
       TreeIter iter;
   
       int x = Convert.ToInt32(args.Event.X);
       int y = Convert.ToInt32(args.Event.Y);
   
       _treeView.GetPathAtPos(x, y, out treePath);
       _treeView.Model.GetIter(out iter, treePath);
   
       BindObject fieldModel = CellUtil.GetModelValue(_treeView.Model, iter, 1) as BindObject;
   
       HoverLine = _vievModel.BindObjectCollection.IndexOf(fieldModel);
   }
   

3. In the SetCellDataFunc method:

   BindObject fieldModel = CellUtil.GetModelValue(treeModel, iter, 1) as BindObject;
   int rowCount = _vievModel.BindObjectCollection.IndexOf(fieldModel);
   
   if (HoverLine == rowCount)
   {
           cellRenderer.CellBackgroundGdk = ThemeUtility.GdkOddSelectionColor; //Your selection color
   }
   else
   {
           cellRenderer.CellBackgroundGdk = ThemeUtility.SystemSelectionColor; //Your system selection color
   }
   ...