Blend4精选案例图解教程(一):丰富的形状(Shape)资源
2015-05-24 16:15
471 查看
Blend4资源面板中内置了丰富的形状素材,为我们在构建程序时提供极大的方便。系统默认内置18种常用形状,通过其属性设置可以自定义出更多衍生形状,或者通过Direct Selection工具手动绘制,我们可以获得更自由的形状编辑。当然我们还可以登陆 Expression
Gallery 下载别人分享的素材(似乎并不多),来扩充形状资源库。
因为形状的用法比较一致,重点是形状的不同属性设置,在此仅举一例来展示形状的常规用法。
1、 新建项目
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/16d03d48918c3c13788e42fa504b3d08.png)
2、 项目文件生成后,在Objects and Timeline面板中选中LayoutRoot
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/58f8eefc52a61da73c14e8bf9a9c0a00.png)
3、 然后在资源(Assets)面板中选中Shapes
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/70f21e8762063112872aeee7aaf6facc.png)
4、 我们可以通过双击或者拖拽的方式添加一个形状,这里我们使用Star来作演示,Star已添加到LayoutRoot中,如图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/0710645decc0964aae14306a3a2739e9.png)
5、 选择Selection工具
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/d48890c34df64d95565848a323bce918.png)
确认五角星处于被选择状态(如未选择可以通过点击选择)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/0df21dc77f163a225b4674a0021f458b.png)
6、 在属性(Properties)面板中,我们可以对形状进行一系列的属性设置,直到符合我们的需要。下面我们对五角星进行简单的修饰。
把颜色调为红色
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/6e34ff1d5581b90683af6fcfb605aad2.png)
去边框
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/2c876d74dba3044cdd72e8d482f577c6.png)
OK,这样一个标准的五角星制作完成
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/c2a2b3cdaa4fca82c865c3ccaebd80f0.png)
7、 通过组合不同的属性设置,我们可以获得更多的效果:
手绘风格:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/13a5b773dbae08cf7ab12e266cb9683a.png)
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/92c90603670d9a06ebdb50093ab93b0f.png)
更改Fill属性为渐变效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/dc57562edd03066cf621a28cb223860c.png)
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/2409c2b492cbfc507ba7a1d2211f40b5.png)
更改外观属性
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/3b0eee600c6919b4363bb96dcb907a6b.png)
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/6fe8fa094932d0a15cf27401a3e84b69.png)
如果你愿意,可以做出更多的效果!
以上效果我们也可以通过XAML来实现,以下为完整代码:
在实际项目中,不推荐使用代码的方式来进行大规模的效果设计,Blend的设计功能,VS无可替代;作为程序员将Blend和VS的结合使用才能带来高效的SilverLight应用程序开发。后续章节,将通过实例一步一步展现Blend的强大魅力!
Gallery 下载别人分享的素材(似乎并不多),来扩充形状资源库。
因为形状的用法比较一致,重点是形状的不同属性设置,在此仅举一例来展示形状的常规用法。
1、 新建项目
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/16d03d48918c3c13788e42fa504b3d08.png)
2、 项目文件生成后,在Objects and Timeline面板中选中LayoutRoot
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/58f8eefc52a61da73c14e8bf9a9c0a00.png)
3、 然后在资源(Assets)面板中选中Shapes
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/70f21e8762063112872aeee7aaf6facc.png)
4、 我们可以通过双击或者拖拽的方式添加一个形状,这里我们使用Star来作演示,Star已添加到LayoutRoot中,如图
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/0710645decc0964aae14306a3a2739e9.png)
5、 选择Selection工具
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/d48890c34df64d95565848a323bce918.png)
确认五角星处于被选择状态(如未选择可以通过点击选择)
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/0df21dc77f163a225b4674a0021f458b.png)
6、 在属性(Properties)面板中,我们可以对形状进行一系列的属性设置,直到符合我们的需要。下面我们对五角星进行简单的修饰。
把颜色调为红色
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/6e34ff1d5581b90683af6fcfb605aad2.png)
去边框
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/2c876d74dba3044cdd72e8d482f577c6.png)
OK,这样一个标准的五角星制作完成
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/c2a2b3cdaa4fca82c865c3ccaebd80f0.png)
7、 通过组合不同的属性设置,我们可以获得更多的效果:
手绘风格:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/13a5b773dbae08cf7ab12e266cb9683a.png)
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/92c90603670d9a06ebdb50093ab93b0f.png)
更改Fill属性为渐变效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/dc57562edd03066cf621a28cb223860c.png)
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/2409c2b492cbfc507ba7a1d2211f40b5.png)
更改外观属性
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/3b0eee600c6919b4363bb96dcb907a6b.png)
效果:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/11/6fe8fa094932d0a15cf27401a3e84b69.png)
如果你愿意,可以做出更多的效果!
以上效果我们也可以通过XAML来实现,以下为完整代码:
相关文章推荐
- Blend4精选案例图解教程(一):丰富的形状(Shape)资源
- Blend4精选案例图解教程(三):一键拖拽
- Blend4精选案例图解教程(四):请给我路径指引
- Blend4精选案例图解教程(三):一键拖拽
- Blend4精选案例图解教程(二):找张图片玩特效
- Blend4精选案例图解教程(三):一键拖拽
- Blend4精选案例图解教程(四):请给我路径指引
- Blend4精选案例图解教程(四):请给我路径指引
- Blend4精选案例图解教程(五):可视数据管理
- Blend4精选案例图解教程(二):找张图片玩特效
- Blend4精选案例图解教程(五):可视数据管理
- Blend4精选案例图解教程(二):找张图片玩特效
- HSRP 入门教程图解 (案例、动画过程、配套仿真)
- IP 地址入门教程图解 (案例、动画过程、配套仿真)
- shape形状资源&图片选择器&广播接受者(发送短信)&图片选择器
- IP 地址入门教程图解 (案例、动画过程、配套仿真)
- OSPF 教程图解 (案例、动画过程、仿真)
- Android按钮shape形状资源代码实现
- Axure RP Pro - 翻译 - 5.5 Tutorial教程 - AXURE 201 Article 5: Rich Interactions复杂交互 - Shape, Image & Menu Styles形状、图像和菜单样式
- 案例实作图解Asp.Net MVC教程