Как увеличить изображение при срабатывании Image.MouseEnter?

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. Также для центрирования увеличения можно установить RenderTransformOrigin для Image на 0.5,0.5.

Вместо этих двух событий я обычно предпочитаю триггер на IsMouseOver с Enter и ExitActions.

Если вы хотите сохранить пространство, занимаемое изображением, вы можете поместить его в контейнер с фиксированным размером и установить для ClipToBounds значение true.