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