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>