零元学Expression Blend 4 - Chapter 25 以Text相关功能就能简单做出具有设计感的登入画面
2017-12-24 00:45
549 查看
原文:零元学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之路
喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!
若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您
本章将交大家如何运用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 47 超简单!运用StackPanel配合OpacityMask做出倒影效果
- 零元学Expression Blend 4 - Chapter 29 ListBox与Button结合运用的简单功能
- 使用OPENCV简单实现具有肤质保留功能的磨皮增白算法
- 如何让你的机子具有简单的DNS功能
- 简单的具有shell功能的web服务器(带有缓存加速访问的功能)
- 具有自动提示功能的菜单(AutoCompleteTextView与数组)
- 简单探讨可牛影像软件中具有肤质保留功能的磨皮算法及其实现细节。
- 在一个程序中需要用到全局变量(在多个class之间共享数据),请问如何定义具有这种功能的变量?或者是否有其他的方法解决多个class之间的数据共享(尽量简单实现)。 首先应该明确 Java中没有全局变
- Textswitcher的简单用法与功能(文本切换器)
- 纯CSS实现箭头、气泡让提示功能具有三角形图标(简单实例)
- 简单探讨可牛影像软件中具有肤质保留功能的磨皮算法及其实现细节
- 简单探讨可牛影像软件中具有肤质保留功能的磨皮算法及其实现细节。
- PraiseTextView 一个TextView简单实现朋友圈点赞功能
- PHP简单实现“相关文章推荐”功能的方法
- 零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
- 简单的具有shell功能的web服务器(带有缓存加速访问的功能)
- 零元学Expression Design 4 - Chapter 5 教你如何用自制笔刷在5分钟内做出设计感效果
- 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
- 零元学Expression Design 4 - Chapter 7 使用内建功能「Clone」来达成Path的影分身之术
- 基于Qt5.6做一个最简单的具有收发功能的串口助手