C # development WeChat QR code mouse slide image display hidden effect

The client in the QR code state, the mouse over, there will be a picture of the mobile phone slide out, from hiding to display, from the display to the hidden.

The idea is simple: 1, set the transparency, 2, give a moving displacement

Let's look at the effect.

The overall code is not difficult, it is to animate the image control.

<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=" "Storyboard.targetname=" img "/>< DoubleAnimation storyboard.targetproperty= "(uielement.rendertransform). (TransformGroup.Children) [3]. (translatetransform.x) "Begintime=" 0:0:0.5 "duration=" 0:0:0.3 "from=" to= "+" 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=" "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>

However, one thing to note is that you need to set a property ishittestvisible= "false" on the image control, and the explanation on MSDN is "True if this element can be returned as a hit test result from at least one point, false otherwise." The default value is true. ”

Setting this property is very important, because there is no setting this property, I adjust the animation on the morning, also did not realize the desired effect, to show you do not set ishittestvisible= "False" effect.

Since the image is below the grid, there is no problem when the mouse is slowly drawn from the left, because the mouse does not click on the image, but if the mouse is too fast to touch the image, it will constantly trigger the MouseEnter event, resulting in constant flashing.

When ishittestvisible= "False" is set, the image will not be clicked and will not be affected.

The above is a small part of the introduction of the C # development of the two-dimensional code mouse sliding image effect, I hope we have some help, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for your support for topic.alibabacloud.com!

