简体   繁体   中英

Is it possible to make RenderTransform animation not modify the hit area for the mouse?

I have an animation on my button template that rotates the button when IsMouseOver is true.
The animation rotates the button and so if the user doesn't place his cursor near the rotation's anchor point, the button can "run away".

What I aim for is that the button would still stay hovered if the mouse is within its original area (so even if the button rotated away from the cursor, it would stay hovered and would also receive mouse clicks, even if the clicks aren't directly on it).

I thought that using RenderTransform instead of LayoutTransform would solve my issue but unfortunately it still occurs.

How can I do it?
Thank you!


This is my storyboard (which I created with blend, so please excuse if it is messy):

 <Storyboard x:Key="HoverAnimation"> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="-10.8"> <EasingDoubleKeyFrame.EasingFunction> <BounceEase EasingMode="EaseOut"/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="border"> <EasingPointKeyFrame KeyTime="0:0:1.6" Value="0.919,0.3"> <EasingPointKeyFrame.EasingFunction> <BounceEase EasingMode="EaseOut"/> </EasingPointKeyFrame.EasingFunction> </EasingPointKeyFrame> </PointAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleX)" Storyboard.TargetName="border"> <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="0"/> </DoubleAnimationUsingKeyFrames> </Storyboard> 

In the button's template, add two items over each other (using Grid ):

  • Transparent border below, occupying the whole rectangle area, to which transformation is not applied.

  • Actual button content above, to which transformation is applied.

I can't provide tested sample code because you haven't included self-contained example.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM