如何将背景图像添加到GTK TreeView？

Question

我想要一个带有背景图像的GTK TreeView，如下面的模型所示。

我找到了设置窗口小部件的背景颜色的方法，但似乎没有设置背景pixbuf或其他图像格式的方法。

我正在使用Python和PyGTK，但任何使用GTK绑定的语言都可以接受答案。

带背景图片的gtkTreeView样机：

首次尝试

根据Jong Bor的建议，我尝试了以下方法：

style = treeview.get_style().copy()
img_pixbuf = gtk.gdk.pixbuf_new_from_file(image_filename)
img_pixmap = img_pixbuf.render_pixmap_and_mask()[0]
for state in (gtk.STATE_NORMAL, gtk.STATE_ACTIVE, gtk.STATE_PRELIGHT,
              gtk.STATE_SELECTED, gtk.STATE_INSENSITIVE):
    style.bg_pixmap[state] = img_pixmap
treeview.set_style(style)

起初这似乎没有任何效果，但在我TreeView中选择一个项目后，我发现了以下内容：

选择行时，部分背景'显示'。

（请注意，我正在使用基于我的模型的背景图像，除了它有一些蓝色，用于测试目的）。

然后我激活了GUI的一部分，它清除了TreeView的内容并重新绘制了它，并观察到了这一点：

然而，只要我向TreeView添加内容，背景就会消失，所以我仍然不确定这是否朝着正确的方向发展。

Answer 1

我怀疑由于每个单元格都有一个控制其外观的渲染器，因此您必须以某种方式按单元格修改树形视图。

无论如何，以下代码可能值得一试（未经测试，不完整的代码）：

# Get the treeview's style
style = treeview.get_style().copy()

# Change the bg_pixmap attribute
#   It's an array with one pixbuf for every widget state, so
#   you probably want to replace each of the default 
#   pixmap's with your own image(s)
#   

style.bg_pixmap[0] = your_pixmap
style.bg_pixmap[1] = your_pixmap
style.bg_pixmap[2] = your_pixmap
style.bg_pixmap[3] = your_pixmap
style.bg_pixmap[4] = your_pixmap

# Set the modified style
treeview.set_style(style)

bg_pixmap属性记录在PyGTK reference。

中

我不确定数组位置如何映射到窗口小部件状态。如果它与c ++中的相同，那么它将是：

0 - STATE_NORMAL    
1 - STATE_ACTIVE    
2 - STATE_PRELIGHT  
3 - STATE_SELECTED  
4 - STATE_INSENSITIVE   

Answer 2

使用GTK3和gtkmm可以使用CSS，但图像需要作为文件或资源提供。

这里我假设树视图是子类：

class MyTreeView : public Gtk::TreeView { .. };

为您的treeview设置一个名称，然后为其添加一个CSS样式：

MyTreeView::MyTreeView () {

  set_name ("MyTreeView");
  auto css = Gtk::CssProvider::create ();
  auto sc  = get_style_context ();

  string path_to_img = "my-image.png";

  string css_data =
    ustring::compose (
                    "#MyTreeView  { background-image: url(\"%1\");"
                    "               background-repeat: no-repeat;"
                    "               background-position: 50%% 50%%;"
                    " }\n"
                    "#MyTreeView  .hide_bg { background-image: none; }",
                    path_to_img);

  try {
    css->load_from_data (css_data);
  } catch (Gtk::CssProviderError &e) {
    cout "error: attempted to set background image: " << path_to_img.c_str () << ": " << e.what () << endl;
  }

  auto screen = Gdk::Screen::get_default ();
  sc->add_provider_for_screen (screen, css, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

}

似乎还可以通过添加以下内容将行的背景设置为透明：

background: none;

到CSS。

然后可以使用以下方法隐藏或显示背景图像：

if (!hide) {
  auto sc = get_style_context ();
  if (!sc->has_class ("hide_bg")) sc->add_class ("hide_bg");
} else {
  auto sc = get_style_context ();
  if (sc->has_class ("hide_bg")) sc->remove_class ("hide_bg");
}