今天继续 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. 手机效果显示
来源: https://www.cnblogs.com/amanda112/p/10711818.html