翻转故事板中的按钮

时间:2012-07-11 19:59:33

标签: wpf xaml storyboard pixelsense scaletransform

我正在尝试使用故事板翻转表单上的按钮。我目前拥有的是一个故事板,它使用自定义网格动画来使某些网格行增长(找到here)。启动此故事板的按钮有一个叠加在其上的箭头图像,需要翻转以纠正控件的方向以供用户理解。我工作的故事板(因为它不会产生任何错误),但它只会使gridrow height属性增长;按钮图像不会垂直翻转。

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

如果有人知道如何在故事板中正确使用scaletransform属性(因为我很确定这部分是正确的),我将非常感谢一些指导。

谢谢!

1 个答案:

答案 0 :(得分:2)

您似乎忘了在Button上定义转换属性,如下所示:

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