|
|
### 目标
下图为本次实现目标
### 准备
事先准备图片放在路径下\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,
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团"，"发现"，"订单"，"我的"，其余设置如下图。
运行后的效果
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
|
