WPF旋轉鼠標上的按鈕的內容/背景

Question

我想旋轉鼠標懸停按鈕時我的按鈕的內容或背景。

不知道這是做了正確的方式，但我堅持：

<Button Width="48" Height="48" Grid.Column="1" 
       BorderThickness="0"> 
     <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.MouseEnter"> 
      <BeginStoryboard> 
      <Storyboard> 
       <DoubleAnimation Storyboard.TargetName="xxx" 
           Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
           By="-360" Duration="0:0:4" 
           AutoReverse="False" RepeatBehavior="Forever" /> 
      </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
     </Button.Triggers> 
     <Button.Background> 
     <VisualBrush> 
      <VisualBrush.Visual> 
      <Grid x:Name="xxx" RenderTransformOrigin="0.5,0.5" Width="48" Height="48"> 
       <Rectangle Fill="Blue" Width="48" Height="48" /> 
       <Rectangle Fill="Green" Width="14" Height="14" /> 
       <Grid.RenderTransform> 
       <RotateTransform /> 
       </Grid.RenderTransform> 
      </Grid> 
      </VisualBrush.Visual> 
     </VisualBrush> 
     </Button.Background> 
    </Button> 

我的按鈕本來是這樣的，它需要旋轉內容（網格在這種情況下）：

  <Button Width="48" Height="48" Grid.Column="1" 
       BorderThickness="0"> 
      <Grid> 
       <Rectangle Fill="Blue" Width="48" Height="48" /> 
       <Rectangle Fill="Green" Width="14" Height="14" /> 
      </Grid> 
    </Button> 

我嘗試了一種風格，但也卡住了。 ：s

Answer 1

你幾乎在那裏 - 使用你的原始按鈕，添加一個Tranformation到網格。從您的解決方案中取出Eventtrigger，只添加網格的名稱（我的解決方案中爲「RotationGrid」）。

<Button Width="48" Height="48"> 
    <Button.Triggers> 
     <EventTrigger RoutedEvent="Button.MouseEnter"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="RotateGrid" 
         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
         By="-360" Duration="0:0:4" 
         AutoReverse="False" RepeatBehavior="Forever" /> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="Button.MouseLeave"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="RotateGrid" 
         Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" 
         By="0" Duration="0:0:4" 
         AutoReverse="False" RepeatBehavior="Forever" /> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Button.Triggers> 
    <Grid x:Name="RotateGrid"> 
      <Rectangle Fill="Blue" Width="48" Height="48" /> 
      <Rectangle Fill="Green" Width="14" Height="14" /> 
      <Grid.RenderTransform> 
       <RotateTransform Angle="0" CenterX="24" CenterY="24"></RotateTransform> 
      </Grid.RenderTransform> 
    </Grid> 
</Button>