C#开发微信 二维码鼠标滑动 图像显示隐藏效果(推荐)

客户端微信在二维码状态下，鼠标滑过，会有一张手机的图片滑动滑出，从隐藏到显示，从显示到隐藏。

思路很简单：1、设置透明度；2、给个移动的位移

先看下做的效果

整体代码也不难，就是给image控件设置动画效果。

<grid x:name="grid_content" background="whitesmoke" grid.row="1">
<grid.triggers>
<eventtrigger routedevent="grid.mouseenter">
<eventtrigger.actions>
<beginstoryboard handoffbehavior="snapshotandreplace">
<storyboard>
<doubleanimation storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" begintime="0" duration="0:0:0.5" from="0" to="300" storyboard.targetname="img"/>
<doubleanimation storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" begintime="0:0:0.5" duration="0:0:0.3" from="300" to="270" storyboard.targetname="img"/>
<doubleanimation storyboard.targetproperty="opacity" begintime="0" duration="0:0:0.5" from="0" to="1" storyboard.targetname="img"/> 
</storyboard>
</beginstoryboard>
</eventtrigger.actions>
</eventtrigger>
<eventtrigger routedevent="grid.mouseleave">
<eventtrigger.actions>
<beginstoryboard handoffbehavior="snapshotandreplace">
<storyboard> 
<doubleanimation storyboard.targetproperty="(uielement.rendertransform).(transformgroup.children)[3].(translatetransform.x)" begintime="0" duration="0:0:0.5" from="270" to="0" storyboard.targetname="img"/>
<doubleanimation storyboard.targetproperty="opacity" begintime="0" duration="0:0:0.5" from="1" to="0" storyboard.targetname="img"/>
</storyboard>
</beginstoryboard>
</eventtrigger.actions>
</eventtrigger>
</grid.triggers>
</grid>
<image x:name="img" source="/image/huadong.png" visibility="visible" opacity="0" grid.row="0" grid.rowspan="2" ishittestvisible="false">
<image.rendertransform>
<transformgroup>
<scaletransform/>
<skewtransform/>
<rotatetransform/>
<translatetransform/>
</transformgroup>
</image.rendertransform>
</image>

但是需要注意的一点就是，需要给image控件设置一个属性ishittestvisible="false"，msdn上的解释是“如果此元素可以从至少一个点上作为命中测试结果返回，则为 true，否则为 false。默认值为 true。”

设置这个属性很重要，因为没有设置这个属性，我调动画调了一早上，也没实现想要的效果，给大家看看不设置ishittestvisible="false"的效果。

由于image处于grid的下方，所以当鼠标从左侧慢慢划入时是没有问题的，因为鼠标点击不到image，但是如果鼠标滑动过快，接触到image，则会不断的触发mouseenter事件，从而出现不断的闪烁。

当设置了ishittestvisible="false"时，则image不会被点击到，也就没有影响了。

以上所述是小编给大家介绍的c#开发微信 二维码鼠标滑动 图像显隐效果，希望对大家有所帮助