このColorAnimationコードが機能しないのはなぜですか？

Question

このコードを使用して、LinearGradientBrushで作成された2つのグラジエントストップをアニメーション化しています。実行時には、コードは最初の勾配で停止し、アニメーションはまったくありません。例外/エラーもありません。

XAML：

<StackPanel x:Name="myStackPanel" Loaded="myStackPanel_Loaded"> 
    <StackPanel.Triggers> 
     <EventTrigger RoutedEvent="StackPanel.Loaded"> 
      <BeginStoryboard> 
       <Storyboard x:Name="colorStoryboard1" Completed="colorStoryboard1_Completed"> 
        <ColorAnimation Storyboard.TargetName="GradStop1" 
        Storyboard.TargetProperty = "Color" 
          From="Lavender" To="PaleVioletRed" Duration="0:0:5"/> 
        <ColorAnimation Storyboard.TargetName="GradStop2" 
        Storyboard.TargetProperty = "Color" 
          From="White" To="Lavender" Duration="0:0:5"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 

    </StackPanel.Triggers> 

    <Panel.Background> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0"/> 
      <GradientStop x:Name="GradStop2" Color="White" Offset="1"/> 
     </LinearGradientBrush> 
    </Panel.Background> 

</StackPanel> 

トリガ・コード：

public MainPage() 
    { 

     this.InitializeComponent(); 
     colorStoryboard1.Begin(); 

    } 

Answer 1

Triggers、EventTrigger、BeginStoryboardは一般UWPアプリで使用されていない、これらのAPIは、主に、もともとマイクロソフトのSilverlightを使用XAMLでの互換性のために存在します。 UWPアプリでは、組み込みのアニメーションを使用する必要があります。

ただし、アニメーションによってレイアウトが変更されたり、UIスレッドのパフォーマンスに影響を及ぼす可能性がある場合は、アニメーションを明示的に有効にして動作を確認する必要があります。つまり、EnableDependentAnimationプロパティを有効にする必要があります。詳細はColorAnimation.EnableDependentAnimation propertyを参照してください。

ですから、このように例えば、あなたのコードを変更することができます

<StackPanel x:Name="myStackPanel"> 
    <StackPanel.Triggers> 
     <EventTrigger RoutedEvent="StackPanel.Loaded"> 
      <BeginStoryboard> 
       <Storyboard x:Name="colorStoryboard1" Completed="colorStoryboard1_Completed"> 
        <ColorAnimation Storyboard.TargetName="GradStop1" 
         Storyboard.TargetProperty = "Color" 
         From="Lavender" To="PaleVioletRed" Duration="0:0:5" EnableDependentAnimation="True" /> 
        <ColorAnimation Storyboard.TargetName="GradStop2" 
         Storyboard.TargetProperty = "Color" 
         From="White" To="Lavender" Duration="0:0:5" EnableDependentAnimation="True" /> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </StackPanel.Triggers> 

    <StackPanel.Background> 
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
      <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0" /> 
      <GradientStop x:Name="GradStop2" Color="White" Offset="1" /> 
     </LinearGradientBrush> 
    </StackPanel.Background> 
</StackPanel> 

をこの方法では、すでにXAMLでトリガーを定義しているので、背後にあるコードで再びそれをトリガーする必要はありません。

そして場合には、あなたが、ここではサンプルである組み込みのアニメーションUWPに興味している：背後

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.Resources> 
     <Storyboard x:Name="std"> 
      <ColorAnimation Storyboard.TargetName="GradStop1" 
          Storyboard.TargetProperty = "Color" 
          From="Lavender" To="PaleVioletRed" Duration="0:0:5" EnableDependentAnimation="True" /> 
      <ColorAnimation Storyboard.TargetName="GradStop2" 
          Storyboard.TargetProperty = "Color" 
          From="White" To="Lavender" Duration="0:0:5" EnableDependentAnimation="True" /> 
     </Storyboard> 
    </Grid.Resources> 
    <StackPanel x:Name="myStackPanel" Loaded="myStackPanel_Loaded">  
     <StackPanel.Background> 
      <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
       <GradientStop x:Name="GradStop1" Color="Lavender" Offset="0" /> 
       <GradientStop x:Name="GradStop2" Color="White" Offset="1" /> 
      </LinearGradientBrush> 
     </StackPanel.Background> 
    </StackPanel> 
</Grid> 

コード：

private void myStackPanel_Loaded(object sender, RoutedEventArgs e) 
{ 
    std.Begin(); 
}