First word: Smobiler is a development platform that uses. NET language in the VS environment to develop the app, perhaps more convenient than Xamarin
One, the target style
To achieve the effect shown in the above illustration, we need to do the following:
1. Drag a TableView control from the "Smobiler components" on the toolbar to the form interface
2. Modify the properties of the GridView control
A.load event code
Vb:
Private Sub testtableview_load (sender as Object, e as EventArgs) Handles mybase.load Dim mattable as New DataTable MatT Able. Columns.Add ("Mat_desc1", GetType (String)) MatTable.Columns.Add ("Mat_desc2", GetType (String)) MatTable.Columns.Add ( "Mat_desc3", GetType (String)) MatTable.Columns.Add ("Mat_desc4", GetType (String)) MatTable.Rows.Add () mattable.rows ( 0) ("mat_desc1") = "201503" mattable.rows (0) ("mat_desc2") = "mz" mattable.rows (0) ("mat_desc3") = "0" mattable.rows (0) ("M At_desc4 ") =" MatTable.Rows.Add "() mattable.rows (1) (" mat_desc1 ") =" 201504 "Mattable.rows (1) (" mat_desc2 ") =" mz "Ma Ttable.rows (1) ("mat_desc3") = "0" mattable.rows (1) ("mat_desc4") = "" MatTable.Rows.Add () Mattable.rows (2) ("Mat_ DESC1 ") =" 201505 "Mattable.rows (2) (" mat_desc2 ") =" mz "Mattable.rows (2) (" mat_desc3 ") =" 0 "mattable.rows (2) (" Mat_desc4 ") =" MatTable.Rows.Add "() Mattable.rows (3) (" MAT_DESC1 ") =" 201506 "Mattable.rows (3) (" mat_desc2 ") =" mz "MATTABLE.R OWS (3) ("mat_desc3") = "0" mattable. Rows (3) ("mat_desc4") = "Me.tableview1". DataSource = mattable Me.tableview1.DataBind () End Sub C #: private void Testtableview_load (object sender, EventArgs E
) {DataTable mattable = new DataTable ();
MATTABLE.COLUMNS.ADD ("Mat_desc1", typeof (String));
MATTABLE.COLUMNS.ADD ("Mat_desc2", typeof (String));
MATTABLE.COLUMNS.ADD ("Mat_desc3", typeof (String));
MATTABLE.COLUMNS.ADD ("Mat_desc4", typeof (String));
MATTABLE.ROWS.ADD ();
mattable.rows[0]["MAT_DESC1"] = "201503";
mattable.rows[0]["MAT_DESC2"] = "MZ";
mattable.rows[0]["MAT_DESC3"] = "0";
mattable.rows[0]["MAT_DESC4"] = "17";
MATTABLE.ROWS.ADD ();
mattable.rows[1]["MAT_DESC1"] = "201504";
mattable.rows[1]["MAT_DESC2"] = "MZ";
mattable.rows[1]["MAT_DESC3"] = "0";
mattable.rows[1]["MAT_DESC4"] = "17";
MATTABLE.ROWS.ADD ();
mattable.rows[2]["MAT_DESC1"] = "201505";
mattable.rows[2]["MAT_DESC2"] = "MZ";
mattable.rows[2]["MAT_DESC3"] = "0";
mattable.rows[2]["MAT_DESC4"] = "17";
MATTABLE.ROWS.ADD (); mattable.rows[3]["MAT_DESC1"] = "201506";
mattable.rows[3]["MAT_DESC2"] = "MZ";
mattable.rows[3]["MAT_DESC3"] = "0";
mattable.rows[3]["MAT_DESC4"] = "17";
This.tableview1.DataSource = mattable;
This.tableview1.DataBind (); }
B.columnheaderstyle Property
These include the Height property (column heading height), the FontSize property (column header text size), the BackColor property (column header background color), and the ForeColor property (column header text color), as shown in Figure 1;
Set the Height property to "10", as shown in Figure 2;
Set the FontSize property to "5", as shown in Figure 3;
Set the BackColor property to "White", as shown in Figure 4;
Set the ForeColor property to "Black", as shown in Figure 5;
C.columns Property
Open the Collection editor and click the Triangle button next to the Add button to select the type of column you want, including Tableviewlabelcolumn, Tableviewbuttoncolumn, Tableviewtextboxcolumn, Tableviewcheckboxcolumn and Tableviewimagecolumn Five kinds of columns, such as Figure 6, Figure 7;
D.gridlinescolor Property
Set the color of the TableView table line and set the property to black, as shown in Figure 8;
E.location Property
Let the control appear in the appropriate position (0, 122), as shown in Figure 9;
F.rowheight Property
Set the table row height, set the property to "15", as shown in Figure 10;
G.size Property
Sets the width and height of the control, setting the property to (120, 77), as shown in Figure 11;
Second, the mobile phone effect display
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.