目标

下图为本次实现目标

准备

事先准备图片放在路径下\bin\Debug\Resources\Image

实现

首先可以将界面分成A，B，C三个部分，这三个部分里的内容可以使用Image，TextBox，IconMenuView，PageView,ListView，ToolBar等控件实现。

创建SmobilerForm类，并在窗体类中依次加入Panel(Name属性设置headPanel)，Toolbar ，Panel(Name属性设置bodyPanel)控件，

headPanel的size设置(300，40)，Dock属性设置top；Toolbar 的Size设置(300，40)，ToolBar的Dock默认Bottom，因此不需要设置；bodyPanel的Dock属性设置Fill即可，这样外层界面就实现了。

接着来实现部分A中的界面，先将headPanel的Layout设置Relative，Padding设置(10,5,10,5)，Direction设置Row，BackColor设置gold，其余属性默认。

1. 在headPanel加入ImageButton，Name为imageButton1，其属性设置如下：Size设置(30，30)，BorderRadius设置30，Margin设置(0,0,5,0)，ImageBorderRadius设置30，ResourceId设置"logon.png"，其余属性默认。

2. 在headPanel中加入Panel，Name为panel1,panel1的size设置(45，30)，Padding设置(10,5,10,5)，Touchable设置true。

在panel1中加入两个label，label1的size设置(45，20)，Bold设置true，Text设置“上海”，HorizontalAlignment设置Center，其余属性默认；label2的size设置(45，10)，ForeSize设置10，Text设置"阴19℃"，HorizontalAlignment设置Center，其余属性默认。label1和label2上下排列撑满panel1

3. 再往headPanel中加入Panel，Name为panel2，panel2的size设置(157，30)，BackColor设置white，BorderRadius设置6，Touchable设置true。在panel2中加入fonticon，size设置(15，15)，ResourceId设置"search",ForeColor是在DimGrey，接着往panel2中加入label控件，label的size设置(127，30)，Text设置“汉堡”，FontSize设置14。将fonticon和label并排在 panel2中。

4. 最后在headPanel中加imageButton，Name为imageButton2，ResourceId设置“plus”，Size设置(32，30)

headPanel的最终界面如下

接着实现部分B，bodyPanel的Layout设置Relative，Scrollable设置true。

1. 再往bodyPanel里加入panel，Name设置rspanel，rspanel的Size设置(300，20)，Padding设置(10,5,10,5)，Layout设置Relative，Direction设置Row，BackColor设置Gold。

2. 在rspanel里加入Button，Button的FontSi则设置10，Width设置45，HorizontalAlignment设置Center。通过代码往rspanel里加入热搜词，代码写在窗体的Load事件中：

```c#

string[] words = { "奶茶", "冰可乐","巨无霸汉堡","炸鸡"};

//热搜词

for(int i = 0; i < 4; i++) {

rspanel.Controls.Add(new Button()

{

BackColor = System.Drawing.Color.FromArgb(50, 255, 255, 255),

Text = words[i],

ForeColor = System.Drawing.Color.Black,

Padding = new Padding(10, 0, 10, 0),

Margin = new Margin(0,0,5,0),

FontSize=10

}) ;

}

```

3. 在bodyPanel中再加入panel，Name设置icpanel，icpanel的Size设置(300，60)，Padding设置(10,5,10,5)，Layout设置Relative，Direction设置Row，BackColor设置Gold。

4. 在icpanel里加入四个imagaButton，Size都是设置(70，50)，ImageType设置FontIcon，ResourcId分别设置“ios-barcode”，“qrcode”，“bicycle”，“bus”，Text分别设置“扫一扫”，“付款码”，“骑车”，“乘公交”

5. 在bodyPanel里加入IconMenuView，iconMenuView1的Margin设置(10,5,10,5)，Padding设置(0,10,0,0)，BorderRadus设置6，Height设置135，ColumnNum设置5，通过一下代码添加icon，可以写在窗体的load事件中：

```c#

IconMenuViewGroup ig = new IconMenuViewGroup();

ig.Items.Add(new IconMenuViewItem("0", "icon1", "外卖"));

ig.Items.Add(new IconMenuViewItem("1", "icon2", "美食"));

ig.Items.Add(new IconMenuViewItem("2", "icon3", "酒店住宿"));

ig.Items.Add(new IconMenuViewItem("3", "icon4", "休闲玩乐"));

ig.Items.Add(new IconMenuViewItem("4", "icon5", "电影演出"));

ig.Items.Add(new IconMenuViewItem("5", "icon6", "打车"));

ig.Items.Add(new IconMenuViewItem("6", "icon7", "丽人美发"));

ig.Items.Add(new IconMenuViewItem("7", "icon8", "超市药店"));

ig.Items.Add(new IconMenuViewItem("8", "icon6", "借钱"));

ig.Items.Add(new IconMenuViewItem("9", "icon7", "火车票"));

iconMenuView1.Groups.Add(ig);

```

6. 在bodyPanel中加入pageview，pageview的Height设置90，Margin设置(10,5,10,5)，BorderRadus设置6，IsLoop设置true。这个步骤需要创建一个SmobilerUserControl，类名为pageviewlayout，

usercontrol设置如下图，图中usercontrol，panel，image的size设置(300，90)，image的DisplayMember设置img，

数据绑定代码，可以写在窗体的load事件中：

```c#

DataTable dt = new DataTable();

dt.Columns.Add("img");

dt.Rows.Add("img1");

dt.Rows.Add("img2");

pageView1.TemplateControl = new pageviewlayout();

pageView1.DataSource = dt;

pageView1.DataBind();

```

7. 在bodyPanel里加入Listview，listview的Size设置(0，0)，listview也是需要模板的，模板设计如下：

usercontrol中控件的DisPlayMember设置分为：label1.DisplayMember = "sname";

label2.DisplayMember = "clabel";

label3.DisplayMember = "slabel";

label4.DisplayMember = "tlabel";

image1.DisplayMember = "img1";

image2.DisplayMember = "img2";

image3.DisplayMember = "img3";

绑定代码：

```c#

DataTable dt1 = new DataTable();

dt1.Columns.Add("sname");

dt1.Columns.Add("clabel");

dt1.Columns.Add("slabel");

dt1.Columns.Add("tlabel");

dt1.Columns.Add("c_label");

dt1.Columns.Add("img1");

dt1.Columns.Add("img2");

dt1.Columns.Add("img3");

dt1.Rows.Add("xxxx汉堡店","4.4分","人均￥36","55分钟送达","满10减2，满20减3，满60减6","food","food","food");

dt1.Rows.Add("xxxx汉堡店", "4.4分", "人均￥36", "55分钟送达", "满10减2，满20减3，满60减6", "food", "food", "food");

dt1.Rows.Add("xxxx汉堡店", "4.4分", "人均￥36", "55分钟送达", "满10减2，满20减3，满60减6", "food", "food", "food");

dt1.Rows.Add("xxxx汉堡店", "4.4分", "人均￥36", "55分钟送达", "满10减2，满20减3，满60减6", "food", "food", "food");

listView1.TemplateControl = new listviewlayout();

listView1.DataSource = dt1;

listView1.DataBind();

```

bodyPanel的最终界面如下：

最后设置Toolbar的Items，选中Toolbar，点击右侧的Items，在ToolBarItem编辑器中添加4个Item，ImageType都设置FontIcon，IconID和SelectIconID分别设"home"，"compass"，"calendar-o"，"user"，Text分别设置"x团"，"发现"，"订单"，"我的"，其余设置如下图。

运行后的效果