zoukankan      html  css  js  c++  java
  • MobileForm控件的使用方式-用.NET(C#)开发APP的学习日志

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

  • 相关阅读:
    关于树论【动态树问题(LCT)】
    caioj1462: 【EXKMP】回文串
    Node.js 文件上传 cli tools
    VuePress & Markdown Slot
    npm config set registry
    Front End Frameworks Trending 2021
    如何使用 VuePress 搭建一个 element-ui 风格的文档网站
    Semantic Pull Requests All In One
    [POJ2559]Largest Rectangle in a Histogram
    [POJ3253]Fence Repair
  • 原文地址:https://www.cnblogs.com/amanda112/p/10711818.html
Copyright © 2011-2022 走看看