HOW TO：使用腳本建立屬性的動畫後進行設定

發行項
08/21/2008

更新：2007 年 11 月

在某些情況下，建立屬性值的動畫之後，可能會出現看似無法變更該屬性值的狀況。

範例

下列範例使用 Storyboard 建立 SolidColorBrush 的色彩動畫。按一下按鈕時，便會觸發此腳本。系統會處理 Completed，讓程式在 ColorAnimation 完成時收到通知。

<Button
  Content="Animate and Then Set Example 1">
  <Button.Background>
    <SolidColorBrush x:Name="Button1BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button1BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton1BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

在 ColorAnimation 完成之後，程式會嘗試將筆刷的色彩變更為藍色。

private void setButton1BackgroundBrushColor(object sender, EventArgs e)
{

    // Does not appear to have any effect:
    // the brush remains yellow.
    Button1BackgroundBrush.Color = Colors.Blue;
}

前述程式碼看似沒有任何效果：筆刷仍為黃色，也就是建立筆刷動畫效果之 ColorAnimation 所提供的值。實際上基礎屬性值 (基底值) 已經變更為藍色。但是有效的值或是目前的值仍然是黃色，因為 ColorAnimation 還是會覆寫基底值。如果要讓基底值再次變成有效值，您必須停止動畫對屬性的影響。有三種方式可以對腳本動畫執行這個動作：

將動畫的 FillBehavior 屬性設定為 Stop。
移除整個腳本。
從個別屬性移除動畫。

將動畫的 FillBehavior 屬性設定為 Stop

將 FillBehavior 設定為 Stop，可以指示動畫在其作用期結束後停止影響它的目標屬性。

<Button
  Content="Animate and Then Set Example 2">
  <Button.Background>
    <SolidColorBrush x:Name="Button2BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button2BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="Stop"
            Completed="setButton2BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton2BackgroundBrushColor(object sender, EventArgs e)
{

    // This appears to work:
    // the brush changes to blue.
    Button2BackgroundBrush.Color = Colors.Blue;
}

移除整個腳本

使用 RemoveStoryboard 觸發程序 (Trigger) 或 Storyboard.Remove 方法，可以指示腳本動畫停止影響其目標屬性。這個方法和設定 FillBehavior 屬性的差別是您可以隨時移除腳本，而 FillBehavior 屬性只在動畫的作用期結束時才有作用。

<Button
  Name="Button3"
  Content="Animate and Then Set Example 3">
  <Button.Background>
    <SolidColorBrush x:Name="Button3BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard Name="MyBeginStoryboard">
        <Storyboard x:Name="MyStoryboard">
          <ColorAnimation
            Storyboard.TargetName="Button3BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton3BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton3BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    MyStoryboard.Remove(Button3);
    Button3BackgroundBrush.Color = Colors.Blue;
}

從個別屬性移除動畫

讓動畫停止影響屬性的另一種方法是使用顯示為動畫之物件的 BeginAnimation(DependencyProperty, AnimationTimeline) 方法。請將顯示動畫的屬性指定為第一個參數，而 null 則為第二個參數。

<Button
  Name="Button4"
  Content="Animate and Then Set Example 4">
  <Button.Background>
    <SolidColorBrush x:Name="Button4BackgroundBrush"
      Color="Red" />
  </Button.Background>
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <ColorAnimation
            Storyboard.TargetName="Button4BackgroundBrush"
            Storyboard.TargetProperty="Color"
            From="Red" To="Yellow" Duration="0:0:5"
            FillBehavior="HoldEnd"
            Completed="setButton4BackgroundBrushColor" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

private void setButton4BackgroundBrushColor(object sender, EventArgs e)
{

     // This appears to work:
    // the brush changes to blue.
    Button4BackgroundBrush.BeginAnimation(SolidColorBrush.ColorProperty, null);
    Button4BackgroundBrush.Color = Colors.Blue;
}

這個方法也適用於非腳本動畫。