[Mono learning] TreeView learning notes in Tree View (1): Example 1

The TreeView in the tree view is estimated to be the most complex control in Gtk #. It uses the well-known MVC pattern to organize data. Although it is a little difficult to get started, you can find that this design is flexible and powerful only after you have mastered it.

My Learning Series is based on Gtk #'s official guide. Of course, it is not just a pure translation of the official guide. If you want to read the official guide directly, visit here:

Http://www.mono-project.com/GtkSharp_TreeView_Tutorial

Treeview is organized according to the MVC mode. It can be divided into three parts. The Model part stores the data to be displayed, the View Part controls how the data is displayed, and the Controller part controls the data for display, and how to filter and sort data.

Model ):

TreeView has two basic data models: ListStore, which is used to store the data organized in the form of a list; TreeStore, it is used to organize data with subnodes (like a tree.

All TreeView data models are implemented through the TreeModel interface.

View ):

A view consists of three parts: TreeViewColumn, CellRenderer, and TreeView form (Widget.

The TreeView form is responsible for data layout by Row and Column, and provides basic interactive operations (such as Row selection ).

TreeViewColumn indicates a column. A TreeView can contain multiple columns.

Each column is composed of at least one CellRenderer. TreeViewColumn is not responsible for Cell rendering, and its rendering is controlled by CellRenderer.

While CellRenderer is an abstract class, which has multiple implementations. We can use the CellRenderer as needed, if the default implementation cannot meet our needs. You can also implement a subclass of CellRenderer to customize our Renderer.

• CellRendererText is used to display text
• CellRendererPixbuf is used to display pixel graphs.
• CellRendererProgress displays a progress bar
• CellRendererCombo
• CellRendererToggle

CellRenderer is separated from TreeViewColumn to make the design more flexible. As described above, a TreeViewColumn can contain multiple CellRenderer, which allows us to add an image and a text in a column at the same time, sometimes this is more beautiful than splitting the image and text into two separate columns.

Controller ):

The Controller allows you to modify (filter or arrange the data to be displayed) transmitted to the view ).

The following is a complete example, although we have not added any data. However, it demonstrates the basic structure of the TreeView.

1 using System;
2 using Gtk;
3
4 public class TreeViewExample
5 {
6 public static void Main (string [] argv)
7 {
8 Application. Init ();
9 new TreeViewExample ();
10 Application. Run ();
11}
12
13 public TreeViewExample ()
14 {
15 // create a Window class and set its minimum size (500,200)
16 Window window = new Window ("TreeView Example ");
17 window. SetSizeRequest (500,200 );
18 window. DeleteEvent + = Delete; // Add Delete event processing
19
20 TreeView tree = new TreeView (); // create a TreeView object
21 // create a new TreeViewColumn with the title Artist
22 TreeViewColumn artistCol = new TreeViewColumn ();
23 artistCol. Title = "Artist ";
24
25 treeviewcolumn songcol = new treeviewcolumn ();
26 songcol. Title = "song ";
27 // Add two columns to the Treeview
28 tree. appendcolumn (artistcol );
29 tree. appendcolumn (songcol );
30
31 // create a liststore model with two string objects (column) stored in each row)
32 liststore musiclist = new liststore (typeof (string), typeof (string ));
33 // set the model for the view Treeview)
34 tree. Model = musicList;
35 window. Add (tree); // Add the view to the form.
36 window. ShowAll (); // display form
37}
38
39 private void Delete (object o, DeleteEventArgs args)
40 {
41 Application. Quit ();
42}
43}

 

After using vim to type all the code, you can compile it.

Mcs-pkg: gtk-sharp-2.0 TreeViewExample. cs

 

Run

Mono TreeViewExample.exe

 

Running result.