WeChat QR code, move the mouse, hide the image, and slide

Two-dimensional code, move the mouse, hide the image, and slide

When the client slides over the QR code, an image on the mobile phone slides out, from hiding to displaying, from displaying to hiding.

The idea is simple: 1. Set transparency; 2. assign a shift

Let's take a look at the effect.

The overall code is not difficult, that is, to set the animation effect for 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="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>

Some code

However, you need to set an attribute IsHitTestVisible = "False" for the Image control. The explanation on MSDN is that "if this element can be returned as a hit test result from at least one point, isTrueOtherwiseFalse. The default value isTrue."

It is very important to set this attribute because it was not set. I moved to the painting for a long time and didn't achieve the desired effect. Let's see if I didn't set IsHitTestVisible = "False.

Because the Image is below the Grid, it is no problem when you drag the mouse slowly from the left side, because the mouse cannot click the Image, but if the mouse slides too fast, it is exposed to the Image, the MouseEnter event will be triggered continuously, and the flash will appear continuously.

When IsHitTestVisible = "False" is set, the Image will not be clicked and will not be affected.