使用MultiTrigger的WPF窗口演示基础动画

Question

我试图掌握如何使用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属性无法工作。有什么建议吗？

Answer 1

您需要在这里使用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"，而且它将进一步被计算为不存在的附加属性)

由于您命名了转换，所以在第二个条件下还可以使用ElementName而不是RelativeSource进行绑定。

<Condition Binding="{Binding ElementName=AnimatedTranslateTransform, Path=X}"
           Value="0"/>