WPF rotate content/background of button on mouse over

Question

I'm trying to rotate the content or background of my button when the mouse hovers the button.

Not sure if this is the correct way to do it but i'm stuck:

 <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>

My button is originally like this, and it needs to rotate the content (Grid in this case):

         <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>

I tried via a style but also stuck. :s

Answer 1

You were almost there - use your original Button, add a Tranformation to the Grid. Take the Eventtrigger from your solution and only add the name of the Grid ("RotationGrid" in my Solution).

<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>