. NET language Smobiler development of how to implement form design on mobile phone-practical skills

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.