使用Smobiler实现类似美团的界面

目标

下图为本次实现目标

准备

事先准备图片放在路径下\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团"，"发现"，"订单"，"我的"，其余设置如下图。

运行后的效果