0

我在风格上制作了一个按钮动画。放置在 Grid 中的按钮的所有元素。但是如果没有在网格中设置背景，动画就不能正常工作。

按钮：

<Grid>
  <Rectangle Fill="{TemplateBinding Background}"
    RenderTransformOrigin="0.5,0.5"
    Margin="5">
    <Rectangle.RenderTransform>
        <RotateTransform x:Name="RotateTransform" 
            Angle="0"/>
    </Rectangle.RenderTransform>
  </Rectangle>
</Grid>

动画：

<ControlTemplate.Triggers>

<EventTrigger RoutedEvent="MouseEnter">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetName="RotateTransform"
                Storyboard.TargetProperty="Angle"
                RepeatBehavior="Forever" 
                Duration="0:0:0.3" 
                To="60"/>
            <!--360 / 6 (number of gear teeth on the image) = 60-->
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

<EventTrigger RoutedEvent="MouseLeave">
    <BeginStoryboard>
        <Storyboard>
            <DoubleAnimation Storyboard.TargetName="RotateTransform"
                Storyboard.TargetProperty="Angle"
                Duration="0:0:0.2"
                To="0"/>
        </Storyboard>
    </BeginStoryboard>
</EventTrigger>

没有背景的网格：

https://habrastorage.org/files/152/b26/179/152b26179cbb43c4b03e93357501df18.gif

带背景的网格：

https://habrastorage.org/files/b55/6aa/831/b556aa8315bb4bfdb5f2a0e1f0810dae.gif

为什么会这样？

4

1 回答 1

0

感谢dkozl的回答：

因为没有网格的背景区域是不可见的命中测试，所以 MouseEnter/MouseLeave 只会出现在您的部分内容上，而不是整个网格上。您可以使用透明初始化它，这将具有与默认空值相同的视觉效果，但会使整个网格区域命中测试可见

因此，解决方案是设置透明背景：

<Grid Background="#00000000"><!--Transparent background-->
   <Rectangle Fill="{TemplateBinding Background}"
              RenderTransformOrigin="0.5,0.5"
              Margin="5">
      <Rectangle.RenderTransform>
         <RotateTransform x:Name="RotateTransform" 
                          Angle="0"/>
   </Rectangle.RenderTransform>
  </Rectangle>
</Grid>
于 2015-05-06T07:31:14.250 回答