"Выдвинутый" эффект на нажатие кнопки

Question

Я круговую кнопку, как

XAML для этого есть,

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

И я применил его как,

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

Теперь проблема когда я нажимаю кнопку, только круг сжимается, но изображение остается таким, каким оно есть. Я хочу, чтобы вся кнопка сжималась вместе с изображением, а также придавала ему идеальный «толкаемый» эффект. Любая идея, что не так?

Answer 1

Вместо того чтобы изменять размер до некоторого фиксированного значения в шаблоне вы применить ScaleTransform к основным Grid вашего шаблону

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

не забудьте установить RenderTransformOrigin="0.5,0.5"