2017-06-23 116 views
1

我的表單上有一個簡單的圖像。我想要做的是,當我將圖像懸停時,它開始創建一個基本上360度循環的故事板。 這裏的故事板,這就是所謂的TurnLogo:徘徊圖像時開始故事板

<Storyboard x:Key="TurnLogo"> 
     <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="image"> 
      <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/> 
      <EasingDoubleKeyFrame KeyTime="0:0:1" Value="360"/> 
     </DoubleAnimationUsingKeyFrames> 
    </Storyboard> 

這裏是我的形象:

<Image x:Name="image" HorizontalAlignment="Left" Height="64" VerticalAlignment="Top" Width="64" Source="Images/Logo/Logomakr_3lb9fd.png" Margin="7,7,0,0" RenderTransformOrigin="0.5,0.5"> 
      <Image.RenderTransform> 
       <TransformGroup> 
        <ScaleTransform/> 
        <SkewTransform/> 
        <RotateTransform/> 
        <TranslateTransform/> 
       </TransformGroup> 
      </Image.RenderTransform> 
      <Image.Style> 
       <Style> 
        <Style.Triggers> 
         <EventTrigger RoutedEvent="Control.MouseEnter"> 
          <BeginStoryboard Storyboard="{StaticResource TurnLogo}"/> 
         </EventTrigger> 
        </Style.Triggers> 
       </Style> 
      </Image.Style> 
     </Image> 

當我將鼠標懸停在圖像失敗。爲什麼?

回答

2

刪除Storyboard.TargetName

<Storyboard x:Key="TurnLogo"> 
    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" 
        By="360" Duration="0:0:1"/> 
</Storyboard> 

和簡化的RenderTransform:

<Image ... RenderTransformOrigin="0.5,0.5"> 
    <Image.RenderTransform> 
     <RotateTransform/> 
    </Image.RenderTransform> 
    <Image.Style> 
     <Style TargetType="Image"> 
      <Style.Triggers> 
       <EventTrigger RoutedEvent="MouseEnter"> 
        <BeginStoryboard Storyboard="{StaticResource TurnLogo}"/> 
       </EventTrigger> 
      </Style.Triggers> 
     </Style> 
    </Image.Style> 
</Image> 
+0

非常感謝你解決我的問題! – user3673720