WPF Windows演示基礎動畫使用MultiTrigger

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> 

在我的第二個multitrigger條件我想檢查，其中按鈕（以開始向右故事板）。我似乎無法弄清楚在條件下使用哪個屬性和值來評估該按鈕是否位於左側或右側手邊。 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"/>