設為首頁 收藏本站   立即加入 登入
返回列表

[教學] Windows XP 登入畫面 UIFILE 基本教學

很多人製作登入畫面都使用Logon Studio或是ChameleonXP這類的軟體製作
但是這類的軟體只是換換圖片 顏色 與文字而已

要做出更多變化的登入畫面 就必須修改UIFILE
但是UIFILE並不像一般程式一樣好懂
並須要有人"開導"

以下將原版的 Windows XP 登入畫面
來當例子解析



一般登入畫面大部分都分為兩部份
一部分為<style resid=......>開頭與</style>結尾 大部分的元件 都是在這些地方控制
另一部分為<logonframe...>開頭與</element>結束 負責整體畫面與一些基本物件(例如:關機按鈕)

大部分的登入畫面在製作時 會先分區 原版的Windows XP登入畫面也不例外

外連圖片

上圖中 總共分為四區
第一區為toppanelss 就是登入畫面上面那塊藍的
在過來是中間的區塊 "統稱"framess
下面那塊為bottompanelss

其中framess中分為兩個 一個為leftpanelss 另一個是rightpanelss
分別放置不同的物件 顧名思義 將這兩個的東西交換 登入的元件 就會左右顛倒 Windows XP圖會在右邊

至於程式中的background:rcbmp(127,6,#ff00ff,0,0,1,0)

其中
1. 125 -> 圖片編號
2. 6 -> 圖片顯示方式 -> 0(堆疊排列),1(按你指定的長寬),6(擴展),7(32bit bmp圖片)
3. #ff00ff -> 指定要透明的色彩
4. 0 -> 指定圖片長度
5. 0 -> 指定圖片寬度
6. 1 -> 0=使用指定長寬,1=使用圖片長寬
7. 0 -> 0=不作變化,1=映射


UIFILE解說

1.toppanelss

<style resid=toppanelss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(toppanel)]
{
background: rgb(0,48,156); #指定toppanelss內容為RGB色碼0,48,156的顏色
}
element [id=atom(divider)]
{
background: rcbmp(125,6,#FF00FF,0,0,1,0); #指定toppanelss與framess中間的分隔線 中間的圖片為編號125
}
</style>

2.framess

<style resid=framess>
element
{
background: argb(0,0,0,0);
}
element [id=atom(contentcontainer)]
{
background: rgb(90,126,220); #指定中間背景顏色為90,126,220
}
button
{
background: rcbmp(112,6,#FF00FF,0,0,1,0); #指定USER按鍵底圖為編號112的bmp圖片 擴展排列 透明色為桃紅色 使用圖片的長寬度
borderthickness: rect(8,8,0,8); #設定該按鍵底圖加外框,左8上8右0下8(pix)
}
</style>

3.leftpanelss

<style resid=leftpanelss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(1); #指定左畫面使用的字體依字串值資源編號1設定顯示,此例為arial字體
}
element [id=atom(product)]
{
animation: alpha | s | mediumslow; #指定Logo圖片以透明動畫顯示,速度為中慢
}
element [id=atom(leftpanel)]
{
foreground: rgb(239,247,255);
}
element [id=atom(welcome)]
{
fontstyle: italic; #指定歡迎文字樣式為斜體
fontsize: rcint(44) pt;
fontweight: bold; #增加指定文字樣式為粗體
padding: rect(0rp,0rp,22rp,0); #向右增加22pix空間
contentalign: topright; #指定文字置於右上(此例左畫面指定位置為中間,因此實際為中間右上)
}
element [id=atom(welcomeshadow)]
{
foreground: rgb(49,81,181);
fontstyle: italic;
fontsize: rcint(44) pt;
fontweight: bold;
padding: rect(2rp,3rp,20rp,0); #指定歡迎文字陰影增加空間為左2上3右20下0
contentalign: topright; 顯示出來的效果為向右2向下3偏移的陰影
}
element[id=atom(help)]
{
fontsize: rcint(45) pt;
padding: rect(81rp,81rp,0,0);
contentalign: wrapright; #設置登入登出訊息顯示位置為智能向右靠齊
}
</style>

4.rightpanelss

<style resid=rightpanelss>
element
{
background: argb(0,0,0,0);
}
element [id=atom(divider)]
{
background: rcbmp(124,6,#FF00FF,0,0,1,0); #設置中間分隔線圖片
}
scrollbar [vertical] #設置窗口滑桿為垂直顯示
{
layoutpos: nineright; #設置窗口滑桿位置在右畫面以九宮格配置的右邊
background: rgb(115,146,231);
}
viewer
{
layoutpos: nineclient; #設置窗口位置在右畫面以九宮格配置的中央
}
thumb
{
background: rcbmp(111,6,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,3,3); #設置窗口滑桿有3pix細框
}
repeatbutton [id=atom(lineup)]
{
content: rcbmp(110,3,-1,sysmetric(20),sysmetric(20),0,0); #設置滑桿向上圖片
}
repeatbutton [id=atom(linedown)]
{
content: rcbmp(109,3,-1,sysmetric(20),sysmetric(20),0,0); #設置滑桿向下圖片
}
</style>

5.hotaccountlistss 使用者登入區塊(當滑鼠移過)

<style resid=hotaccountlistss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0rp,26rp,5rp,26rp); #設置鼠標進入熱區時,使用者窗口增加上26右2下26pix的空間
}
logonaccount
{
cursor: hand;
foreground: rgb(239,247,255);
background: rgb(90,126,220);
animation: alpha | log | fast; #鼠標進入熱區時使用者帳戶呈現快速透明動畫效果
alpha:96; #鼠標進入熱區後各使用者帳戶以透明度96顯示(0~255)
}
logonaccount [logonstate=1] #帳戶人登入時的動畫顯示設定
{
animation: rectangle | s | mediumfast;
cursor: arrow;
alpha:255;
}
logonaccount [mousewithin] #鼠標指向個別帳戶時的狀態
{
cursor: hand;

alpha:255;
}
logonaccount [selected] #鼠標選取個別帳戶時的狀態
{
cursor: hand;

alpha:255;
}
element [id=atom(userpane)] #帳戶背景
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(5,5,0,5); #指定帳戶背景外框粗細
bordercolor: rgb(90,126,220); #指定帳戶背景外框顏色
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: rcbmp(112,6,#FF00FF,0,0,1,0); #帳戶背景在鼠標選取時顯示圖片112
}

