零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题相关的知识,希望对你有一定的参考价值。

原文:零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题

最近收到网友Cloud的来信,询问我有关放进PathlistBox的物件,被选取後会出现蓝底蓝框的问题
经由他的同意,我决定把这个实作上遇到的问题及解决的方式,用一篇文章来跟大家分享

?

最近收到网友Cloud的来信,询问我有关放进PathlistBox的物件,被选取後会出现蓝底蓝框的问题

经由他的同意,我决定把这个实作上遇到的问题及解决的方式,用一篇文章来跟大家分享

?

本篇范例的最後成果:

(没错,这只毛虫怪又出现了,如果你看过CheckBox那篇文章,应该对牠不陌生XD)

?

?

?

?

如果你对PathlistBox的基本认识还不够,建议您先参考这篇

若是对PathlistBox已有足够的熟悉度,那我们开始噜!

?

01

首先让我们还原整个实作的过程

在工作区放入一个PathListBox,并在里面置入一张图片

技术分享图片

?

并且在工作区中放入如下图范例般的Path线段

技术分享图片

?

接着,我们让毛虫怪跟着Path的线条方向移动

所以使用StoryBoard的动画设置,配合Start的数值

技术分享图片

?

动画设置完成後,别忘记要给它一个触发条件

放进一个ControlStoryBoardAction

EventName设为Loaded,因为要使动画在页面Load完时候直接拨放

ControlStoryboardOption设为Play

技术分享图片

?

完成後,请按下F5预览看看

技术分享图片

?

看似正常的毛虫怪,似乎没有甚麽不正常的地方

但是当你使用滑鼠对牠做点击的动作时,牠的周围以及底部就会出现蓝色框蓝色底

?

这就是网友Cloud问我的问题了。

?

?

02

还原了状况,让我们来看看如何解决这个问题

?

首先,先在跟大家补充一个PathListBox的特性:

因为PathListBox内的物件,是可以被选取的

所以在PathListBox的State内,会有ㄧ个名叫Selected的状态

?

既然了解了这个状态,那我们就需要从Template下手

请在选取PathListBox後->Edit Additional Templates->Edit Generated Item Container->Edit a Copy

技术分享图片

?

命名後,按下OK

技术分享图片

?

点看看fillcolor以及FocusViscualElement你就会发现罪魁祸首了!!

可以看到Properties->Brushes->Fill以及Stroke出现了我们刚刚在浏览器看到的蓝色填色

技术分享图片

?

State下找到Selected後,在Selected是"录影"模式下,把预设的填色全都清掉

(录影模式下,左上角的小红点会亮起,如果你熟Blend的动画制作,应该不陌生)

技术分享图片

?

填色修改完成後,再次按下F5,并且点击毛虫怪试看看

蓝色框底的问题,是不是就解决了呢?

技术分享图片

?

?

很感谢Cloud提供实作上遇到的问题,能让我与大家分享

如果您在Blend的实作上有各种问题,也欢迎寄信给我,让彼此做交流~

?

附上范例原始档:

?

?

?

本篇的教学就到此。

?

?

?

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

一步一步迈向HIE之路

 

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

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

 

 


以上是关于零元学Expression Blend 4 - Chapter 27 PathlistBox被Selected时的蓝底蓝框问题的主要内容,如果未能解决你的问题,请参考以下文章

零元学Expression Blend 4 - Chapter 10 用实例了解布局容器系列-「StackPanel」

零元学Expression Blend 4 - Chapter 19 如何让做好的Blend专案变Silverlight网页

零元学Expression Blend 4 - Chapter 8 用实例了解布局容器系列-「Grid」

零元学Expression Blend 4 - Chapter 11 用实例了解布局容器系列-「Border」

零元学Expression Blend 4 - Chapter 9 用实例了解布局容器系列-「Canvas」

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