按下按钮“推”效果

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"