wpf rotate image around center

Question

I have an image on a button which I would like to rotate when the user clicks it. I allmost have it to work. The image rotates fine on click, but it doesn't rotate round its center.

How can I make the image rotate around its center and not the top left corner?

Here is my code:

<Button Name="btnRefreshPortList"     Grid.Column="1"     Margin="10 0 0 0"     Command="{Binding RefreshPortList}">      <Image Source="Images/refresh.jpg"          Height="15">         <Image.RenderTransform>             <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />         </Image.RenderTransform>         <Image.Triggers>             <EventTrigger RoutedEvent="MouseDown">                 <BeginStoryboard>                     <Storyboard>                         <DoubleAnimation Storyboard.TargetName="AnimatedRotateTransform"                              Storyboard.TargetProperty="Angle"                              By="10"                                     To="360"                              Duration="0:0:0.5"                              FillBehavior="Stop" />                     </Storyboard>                 </BeginStoryboard>             </EventTrigger>         </Image.Triggers>     </Image> </Button> 

BR FireFly3000

Answer 1

Just set RenderTransformOrigin to (0.5, 0.5) on the image

<Image Source="Images/refresh.jpg"      RenderTransformOrigin=".5,.5"     Height="15"> ...