本章將交大家如何運用Blend 4 內的Text相關功能做出有設計感的登入畫面
讓你五分鐘就能快速做出一個登入畫面
本章將教大家如何運用Blend 4 內的Text相關功能做出有設計感的登入畫面
讓你五分鐘就能快速做出一個登入畫面
範例內有文字方塊可以輸入文字，以及密碼欄：
打錯字了....不知道有沒有人發現= =
01
開啟一個新專案，並且調整LayoutaRoot的顏色
Brushes->Background->Gradient brush( 0% #FF481950、24% #FF321637、100% #FF141416 )
![clip_image002[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image002%5B1%5D.png "clip_image002[1]")
02
接著放入一個TextBlock
Asset->Search->TextBlock
![clip_image004[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image004%5B1%5D.jpg "clip_image004[1]")
並且在TextBlock內放入文字，你可以到這個網址的頁面Copy一段文字回來
請把文字大小調整為 8pt
![clip_image006[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image006%5B1%5D.jpg "clip_image006[1]")
行高設定為18pt， 靠左對齊
![clip_image008[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image008%5B1%5D.jpg "clip_image008[1]")
03
再來，我們要調整文字所呈現的顏色
請選取文字後到Brushes->Foreground->Gradient brush
調整文字外觀為( 0% FF000000、100% #FFFFFFFF)
接著調整透明度Alpha，請到Brushes->OpacityMask
調整文字透明度為 (0% #FFFFFFFF Alpha 41%、45% #FFFFFFFF Alpha 10%、100% #FFFFFFFF Alpha 95%)
都調整完成後，應該會如下圖
![clip_image010[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image010%5B1%5D.jpg "clip_image010[1]")
04
以同樣方法再置入一個TextBlock，並且打上Member Login
運用Seletion工具(快捷鍵V)，把Member Login做傾斜調整
![clip_image012[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image012%5B1%5D.jpg "clip_image012[1]")
05
在文字上單擊右鍵選擇Path->Convert to Path，把剛剛鍵入的文字變成Path
![clip_image014[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image014%5B1%5D.jpg "clip_image014[1]")
已經變為Path的文字，使用Direct Seletion(快捷鍵A)時，你可以看到有很多的控制節點
![clip_image016[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image016%5B1%5D.jpg "clip_image016[1]")
拖動節點間線段，拉開節點間的間距，如下圖範例
![clip_image018[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image018%5B1%5D.jpg "clip_image018[1]")
運用Pen工具，增加控制節點，好拖拉成等等的登入視窗
![clip_image020[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image020%5B1%5D.jpg "clip_image020[1]")
增加完控制節點後，拖拉成下圖
![clip_image022[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1012/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image022%5B1%5D.jpg "clip_image022[1]")
06
使用剛剛所教的方法更改顏色
並且運用Gradient Tool(快捷鍵G)調整漸層的方向
忘記Gradient Tool怎麼用了嗎?請看這裡
![clip_image024[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image024%5B1%5D.jpg "clip_image024[1]")
調整成如下圖範例，做出立體感
![clip_image026[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image026%5B1%5D.jpg "clip_image026[1]")
07
放入一個TextBox、PasswordBox以及一個Button
![clip_image028[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image028%5B1%5D.jpg "clip_image028[1]")
完成後，按下F5看看你的成果
![clip_image029[1]](https://dotblogsfile.blob.core.windows.net/user/yuan0716/1104/Expression-Blend-4---Chapter-25-Text_F4FB/clip_image029%5B1%5D.png "clip_image029[1]")
範例專案下載
本篇的教學就到此。
(若有任何錯誤的地方，請各位前輩或同好能不吝指教，小女子都會虛心接受；若是你喜歡我的教學，請給我點鼓勵，謝謝。)
一步一步邁向HIE之路
喜歡我文章請推我一下或給我個回應，你的鼓勵會給我無限的動力喔!
若是您有其他問題或是特別需要，請在文章回應處留言，我會盡快回覆您
