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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 今天继续Smobiler开发APP的学习日志,这次是做一个title、toolbar、侧边栏三种效果 样式一一、          Toolbar1.       目标样式我们要实现上图中的效果,需要如下的操作:2.

今天继续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

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

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

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

同时支持AndroidiOS两大操作系统

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
4天前
|
Web App开发 缓存 编解码
FFmpeg开发笔记(三十八)APP如何访问SRS推流的RTMP直播地址
《FFmpeg开发实战》书中介绍了轻量级流媒体服务器MediaMTX,适合测试RTSP/RTMP协议,但不适用于复杂直播场景。SRS是一款强大的开源流媒体服务器,支持多种协议,起初为RTMP,现扩展至HLS、SRT等。在FFmpeg 6.1之前,推送给SRS的HEVC流不受支持。要播放RTMP流,Android应用可使用ExoPlayer,需在`build.gradle`导入ExoPlayer及RTMP扩展,并根据URL类型创建MediaSource。若SRS播放黑屏,需在配置文件中开启`gop_cache`以缓存关键帧。
14 2
FFmpeg开发笔记(三十八)APP如何访问SRS推流的RTMP直播地址
|
9天前
|
Android开发 Kotlin
kotlin开发安卓app,如何让布局自适应系统传统导航和全面屏导航
使用`navigationBarsPadding()`修饰符实现界面自适应,自动处理底部导航栏的内边距,再加上`.padding(bottom = 10.dp)`设定内容与屏幕底部的距离,以完成全面的布局适配。示例代码采用Kotlin。
47 15
|
7天前
|
JSON API 数据格式
App Inventor 2 天气预报App开发 - 第三方API接入的通用方法
通过调用第三方天气api,填入必要的参数,通过Web客户端请求url。返回json格式的数据结果,使用AppInventor2解析json结果,显示到App上即可。
47 5
|
4天前
|
数据挖掘
美容院代理分销APP开发:拓展客户群体,增加收益利润
在当今数字化时代,手机APP已经成为人们生活中不可或缺的一部分。对于美容院来说,开发一款代理分销APP具有极高的价值。此APP不仅可以提升业务效率,还可以扩大客户群体,增加收益。
|
9天前
|
存储 API Android开发
kotlin开发安卓app,使用webivew 触发 onShowFileChooser, 但只能触发一次,第二次无法触发,是怎么回事。 如何解决
在Android WebView开发中,`onShowFileChooser`方法用于开启文件选择。当用户只能选择一次文件可能是因为未正确处理选择回调。解决此问题需确保:1) 实现`WebChromeClient`并覆写`onShowFileChooser`;2) 用户选择文件后调用`ValueCallback.onReceiveValue`传递URI;3) 传递结果后将`ValueCallback`设为`null`以允许再次选择。下面是一个Kotlin示例,展示如何处理文件选择和结果回调。别忘了在Android 6.0+动态请求存储权限,以及在Android 10+处理分区存储。
|
11天前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
9天前
|
小程序 安全 数据挖掘
陪玩语聊APP小程序定制开发模块功能
随着电竞行业的规范化,游戏陪玩软件兴起,提供专业陪玩服务。核心功能包括:多样化注册登录、用户资料展示、智能匹配筛选陪玩、语音互动(多人/私聊)、订单交易管理、陪玩入驻审核、数据分析、客服系统及社交功能。旨在融合游戏、语音聊天与社交,构建综合娱乐平台。
|
15天前
|
运维 Android开发 开发者
你知道APP是怎么开发的吗?
【7月更文挑战第9天】你知道APP是怎么开发的吗?
|
8天前
|
JSON 人工智能 API
App Inventor 2 人脸识别App开发 - 第三方API接入的通用方法
**App 效果图**:展示人脸识别功能,可识别性别和年龄。 **工作原理**:调用第三方人脸识别API,上传图片并接收返回的JSON数据,AppInventor2解析结果显示。
24 0
|
18天前
|
Dart 算法 JavaScript
C#数据结构与算法入门教程,值得收藏学习!
C#数据结构与算法入门教程,值得收藏学习!