Question

我希望在Image点火时放大Image.MouseEnter，然后在Image.MouseLeave点火时缩小。我想创建一个触发器，但没有运气。

这是我到目前为止所尝试的：

    <Image Name="logo" Source="{Binding Path=ImagePath}" 
          Width="50" Height="50">
      <Image.RenderTransform>
          <ScaleTransform x:Name="TransRotate"  />
      </Image.RenderTransform>
      <Image.Triggers>
    <EventTrigger RoutedEvent="Image.MouseEnter">
        <BeginStoryboard>
            <Storyboard>
                <DoubleAnimation Storyboard.TargetName="TransRotate" 
                         Storyboard.TargetProperty="ScaleX"
                         From="0" To="100"
                         BeginTime="0:0:0"
                         Duration="0:0:10"  
                         AutoReverse="False"/>
                <DoubleAnimation Storyboard.TargetName="TransRotate" 
                         Storyboard.TargetProperty="ScaleY"
                         From="0" To="100"                                                           
                         BeginTime="0:0:0"
                         Duration="0:0:10"
                         AutoReverse="False"/>
            </Storyboard>
        </BeginStoryboard>
    </EventTrigger>
  </Image.Triggers>
</Image>

这是正确的方法，还是有更好的方法？

Answer 1

我会删除From属性，这会使动画跳转，除此之外你似乎缺少MouseLeave上的反向动画。另外，为了使缩放居中，您可以将Image的{{3}}设置为0.5,0.5。

除了使用这两个事件，我通常更喜欢使用RenderTransformOrigin和Enter IsMouseOver上的触发器。

如果您想保留图片所占用的空间，可以将其放在具有固定大小的容器中，并将ClipToBounds设置为true。

如何在Image.MouseEnter触发时放大图像？

1 个答案: