零元学Expression Blend 4 - Chapter 25 以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之路

喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您