为什么Grid需要预先设定背景?

Why Grid is needed predetermined background?

我制作了一个按钮动画风格。将一个按钮的所有元素放置在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

为什么会这样?

感谢dkozl的回答:

Because without Background area of the Grid is not hit test visible so MouseEnter/MouseLeave will appear only on part of your content and not whole Grid. You can initialize it with Transparent, which will have same visual effect as default null, but will make whole Grid area hit test visible

所以,解决方案是设置透明背景:

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