零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior

简介: 原文:零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior 本章将教大家如何运用Blend 4内建的行为注...
原文: 零元学Expression Blend 4 – Chapter 21 以实作案例学习MouseDragElementBehavior


本章将教大家如何运用Blend 4内建的行为注入元件「MouseDragElementBehavior」--使物件拥有拖拉功能

?

本章将教大家如何运用Blend 4内建的行为注入元件「MouseDragElementBehavior」--使物件有拖拉功能

?

这麽说好了,当A物件被MouseDragElementBehavior寄生以後,A物件就会拥有MouseDragElementBehavior的特性功能

也可以说是MouseDragElementBehavior给了A物件新的生命

?

以前要作到像范例这样的拖拉效果没有写程式是做不到的

以设计为主的我来说,在还没使用Blend之前要我做到这样的效果,也是不可能的事情...

?

开始我们的拖拉功能吧~

?

01

新增一个专案後,放入物件、图片或照片

或是你想使用小猴子的专案来玩玩看,请下载附件

?

02

Asset搜寻MouseDragElementBehavior,把这个Behavior拉到你想使他可以拖拉的物件上

image

?

话说...其实这样就完成了^_^"

不过小猴子想要多补充一些...

?

另一种做法:

左边的圆只能存在於容器内,而右边的圆可以在Silverlight内随意的拖拉

?

03 试试看怎麽做~

在主要工作区内放入两个Canvas(或其他容器),并且在Canvsa里置入两个Ellipse

并且跟刚刚一样,把MouseDragElementBehavior拉到Ellipse里

image

?

若想要限制红色圈圈只能在容器内移动,请在点选红圈的MouseDragElementBehavior状态下

Properties->Common Properties找到Constrain To Parent Bounds,并勾选

image

?

F5试试看,没意外的话应该会跟范例一样喔!

?

04

另外,我发现msdn也有很明确的介绍了MouseDragElementBehavior,所以我直接引用msdn上的一些解释:

1.选取 ConstrainToParentBounds 属性可将元素限制成无法拖曳到超出父版面配置容器所指定的边界之外。

2.MouseDragElementBehavior行为不适用於用来处理 MouseClick事件的任何控制项 (例如, Button、 TextBox和 ListBox控制项)。

? 如果希望能够拖曳前述任一种控制项,请将该控制项变成可供拖曳之控制项 (例如框线) 的子项。

? 接着可以将 MouseDragElementBehavior行为套用至父项元素。

?

?

附上第二个范例的专案:

?

本篇的教学就到此。

?

?

(若有任何错误的地方,请各位前辈或同好能不吝指教,小女子都会虚心接受;若是你喜欢我的教学,请给我点鼓励,谢谢。)

一步一步迈向HIE之路

 

喜欢我文章请推我一下或给我个回应,你的鼓励会给我无限的动力喔!

若是您有其他问题或是特别需要,请在文章回应处留言,我会尽快回覆您

 

 

目录
相关文章
|
Windows 内存技术
零元学Expression Design 4 - Chapter 1 入门界面简介
原文:零元学Expression Design 4 - Chapter 1 入门界面简介 Expression Design 是Expression系列里面的一员,更是Blend跟Web的好帮手 ...
947 0
零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Paths...
1034 0
零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果
原文:零元学Expression Design 4 - Chapter 3 看小光被包围了!!如何活用「Text On Path」设计效果 本章将教大家如何活用「Text On Path」,做出文绕图以及...
1043 0
零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷
原文:零元学Expression Design 4 - Chapter 4 教你如何自制超炫笔刷 在Chapter 2 有稍微讲过Design内建笔刷的用法,本章将教大家如何自制独一无二的笔刷,并且重复利...
1016 0
|
开发工具
零元学Expression Blend 4 – Chapter 20 以实作案例学习Childwindow
原文:零元学Expression Blend 4 – Chapter 20 以实作案例学习Childwindow 本章将教大家如何运用Blend 4内建的假视窗原件-「ChildWindow」...
1147 0
零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton
原文:零元学Expression Blend 4 Chapter 22 以实作案例学习Frame及HyperlinkButton 本章将教大家如何以实作善用Blend4的内建功能-「Frame」以及「Hy...
1342 0
|
内存技术
零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧
原文:零元学Expression Blend 4 - Chapter 5 2.5D转换的使用技巧 本章将延续上篇零元学Expression Blend4 - Chapter 4元件重复运用的观念所制作的图来进行,教你如何将图做X、Y、Z空间的延伸。
1349 0
|
C#
零元学Expression Blend 4 - Chapter 2 入门界面简介
原文:零元学Expression Blend 4 - Chapter 2 入门界面简介 在这篇教学我将会介绍Expression Blend 4的基本界面,虽然有些网站已经有做了介绍,为了整个教学的完整性,就在此做补充。
1188 0
|
前端开发 容器
零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」
原文:零元学Expression Blend 4 - Chapter 34 啊~!!我不要毛毛的感觉!-使用布局修整「UseLayoutRounding」 本章将介绍UseLayoutRounding,中...
1272 0
零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷
原文:零元学Expression Blend 4 - Chapter 30 8个Expression Blend4的快捷 我针对工作区跟视窗的快捷键整理了八个Expression Blend4的快捷,也是...
1201 0