饿了么-搜索页面如下图所示：
完整代码见git ：https://github.com/comsmobiler/blogscode
创建窗体
创建一个smobilerform ，文件名设置elmsearch， 将窗体的layout设置relative，再设置窗体的statusbar属性
并在窗体中拖入panel和listview，panel.height 设置40，listview.flex设置1 ，listview的模板类设置成listlayout
实现搜索框
将上图的panel1.layout设置relative，panel1.direction设置row，panel1.padding设置(6,6,6,6),panel1.size设置为(0,40)。
在panel1中拖入imagebutton1，
imagebutton1.imagttype设置fonticon，
imagebutton1.resourceid设置” angle-left” ,
imagebutton1.size设置(27,0)。
在imagebutton1的点击事件中写this.close();
接着在panel1中拖入panel2，
panel2.borderradius设置12，
panel2.direction设置row，
panel2.itemalign设置center，
panel2.layout设置relative，
panel2.touchable设置true，
panel2.backcolor设置whitesmoke，
panel2.magrin设置(6,0,0,0),
panel2.flex设置1 。
在panel2 中加入fonticon控件，
fonticon1.location设置(6,0),
fonticon1.size设置(15,15),
fonticon1.forecolor设置gainsboro，
fonticon1.resource设置”search”
在panel2中继续加入label控件，label控件的name设置keylab，
keylab.flex设置1
keylab.forecolor设置gainsboro
keylab.location设置（6,0,0,0）
keylab.margin设置（6,0,0,0）
keylab.padding设置(4,0,0,0)
keylab.text设置”曼玲粥店”
创建smobilerusercontrol
创建一个smobilerusercontrol，文件名设置elmlayout， 将elmlayout.layout设置relative，backcolor s设置white，flex设置1
上图panel1 用来实现搜索框，步骤和前面一样，只是elmlayout中的keylab改成textbox控件，最后在elmlayout中拖入两个panel，分别命名为hispanel和dispanel，这两个panel的size设置(0,0)。这样设计器部分就完成了。
代码
elmsearch.cs
1 using system;
2 using system.collections.generic;
3 using system.data;
4 using system.linq;
5 using system.text;
6 using selectdemo.layouts;
7 using smobiler.core;
8 using smobiler.core.controls;
9
10 namespace selectdemo
11 {
12 partial class elmsearch : smobiler.core.controls.mobileform
13 {
14 public elmsearch() : base()
15 {
16 //this call is required by the smobilerform.
17 initializecomponent();
18 }
19
20 private dbclass dbclass = new dbclass();//dbclass 数据库查询类
21 private void panel2_press(object sender, eventargs e)
22 {
23 showelmlayout();
24 }
25 private void showelmlayout()
26 {
27 //筛选项数据
28 selectdata d1 = new selectdata()
29 {
30 title = "历史搜索",
31 items = new string[] { "粥" },
32 ishow = true
33 };
34 selectdata d2 = new selectdata()
35 {
36 title = "历史搜索",
37 items = new string[] { "超级发布30减20起", "小恒水饺", "早餐", "油条", "炸鸡" ,"包子","皮蛋瘦肉粥"},
38 ishow = false
39 };
40
41 list<selectdata> sds = new list<selectdata>();
42 sds.add(d1);
43 sds.add(d2);
44
45 // 实例化elmlayout
46 elmlayout uc = new elmlayout(sds, keylab.text);
47 dialogoptions footerdialogoptions;
48 footerdialogoptions = new dialogoptions(layoutjustifyalign.flexstart, system.drawing.color.transparent, smobiler.core.controls.padding.empty, true);
49 //在窗体中弹出elmlayout
50 showdialog(uc, footerdialogoptions, (obj, args) =>
51 {
52 if (uc.showresult == showresult.yes)
53 {
54 keylab.text = uc.currentkey;
55 datatable dt = dbclass.dbconnectandquert(uc.querystr);
56 listview1.rows.clear();
57 listview1.datasource = dt;
58 listview1.databind();
59 }
60 });
61
62 }
63 private void imagebutton1_press(object sender, eventargs e)
64 {
65 this.close();
66 }
67 }
68 }
elmlayout.cs
1 using system;
2 using system.collections.generic;
3 using system.linq;
4 using system.text;
5 using smobiler.core;
6 using smobiler.core.controls;
7
8 namespace selectdemo.layouts
9 {
10 ////toolboxitem用于控制是否添加自定义控件到工具箱，true添加，false不添加
11 //[system.componentmodel.toolboxitem(true)]
12 partial class elmlayout : smobiler.core.controls.mobileusercontrol
13 {
14 public elmlayout() : base()
15 {
16 //this call is required by the smobilerusercontrol.
17 initializecomponent();
18 }
19 public elmlayout(list<selectdata> selectdatas, string defalutstr) : base()
20 {
21 //this call is required by the smobilerusercontrol.
22 initializecomponent();
23 gethhistory(selectdatas, defalutstr);
24 }
25 public string currentkey;
26 public string querystr;
27
28 private void closedialog_press(object sender, eventargs e)
29 {
30 this.showresult = showresult.no;
31 this.close();
32
33 }
34 private void gethhistory(list<selectdata> selectdatas, string defaultstr)
35 {
36 this.keylab.text = defaultstr;
37 foreach (selectdata data in selectdatas)
38 {
39 //该label用于显示“历史搜索”文字
40 label label1 = new label()
41 {
42 text = data.title,
43 flex = 1,
44 fontsize = 15,
45 size = new system.drawing.size(0, 25),
46 bold=true,
47 forecolor=system.drawing.color.gray
48 };
49
50 panel p1 = new panel()
51 {
52 layout = layoutposition.relative,
53 direction = layoutdirection.row,
54 size = new system.drawing.size(0, 0),
55 padding = new padding(12, 0, 12, 0)
56 };
57
58 p1.controls.add(label1);
59
60 panel p2 = new panel()
61 {
62 layout = layoutposition.relative,
63 direction = layoutdirection.row,
64 size = new system.drawing.size(0, 0),
65 padding = new padding(12, 0, 12, 0),
66 wrap = layoutwrap.wrap
67 };
68 if (data.ishow == true)
69 {
70 //添加“历史搜索”后的删除按钮
71 imagebutton imgbtn = new imagebutton()
72 {
73 imagetype = imageex.imagestyle.fonticon,
74 resourceid = "trash-o",
75 iconcolor = system.drawing.color.silver,
76 size = new system.drawing.size(25, 25)
77 };
78 imgbtn.press += this.deletebuttonpress;
79 p1.controls.add(imgbtn);
80
81 for (int i = 0; i < data.items.length; i++)
82 {
83 button btn = new button()
84 {
85 text = data.items[i],
86 backcolor = system.drawing.color.whitesmoke,
87 forecolor = system.drawing.color.gray,
88 size = new system.drawing.size(0, 0),
89 padding = new padding(12,8,12,8),
90 borderradius = 4,
91 margin = new margin(0, 4, 12, 4)
92 };
93 btn.press += this.selectbuttonpress;
94 p2.controls.add(btn);
95 }
96 hispanel.controls.add(p1);
97 hispanel.controls.add(p2);
98 }
99 else
100 {
101 //原型上“超级发布30减20起 按钮”
102 button spbtn = new button()
103 {
104 text = data.items[0],
105 backcolor = system.drawing.color.aliceblue,
106 forecolor = system.drawing.color.deepskyblue,
107 size = new system.drawing.size(0, 0),
108 padding = new padding(12,8,12,8),
109 borderradius = 4,
110 margin = new margin(0,4, 12, 4)
111 };
112 spbtn.press += this.selectbuttonpress;
113 p2.controls.add(spbtn);
114
115 for (int i = 1; i < data.items.length; i++)
116 {
117 button btn = new button()
118 {
119 text = data.items[i],
120 backcolor = system.drawing.color.whitesmoke,
121 forecolor = system.drawing.color.gray,
122 size = new system.drawing.size(0, 0),
123 padding = new padding(12,8,12,8),
124 borderradius = 4,
125 margin = new margin(0, 4, 12, 4)
126 };
127 btn.press += this.selectbuttonpress;
128 p2.controls.add(btn);
129 }
130 dispanel.controls.add(p1);
131 dispanel.controls.add(p2);
132 }
133
134 }
135 }
136
137 /// <summary>
138 /// 清空历史搜索记录
139 /// </summary>
140 /// <param name="sender"></param>
141 /// <param name="e"></param>
142 private void deletebuttonpress(object sender, eventargs e)
143 {
144 hispanel.controls.clear();
145 }
146 /// <summary>
147 /// 搜索内容查询
148 /// </summary>
149 /// <param name="sender"></param>
150 /// <param name="e"></param>
151 private void selectbuttonpress(object sender, eventargs e)
152 {
153 button btn = (button)sender;
154 this.showresult = showresult.yes;
155 currentkey = btn.text;
156 //将查询关键字替换进去
157 querystr = @"select * from `testdata` where data like '%"+currentkey+"%'";
158 this.close();
159 }
160 /// <summary>
161 /// 搜索框回车键事件
162 /// </summary>
163 /// <param name="sender"></param>
164 /// <param name="e"></param>
165 private void keylab_submitediting(object sender, eventargs e)
166 {
167 this.showresult = showresult.yes;
168 currentkey = keylab.text;
169 //将查询关键字替换进去
170 querystr = @"select * from `testdata` where data like '%" + keylab.text+ "%'";
171 this.close();
172 }
173
174 private void imagebutton1_press(object sender, eventargs e)
175 {
176 this.showresult = showresult.no;
177 this.close();
178 }
179 }
180 }
selectdata.cs
1 using system;
2 using system.collections.generic;
3 using system.linq;
4 using system.text;
5 using system.threading.tasks;
6
7 namespace selectdemo
8 {
9 class selectdata
10 {
11 public string title { set; get; }
12 public string[] items { set; get;}
13 public boolean ishow { set; get; }
14 public boolean isradio { set; get; }
15 public string type { set; get; }
16
17 }
18 }
dbclass.cs
1 using system;
2 using system.collections.generic;
3 using system.data;
4 using system.data.sqlclient;
5 using system.linq;
6 using system.text;
7 using system.threading.tasks;
8 using mysql.data.mysqlclient;
9 namespace selectdemo
10 {
11 class dbclass
12 {
13 /// <summary>
14 /// 连接数据库并查询相应数据
15 /// </summary>
16 /// <param name="query">数据库查询语句</param>
17 /// <returns></returns>
18 public datatable dbconnectandquert(string query)
19 {
20
21 string connetstr = "server=127.0.0.1;port=3306;user=****;password=****; database=***;charset=utf8";
22 mysqlconnection conn = new mysqlconnection(connetstr);
23 try
24 {
25 datatable dt = new datatable();
26 conn.open();
27 mysqlcommand com = new mysqlcommand(query, conn);
28 mysqldataadapter adapter = new mysqldataadapter(com);
29 adapter.fill(dt);
30 return dt;
31
32 }
33 catch (mysqlexception ex)
34 {
35 console.writeline(ex.message);
36 return null;
37 }
38 finally
39 {
40 conn.close();
41 }
42 }
43 }
44 }
黄山市民网：https://www.huangshanshimin.com/
