WPF style to perform translation after scaling

Question

Hi all,

I've got a button style that I've been developing in WPF, as stated in this question. Another thing I'd like to do with this style is to have the button shrink just a little bit, to make it appear like it's getting clicked as it's getting clicked. Right now, the transform code looks like:

<Trigger Property="IsPressed" Value="True">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <TransformGroup>
                <ScaleTransform ScaleX="0.98" ScaleY="0.98"/>
                <SkewTransform AngleX="0" AngleY="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
        </Setter.Value>
    </Setter>
    <Setter Property="Button.BitmapEffect">
        <Setter.Value>
            <OuterGlowBitmapEffect GlowColor="Green" GlowSize="10"></OuterGlowBitmapEffect>
        </Setter.Value>                                
    </Setter>
</Trigger>

So, that's exciting. Problem is, the scale transform scales the image associated with the button to the upper left of the area where the button is (ie, it's rescaling to the 0,0 coordinate of the button, or at least, that's what I assume).

My understanding of the TranslateTransform is that it's in pixel coordinates, not in coordinates relative to the size of the object. If I put in a TranslateTransform of 0.01, 0.01, then it will move the button by 0.01 pixels in both x and y, rather than 0.01*sizeof(imagedimension) pixels in each direction. How can I get that relative transform, and how can I have it happen as a style, ie, so I don't have to do different math for every different button size I've got?

Answer 1

You need to set the RenderTransformOrigin on the Button to 0.5 by 0.5:

RenderTransformOrigin="0.5,0.5"

Answer 2

To scale through the center you can add in your trigger:

<Setter Property="RenderTransformOrigin" Value=".5,.5"/>