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!
<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.