Flipping a button in a storyboard

Question

I'm attempting to flip a button on a form using a storyboard. What I currently have is a storyboard that uses a custom grid animation to make certain grid rows grow (found here). The button that I have that initiates this storyboard has an image of arrows overlayed on it and it needs to be flipped to correct the direction of the control for the user to understand. The storyboard that I have works (as in it doesn't produce any errors) but it only makes the gridrow height property grow; the button image is not flipped vertically.

<!-- "Open the description box" Storyboard-->
<Storyboard x:Key="openDescription">
    <local:GridLengthAnimation
      Storyboard.TargetName="Row4"
      Storyboard.TargetProperty="Height"
      From="0*" To=".5*" Duration="0:0:1" 
      AccelerationRatio=".5"
      DecelerationRatio=".5"/>

    <!-- This is the section that needs to be tweaked -->
    <DoubleAnimation 
        Storyboard.TargetName="btnDetailsZoom"
        Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"
        From="0"
        To="-1"
        Duration="00:00:01"/>
</Storyboard>

<!-- Code for the button -->
<s:SurfaceButton Grid.Row="4" Grid.Column="4" VerticalAlignment="Top" Margin="25,-50,25,-50" Name="btnDetailsZoom" PreviewTouchDown="onDetailsZoom">
    <s:SurfaceButton.Background>
        <ImageBrush ImageSource="/uiTest2;component/Resources/doubleArrowUp.png" />
    </s:SurfaceButton.Background>
</s:SurfaceButton>

If anyone knows about how to correctly use the scaletransform property within a storyboard (since I'm fairly sure that's partially correct), I would greatly appreciate some guidance.

Thanks!

Answer 1

It looks like you forgot to define the Transform Property on the Button, like this:

<!-- Code for the button -->
<s:SurfaceButton Grid.Row="4" Grid.Column="4" VerticalAlignment="Top" Margin="25,-50,25,-50" Name="btnDetailsZoom" PreviewTouchDown="onDetailsZoom">
    <s:SurfaceButton.RenderTransform>
        <ScaleTransform />
    </s:SurfaceButton.RenderTransform>
    <s:SurfaceButton.Background>
        <ImageBrush ImageSource="/uiTest2;component/Resources/doubleArrowUp.png" />
    </s:SurfaceButton.Background>
</s:SurfaceButton>