本章将交大家如何运用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之路
喜欢我文章请推我一下或给我个回应，你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要，请在文章回应处留言，我会尽快回覆您