logonaccount [selected]
{
alpha: 255;
}
element [id=atom(pictureframe)] #設置帳戶頭像底圖
{
background: rcbmp(113,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0, 7rp,0); #設置帳戶頭像底圖右側距離帳戶名及密碼7pix
}
element [id=atom(pictureframe)] [mousefocused] #設置鼠標指向帳戶頭像時的效果
{
background: rcbmp(119,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(pictureframe)] [selected] #設置鼠標按下帳戶頭像時的效果
{
background: rcbmp(119,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
alpha: 255;
}
element [id=atom(username)]
{
foreground: rgb(239,247,255);
contentalign: endellipsis; #設置帳戶名向左對齊,帳戶名後加空白直到最後,以讓密碼從下一行開始顯示
}
button [class="status"] #以下為使用者系統狀態(例如:有幾個程式正在運行)各項顯示設置
{
background: argb(0,0,0,0);
foreground: rgb(0,48,156);
fontsize: rcint(46) pt;
fontweight: bold;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(239,247,255);
fontsize: rcint(46) pt;
fontweight: bold;
}

</style>

6.accountlistss 使用者登入區塊(當鍵盤操作時)

<style resid=accountlistss>
element
{
background: argb(0,0,0,0);
fontface: rcstr(3);
}
selector
{
padding: rect(0rp,26rp,5rp,26rp);
}
logonaccount
{
cursor: hand;
animation: alpha | log | fast;
background: rgb(90,126,220);
}
logonaccount [logonstate=1]
{
animation: rectangle | s | mediumfast;
cursor: arrow;
}
element [id=atom(userpane)]
{
padding: rect(2rp,2rp,14rp,2rp);
borderthickness: rect(5,5,0,5);
bordercolor: rgb(90,126,220);
fontsize: rcint(45) pt;
}
element [id=atom(userpane)][selected]
{
background: rcbmp(112,6,#FF00FF,0,0,1,0);
}
element [id=atom(pictureframe)]
{
background: rcbmp(113,7,255,0,0,1,0);
borderthickness: rect(5,5,5,5);
margin: rect(0,0,7rp,0);
}
element [id=atom(username)]
{
foreground: rgb(239,247,255);
contentalign: endellipsis;
}
button [class="status"]
{
background: argb(0,0,0,0);
foreground: rgb(0,48,156);
fontsize: rcint(46) pt;
fontweight: bold;
contentalign: wrapleft;
}
button [class="status"][mousefocused]
{
fontstyle: underline;
}
button [class="status"][keyfocused]
{
fontstyle: underline;
}
button [class="status"][selected]
{
foreground: rgb(239,247,255);
fontsize: rcint(46) pt;
fontweight: bold;
}
</style>

7.passwordpaness 登入帳戶密碼

<style resid=passwordpaness>
element
{
background: argb(0,0,0,0);
}
element [id=atom(passwordpanelayer)]
{
padding: rect(71rp,0,0,0); #設置密碼區左方71pix空白,避免和帳戶頭像重疊
}
element [id=atom(instruct)] #設置密碼輸入框上面的文字(此例為Type Your Password)
{
fontface: rcstr(48);
fontsize: rcint(47) pt;
foreground: white;
padding: rect(3rp,0,0,3rp);
}
edit [id=atom(password)] #輸入密碼框的各項設置
{
background: rcbmp(102,6,#FF00FF,0,0,1,0);
borderthickness: rect(3,3,5,5);
passwordcharacter: 9679; #輸入密碼時顯示出來的字元代號
fontface: "arial";
fontsize: 16pt;
}
button [id=atom(go)] #設置密碼右方的進入按鍵
{
margin: rect(5rp,0,0,0);
content: rcbmp(103,3,-1,26rp,26rp,0,0);
padding: rect(0rp,1rp,0,1rp);
}
button [id=atom(go)][keyfocused] #按下進入按鍵時
{
content: rcbmp(104,3,-1,26rp,26rp,0,0);
}
button [id=atom(info)] #設置密碼提示按鍵
{
margin: rect(5rp,0,0,0);
content: rcbmp(105,3,-1,28rp,28rp,0,0);
}
button [id=atom(info)][keyfocused] #設置密碼提示按鍵按下時圖片
{
content: rcbmp(106,3,-1,28rp,28rp,0,0);
}
element [id=atom(keyboard)] #設置輸入密碼時的顯示
{
cursor: arrow;
margin: rect(5rp,0,0,0);
}
</style>


logonframe...解說

分為三部分如下...

<logonframe...>起始,</logonframe>結尾
這裡規範整個動作畫面佈局及分配 以上面定義元件1~5的部份 作動作指定及執行

<logonaccount...>起始,</logonaccount>結尾
這一段執行腳本碼配合上面定義元件6.7.9部份 對帳戶窗口內的各元件作佈局及指定動作

<element resid=passwordpanel...>起始,</element>結束
這一段執行腳本碼配合上面定義元件8部份 對帳戶密碼及附屬元件作佈局及指定動作

下面為這三段程式的解說
  1. <logonframe resid=main id=atom(frame) sheet=styleref(framess) layout=borderlayout()>
  2. <element id=atom(toppanel) sheet=styleref(toppanelss) layout=borderlayout() layoutpos=top height=80rp> #執行時上畫面位於畫面頂端,高度80
  3. <element id=atom(divider) layoutpos=bottom height=2rp/> #執行時上畫面分隔線位於上畫面底部,高度2
  4. </element>
  5. <elementid=atom(bottompanel) sheet=styleref(bottompanelss)layout=borderlayout() layoutpos=bottom> #執行時下畫面位於畫面底部,不設高度,由下方元件判斷
  6. <element id=atom(divider) layoutpos=top height=2rp/> #執行時下畫面分隔線位於下畫面頂端,高度2
  7. <element id=atom(options) layout=borderlayout() layoutpos=client> #設定執行下畫面時功能定義的各元件空間距離
  8. <element layout=borderlayout() layoutpos=left> #安排下面的關機按鍵排列在下畫面的左側
  9. <buttonid=atom(power) layout=borderlayout() layoutpos=top accessible=trueaccRole=43 accName=rcstr(11)> #設定關機按鍵為可執行,位在上方,顯示文字
  10. <element layoutpos=left content=rcbmp(107,3,-1,26rp,26rp,0,0) /> #指定關機按鍵圖片及寬26高26
  11. <element id=atom(label) layoutpos=client margin=rect(2rp,0,0,0)/> #關機文字左方設定2pix空間
  12. </button>
  13. <buttonid=atom(undock) layout=borderlayout() layoutpos=topmargin=rect(0,2rp,0,0) accessible=true accRole=43 accName=rcstr(14)>#退出鍵同關機鍵
  14. <element layoutpos=left content=rcbmp(108,3,-1,26rp,26rp,0,0)/>
  15. <element id=atom(label) layoutpos=client margin=rect(2rp,0,0,0)/>
  16. </button>
  17. </element>
  18. <element id=atom(instruct) layoutpos=right content=rcstr(25) width=325rp/> #訊息文字,置於右方,由右算起325pix開始顯示
  19. </element>
  20. </element>
  21. <elementid=atom(contentcontainer) layout=flowlayout(1,3,2,3) layoutpos=clientcontent=rcbmp(100,0,0,219rp,207rp,1,0)> #設定中畫面圖片,磚塊排列置中,寬高度
  22. <element id=atom(leftpanel) sheet=styleref(leftpanelss) layout=filllayout() layoutpos=left> #左畫面填充模式,置左
  23. <element id=atom(logoarea) layout=verticalflowlayout(0,3,3,2)> #logo組件垂直排列(指下面的product.help)
  24. <elementid=atom(product) contentalign=topright padding=rect(0rp,0rp,20rp,20rp)content=rcbmp(123,3,-1,137,86,0,0) background=rgb(90,126,220)/>
  25. <element id=atom(help) contentalign=wrapright width=384rp padding=rect(0rp,0rp,40rp,0rp)/> #登入出訊息由中間算起384開始顯示,並加右方40的空間距離
  26. </element>
  27. <element id=atom(msgarea) layout=verticalflowlayout(0,0,0,2) > #歡迎訊息組件(包括Welcome及陰影)以填充模式(填Welcome文字)垂直排列
  28. <element layout=filllayout() width=384rp> #填充寬度384
  29. <element id=atom(welcomeshadow) content=rcstr(7)/> #填充文字陰影依字串值7內容顯示(此例為Welcome)
  30. <element id=atom(welcome) content=rcstr(7)/>
  31. </element>
  32. </element>
  33. </element>
  34. <elementid=atom(rightpanel) sheet=styleref(rightpanelss) layout=borderlayout()layoutpos=left width=384rp> #右畫面以外框模式置左,寬度384
  35. <element id=atom(divider) layoutpos=left width=1rp/> #中央分隔置於右畫面左側,寬度1
  36. <scrollviewerid=atom(scroller) sheet=styleref(scroller) layoutpos=clientxscrollable=false margin=rect(26rp,0rp,0rp,0rp)> #帳戶視窗滑桿不需要時不顯示
  37. <selector id=atom(accountlist) sheet=styleref(accountlistss) layout=verticalflowlayout(0,3,3,2)/> #帳戶名單垂直排列
  38. </scrollviewer>
  39. </element>
  40. </element>
  41. </logonframe>
  42. <logonaccount resid=accountitem id=atom(accountitem) layout=filllayout() accessible=true accRole=43> #設定使用者帳戶為可執行
  43. <element id=atom(userpanelayer) layout=borderlayout() height=80rp> #每個帳戶所佔高度80
  44. <element id=atom(userpane) layout=borderlayout() layoutpos=top> #帳戶底圖位置
  45. <element id=atom(pictureframe) layout=flowlayout(0,2,2) layoutpos=left width=58rp height=58rp> #帳戶頭像底圖寬高
  46. <element id=atom(picture) />
  47. </element>
  48. <element id=atom(username) layoutpos=top/> #帳戶名稱位置
  49. <button id=atom(status0) class="status" layoutpos=none/> #使用者系統狀態顯示位置不作設定(依元件定義運行)
  50. <button id=atom(status1) class="status" layoutpos=none/>
  51. </element>
  52. </element>
  53. </logonaccount>
  54. <elementresid=passwordpanel id=atom(passwordpanelayer)sheet=styleref(passwordpaness) layout=borderlayout() height=80rp>#帳戶密碼組件高度
  55. <element layout=borderlayout() layoutpos=bottom>
  56. <edit id=atom(password) layoutpos=left width=163rp/> #密碼框寬度
  57. <element id=atom(keyboard) layoutpos=left/> #密碼輸入位置
  58. <button id=atom(go) layoutpos=left accessible=true accRole=43 accName= rcstr(100)/> #進入按鍵設置為可執行,按下時顯示字串值100
  59. <button id=atom(info) layoutpos=left accessible=true accRole=43 accName= rcstr(13)/> #密碼提示鍵設置為可執行,按下時顯示字串值13
  60. </element>
  61. <element id=atom(instruct) layoutpos=bottom content=rcstr(6)/> #密碼框上方文字依字串值6顯示
  62. </element>
複製代碼
1

評分人數

    • cct930:萌力 + 20 點 評分理由: [獎勵原因:發言-你的發言非常精彩,請再接再厲!]
o的commend咁似dreamweaver既..
原帖由 檸檬樹 於 2008-3-7 03:16 PM 發表
o的commend咁似dreamweaver既..

因為D setting全都是Xml......[8]
這樣可以改登入畫面了[5] [5]
太複雜了.....完全不懂.....
我還是放棄好了....:(
提示: 作者被禁止或刪除 內容自動屏蔽
提示: 作者被禁止或刪除 內容自動屏蔽
有看沒有懂 這要需要耐久度了<努力學中>[105]