title: Make ScaleTransform start from Center instead of Top-Left Corner
body: <p>I have the following Style for a Button which is supposed to grow to 1.5 times the size when the mouse hovers it. The problem is that Button grows from the Top-Left corner instead of the center. Does anyone know how to fix this?</p>
  
  <pre><code>&lt;Style x:Key="sizeButton" TargetType="Button"&gt;
      &lt;Style.Triggers&gt;
          &lt;Trigger Property="IsMouseOver" Value="True"&gt;
              &lt;Setter Property="RenderTransform"&gt;
                  &lt;Setter.Value&gt;
                      &lt;ScaleTransform ScaleX="1.5" ScaleY="1.5"/&gt;
                  &lt;/Setter.Value&gt;
              &lt;/Setter&gt;
          &lt;/Trigger&gt;
      &lt;/Style.Triggers&gt;
  &lt;/Style&gt;
  </code></pre>
  
  <p>Tried the solution offered by Henk Holterman but I couldn't get the following code to work. It seems to have no effect or am I doing it wrong?</p>
  
  <pre><code>&lt;Window.Resources&gt;
      &lt;Style x:Key="sizeButton" TargetType="Button"&gt;
          &lt;Style.Triggers&gt;
              &lt;Trigger Property="IsMouseOver" Value="True"&gt;
                  &lt;Setter Property="RenderTransform"&gt;
                      &lt;Setter.Value&gt;
                          &lt;ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/&gt;
                      &lt;/Setter.Value&gt;
                  &lt;/Setter&gt;
              &lt;/Trigger&gt;
          &lt;/Style.Triggers&gt;
      &lt;/Style&gt;
  &lt;/Window.Resources&gt;
  &lt;StackPanel&gt;
      &lt;Button Content="Increase Size" Width="100" Height="50" Style="{StaticResource sizeButton}"/&gt;
  &lt;/StackPanel&gt;
  </code></pre>