当前位置: 移动技术网 > IT编程>开发语言>.net > MobileForm控件的使用方式-用.NET(C#)开发APP的学习日志

MobileForm控件的使用方式-用.NET(C#)开发APP的学习日志

2019年04月16日  | 移动技术网IT编程  | 我要评论

常州102医院肛肠科,德阳市人事考试网,n0446

今天继续smobiler开发app的学习日志,这次是做一个title、toolbar、侧边栏三种效果

 

样式一

一、          toolbar

1.       目标样式

c1e19962dda44ffb8175910ac3a92f73.png

我们要实现上图中的效果,需要如下的操作:

2.       修改属性

a.         修改mobile form的toolbar属性

获取窗体底部工具栏,打开集合编辑器,并点击“添加”,分别填写数据,如图 1、图 2;

67c712f867894255b8413c268af83ffc.png

图 1设置界面1

 

1edbea1e05924cec8a462f148077a093.png

图 2设置界面2

 

b.         修改mobile form的toolbarstyle属性

其中包括selectstyle属性(是否选择默认样式)、backcolor属性(控件背景色)、forecolor属性(控件文本颜色)、selectbackcolor属性(控件选择状态背景色)和selectforecolor属性(控件选择状态文本颜色)。

selectstyle属性默认设置为“select”,表示不选择默认样式,如图 3;

b288d881ee254c85a364c00fa8d13adc.png

图 3设置界面

 

将backcolor属性设置为“white”,如图 4;

44be3b90b6a54db89bdb7d9b575873fd.png

图 4设置界面

 

将forecolor属性设置为“155, 157, 177”,如图 5;

329e31acd9654b74b366a8a7dcc95c31.png

图 5设置界面

 

将selectbackcolor属性设置为“white”,如图 6;

0c33bcfe6fe9486f8714013b5664ec9c.png

图 6设置界面

 

将selectforecolor属性设置为“0, 183, 250”,如图 7;

6bffd2ac87c84459b9eee9845c205b2b.png

图 7设置界面

 

3.     手机效果显示

f5474a3443fe497d92c04ed7b9e79743.jpg

 

二、          title

1.       修改属性

a.         修改mobile form的titletext的属性

输入需要显示标题,如图 1;

2850b86d8bfe40bdbbc73e1e7b88c48e.png

图 8设置界面

 

b.         修改mobile form的titlestyle属性

其中包括image属性(窗体图标)、backcolor属性(窗口标题栏背景色)、textcolor属性(窗口标题栏文本颜色)和textalign属性(窗体标题栏文本水平方向)。

若将image属性设置为“coms”如图 2、图 3;

b069ee8ca02140d4849a777bc333da5a.png

图 9设置界面

 

e92bd8f4c7194e7dbee3bfbf78b55173.jpg

图 10显示界面

 

若将backcolor属性设置为“deepskyblue”,如图 11、图 1;

a3ab7bcd908a4515aa090aab26cfd53e.png

图 11设置界面

 

671120784bcb4df49ef0c51f4e953cd6.jpg

图 12显示界面

 

若将textcolor属性设置为“red”,如图13、图 14;

8789da1b0d1d4953b5579c0b9be528ab.png

图 13设置界面

 

8f4c37eb62b7432fb3bf2cd6f45d4a59.jpg

图 14显示界面

 

若将textalign属性设置为“left”,如图 15、图 16;

96c62b2fabe646d09f50655be7c11af5.png

图 15设置界面

 

d53d162ce2b94ca986f67f7aeda57965.jpg

图 16显示界面

 

2.       手机效果显示

340e0b337f924ed3a651f861dc69ece3.jpg

 

三、          leftform

1.       目标样式

b4a726afc0cd4c17bcf804a501528047.jpg

我们要实现上图中的效果,需要如下的操作:

2.       修改属性

a.         修改mobile form的leftformlayout属性

获取和设置左侧边栏对应的布局名称,首先新建mobileform项,并命名为messageshow,设计界面,如图 1;

005620b967eb45449b8bee6de6cd4492.png

图 1设计界面

 

再将mobile form的leftformlayout属性,绑定新建的窗体messageshow,如图 2;

13707c75bffc4f39a0d985d93f56521c.png

图 2设置界面2

 

b.         修改mobile form的layoutmode属性

获取和设置侧边栏显示样式。默认设置为“normal”,如图 3;

b971e4b0889a4eaabec2958719d48f6d.jpg

图 3设置界面

 

将该属性设置为“effact3d”,如图 4;

182afd4d71c34d4d8eaa45180acb1596.jpg

图 4设置界面

 

将该属性设置为“floatup”,如图 5;

95e8882ed1e74a7b9d2a83fa7b463ba3.jpg

图 5设置界面

 

3.       手机效果显示

f183edaaf6604c2e8ab6b60149c1b801.jpg

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网