"Pushed" effect on button press - wpf

Question

I have circular button as
XAML for that is,
<!--round button-->
<Style x:Key ="roundButtonTemplate" TargetType ="{x:Type Button}">
<Setter Property ="Margin" Value ="10,0,10,10"/>
<Setter Property ="Template">
<Setter.Value>
<ControlTemplate TargetType ="{x:Type Button}">
<Grid>
<Ellipse x:Name ="OuterRing" Width ="40" Height ="40" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property ="IsPressed" Value ="True">
<Setter TargetName ="OuterRing" Property ="Height" Value ="30"/>
<Setter TargetName ="OuterRing" Property ="Width" Value ="30"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And I have applied it as,
<Button Style="{StaticResource roundButtonTemplate}" Click="button_Click" Background="#CC41B1E1" Width="42" Height="42" Margin="0,0,10,0">
<Image Height="24" Width="24" Source="/Images/add.png" />
</Button>
Now the problem is when I press the button only the circle shrinks but the image remains as it is. I want the whole button to shrink with image as well to give it a perfect "Pushed" effect.
Any idea what is getting wrong?

Answer 1

Instead of changing size to some fixed value in you template apply ScaleTransform to main Grid of your template
<ControlTemplate TargetType ="{x:Type Button}">
<Grid RenderTransformOrigin="0.5,0.5" x:Name="RootGrid">
<Ellipse x:Name ="OuterRing" Width ="40" Height ="40" Fill="{TemplateBinding Background}"/>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property ="IsPressed" Value ="True">
<Setter TargetName="RootGrid" Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="0.9" ScaleY="0.9"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
don't forget to set RenderTransformOrigin="0.5,0.5"