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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM