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

 

样式一

一、          Toolbar

1.       目标样式

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

2.       修改属性

a.         修改Mobile Form的Toolbar属性

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

图 1设置界面1

 

图 2设置界面2

 

b.         修改Mobile Form的ToolbarStyle属性

其中包括SelectStyle属性（是否选择默认样式）、BackColor属性（控件背景色）、ForeColor属性（控件文本颜色）、SelectBackColor属性（控件选择状态背景色）和SelectForeColor属性（控件选择状态文本颜色）。

SelectStyle属性默认设置为“Select”，表示不选择默认样式，如图 3；

图 3设置界面

 

将BackColor属性设置为“White”，如图 4；

图 4设置界面

 

将ForeColor属性设置为“155, 157, 177”，如图 5；

图 5设置界面

 

将SelectBackColor属性设置为“White”，如图 6；

图 6设置界面

 

将SelectForeColor属性设置为“0, 183, 250”，如图 7；

图 7设置界面

 

3.     手机效果显示

 

二、          Title

1.       修改属性

a.         修改Mobile Form的TitleText的属性

输入需要显示标题，如图 1；

图 8设置界面

 

b.         修改Mobile Form的TitleStyle属性

其中包括Image属性（窗体图标）、BackColor属性（窗口标题栏背景色）、TextColor属性（窗口标题栏文本颜色）和TextAlign属性（窗体标题栏文本水平方向）。

若将Image属性设置为“coms”如图 2、图 3；

图 9设置界面

 

图 10显示界面

 

若将BackColor属性设置为“DeepSkyBlue”，如图 11、图 1；

图 11设置界面

 

图 12显示界面

 

若将TextColor属性设置为“Red”，如图13、图 14；

图 13设置界面

 

图 14显示界面

 

若将TextAlign属性设置为“Left”，如图 15、图 16；

图 15设置界面

 

图 16显示界面

 

2.       手机效果显示

 

三、          LeftForm

1.       目标样式

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

2.       修改属性

a.         修改Mobile Form的LeftFormLayout属性

获取和设置左侧边栏对应的布局名称，首先新建MobileForm项，并命名为MessageShow，设计界面，如图 1；

图 1设计界面

 

再将Mobile Form的LeftFormLayout属性，绑定新建的窗体MessageShow，如图 2；

图 2设置界面2

 

b.         修改Mobile Form的LayoutMode属性

获取和设置侧边栏显示样式。默认设置为“NORMAL”，如图 3；

图 3设置界面

 

将该属性设置为“EFFACT3D”，如图 4；

图 4设置界面

 

将该属性设置为“FLOATUP”，如图 5；

图 5设置界面

 

3.       手机效果显示

-----------------END-----------------

Smobiler是一款基于.NET的移动应用开发平台

只需要Visual Studio中进行一次开发

同时支持Android、iOS两大操作系统