C # Development of micro-letter two-dimensional code mouse slide image display hidden effect (recommended) _ Practical skills

Client micro-letter in the two-dimensional code state, the mouse over, there will be a mobile phone's picture sliding out, from hidden to display, from the display to the hidden.

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

First look at the effect of doing

The overall code is not difficult, is to the image control set animation effect.

<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= "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" > &LT;EVENTTRIGGER.ACTIONS&GT <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>

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

It is important to set this property, because there is no setting this property, I tuned the animation in the morning, also did not achieve the desired effect, to see you do not set ishittestvisible= "False" effect.

Because image is under the grid, so when the mouse slowly from the left side of the row is not a problem, because the mouse can not click on the image, but if the mouse sliding too fast, contact with image, will continue to trigger MouseEnter events, resulting in constant flicker.

When ishittestvisible= "False" is set, the image is not clicked and has no effect.

The above is a small series to introduce the C # development of micro-letter two-dimensional code mouse slide image hidden effect, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!