Question

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

按钮：

<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

为什么会这样？

Answer 1

感谢dkozl的回答：

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

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

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

为什么Grid需要预定的背景？

1 个答案: