码迷,mamicode.com
首页 > 其他好文 > 详细

Blend4精选案例图解教程(四):请给我路径指引

时间:2015-04-20 00:27:01      阅读:119      评论:0      收藏:0      [点我收藏+]

标签:

原文:Blend4精选案例图解教程(四):请给我路径指引

路径在界面设计中,可以起到很好的辅助作用,我常常使用它来对元素进行规则排列和非规则排列控制。

本次教程将演示,Blend中路径的常规用法。

1、新建项目,在默认设计视图中添加一个椭圆(Elipse),按住Shift键可以画圆

视图树技术分享设计视图技术分享

2、从绘制的圆中提取路径,右键点击圆,弹出的窗口选择Path-Make Layout Path,在视图树中显示为PathListBox,这就是我们需要的路径

技术分享 技术分享

 

3、选中PathListBox,通过双击图片,往PathListBox中添加需要通过路径排列的元素

技术分享 视图树技术分享

 

4、为了查看效果,暂时把elipse的可见关闭

技术分享 效果图技术分享

 

5、路径带来的效果已初步展现,下面在进行属性设置,使图片的排列更符合我们的要求。

确保选中PathListBox,然后在属性窗口中进行属性调整

技术分享

ZIndex:2 使图片显示在elipse(elipse的ZIndex属性为1)

技术分享

排列属性:平均

技术分享

方向:随路径居中

技术分享

 

6、对elipse进行简单的属性设置,作为图片显示的背景

技术分享 技术分享 技术分享

 

7、OK,效果出来了,是不是有点像八卦图。呵呵,咱们继续!

技术分享

 

8、使用钢笔工具创建不规则路径,对图片进行不规则排列

新建一个UserControl

技术分享

 

9、使用钢笔工具,随意画出一些路径

技术分享 设计图技术分享 视图树技术分享

 

10、提取路径,加入图片元素

技术分享 技术分享

 

11、把UserControl的背景设置为白色,改变分布(Distribution)属性为Even(平均)

技术分享 技术分享

 

12、得到不规则排列图

技术分享 

本教程项目下载

Blend4精选案例图解教程(四):请给我路径指引

标签:

原文地址:http://www.cnblogs.com/lonelyxmas/p/4440457.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!