用户
 找回密码
 立即注册
发表于 2020-3-26 19:05:29


### 目标

下图为本次实现目标


### 准备

事先准备图片放在路径下\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
使用道具 举报 回复
发表于 2020-6-19 17:32:34
大佬 有源码么 我想比这做一下。
使用道具 举报 回复 支持 反对
发新帖
您需要登录后才可以回帖 登录 | 立即注册