1

我正在尝试了解如何使用 WPF XAML 制作动画。我正在努力让我的动画根据正确的条件触发，现在我需要一些帮助。

只是为了笑，我想制作一个带有按钮的页面，该按钮将通过移动到画布上的不同位置来躲避任何按下的尝试。这是我想要的动画的插图： 在此处输入图像描述

我想简单地使用 XAML（并且没有代码隐藏）来解决这个问题，但是如果代码附有解释为什么不能简单地通过声明适当的 XAML 来解决这个问题，我愿意接受使用代码的解决方案。

这是我到目前为止所拥有的：

 <Page x:Class="myApp.SecondPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
  xmlns:c="clr-namespace:myApp"
  d:DesignHeight="300" d:DesignWidth="500"
Title="SecondPage" Height="300" Width="500">
<Page.Resources>        
    <PathGeometry x:Key="AnimationPath" Figures="M 0,0 C -130,-100 -130,-60 -130,-0"/>
    <Style x:Key="secondButton" TargetType="Button">
        <Setter Property="Content" Value="Button"></Setter>
        <Style.Triggers>
            <MultiTrigger >
                <MultiTrigger.Conditions>
                    <Condition  Property="IsMouseOver" Value="True"></Condition>
 <!--Doesn't work --><Condition Property="TranslateTransform.X" Value="0"></Condition>
                </MultiTrigger.Conditions>
                <MultiTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingPath x:Name="XAnim"
                                   FillBehavior="HoldEnd"
                                   Storyboard.TargetProperty="RenderTransform.X"
                                   PathGeometry="{StaticResource AnimationPath}"
                                   Source="X" 
                                   Duration="0:0:.2"  
                                   />
                            <DoubleAnimationUsingPath x:Name="YAnim"
                                   FillBehavior="HoldEnd"
                                   Storyboard.TargetProperty="RenderTransform.Y"                                       
                                   PathGeometry="{StaticResource AnimationPath}"
                                   Source="Y" 
                                   Duration="0:0:.2"  
                                  />                             
                        </Storyboard>

                    </BeginStoryboard>

                </MultiTrigger.EnterActions>
            </MultiTrigger>
        </Style.Triggers>
    </Style>
</Page.Resources>

    <Grid>
    <Canvas HorizontalAlignment="Stretch" Name="MyCanvas" VerticalAlignment="Stretch" IsManipulationEnabled="True">
      <Button  Style="{StaticResource secondButton}" Canvas.Left="150" Canvas.Top="240" Height="48" x:Name="theButton" Width="115" FontSize="18" ForceCursor="False">
            <Button.RenderTransform>
                <TranslateTransform x:Name="AnimatedTranslateTransform"/>
            </Button.RenderTransform>
        </Button>
    </Canvas>
</Grid>

在我的第二个多重触发条件中，我试图检查按钮的位置（以便启动正确的故事板）。我似乎无法弄清楚在条件中使用哪个属性和值来评估按钮是在左侧还是右侧。该TranslateTransform.X属性不起作用。有什么建议么？

4

1 回答 1

4

你需要在MultiDataTrigger这里工作才能完成转换：

<Style x:Key="secondButton" TargetType="Button">
    <Style.Triggers>
        <!-- ... -->
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsMouseOver}"
                        Value="True" />
                <Condition Binding="{Binding RelativeSource={RelativeSource Self}, Path=RenderTransform.X}"
                        Value="0"/>
            </MultiDataTrigger.Conditions>
            <!-- ... -->
        </MultiDataTrigger>
    </Style.Triggers>
</Style>

（在普通的 MultiTrigger 中，您只能访问即时属性，Property="TranslateTransform.X"这不仅是错误的，因为它应该是错误的，Property="RenderTransform.X"而且它会进一步被评估为不存在的附加属性）

由于您命名了 Transform，您还可以在第二个条件中使用绑定 usingElementName而不是。RelativeSource

<Condition Binding="{Binding ElementName=AnimatedTranslateTransform, Path=X}"
           Value="0"/>
于 2011-05-28T21:13:23.950 回答