原文:零元學Expression Blend 4 - Chapter 25 以Text相關功能就能簡單做出具有設計感的登入畫面

本章將交大家如何運用Blend 4 內的Text相關功能做出有設計感的登入畫面
讓你五分鐘就能快速做出一個登入畫面

?

本章將教大家如何運用Blend 4 內的Text相關功能做出有設計感的登入畫面

讓你五分鐘就能快速做出一個登入畫面

?

范例內有文字方塊可以輸入文字，以及密碼欄：

很抱歉，閣下使用的瀏覽器并不支援 IFrame，不能正常瀏覽我的網頁

打錯字了....不知道有沒有人發現= =

?

01

開啟一個新專案，并且調整LayoutaRoot的顏色

Brushes->Background->Gradient brush( 0% #FF481950、24% #FF321637、100% #FF141416 )

?

02

接著放入一個TextBlock

Asset->Search->TextBlock

?

并且在TextBlock內放入文字，你可以到這個網址的頁面Copy一段文字回來

請把文字大小調整為 8pt

?

行高設定為18pt， 靠左對齊

?

03

再來，我們要調整文字所呈現的顏色

請選取文字後到Brushes->Foreground->Gradient brush

調整文字外觀為( 0% FF000000、100% #FFFFFFFF)

?

接著調整透明度Alpha，請到Brushes->OpacityMask

調整文字透明度為 (0% #FFFFFFFF Alpha 41%、45% #FFFFFFFF Alpha 10%、100% #FFFFFFFF Alpha 95%)

?

都調整完成後，應該會如下圖

?

04

以同樣方法再置入一個TextBlock，并且打上Member Login

運用Seletion工具(快捷鍵V)，把Member Login做傾斜調整

?

05

在文字上單擊右鍵選擇Path->Convert to Path，把剛剛鍵入的文字變成Path

?

已經變為Path的文字，使用Direct Seletion(快捷鍵A)時，你可以看到有很多的控制節點

?

拖動節點間線段，拉開節點間的間距，如下圖范例

?

運用Pen工具，增加控制節點，好拖拉成等等的登入視窗

?

增加完控制節點後，拖拉成下圖

?

06

使用剛剛所教的方法更改顏色

并且運用Gradient Tool(快捷鍵G)調整漸層的方向

忘記Gradient Tool怎麼用了嗎?請看這里

?

調整成如下圖范例，做出立體感

?

07

放入一個TextBox、PasswordBox以及一個Button

?

完成後，按下F5看看你的成果

?

范例專案下載

?

?

本篇的教學就到此。

?

?

(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)

一步一步邁向HIE之路

?

喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您

?

總結

以上是生活随笔為你收集整理的零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。