2017-01-30 7 views
0

状態を表示するために画像を使用したいと思います。これらの画像の1つを読み込みスピナーそのスピナーは、トリガーを使用しているとき。私は、画像を回転させています。しかし、このアプローチは、エラーをスローするようだ「アニメーション化することはできません 『(RenderTransform)。(RotateTransform.Angle)』不変オブジェクトインスタンスの」ストーリーボードスローでDataTriggerを使用するWPF画像不変オブジェクトインスタンスで((RenderTransform)。(RotateTransform.Angle) 'をアニメートできません。

<ItemsControl ItemsSource="{Binding StatefulViewModels}" 
       HorizontalContentAlignment="Stretch"> 
    <ItemsControl.ItemTemplate> 
     <DataTemplate> 
      <StackPanel> 
       <Expander IsEnabled="{Binding IsCompleted}"> 
        <Expander.Header> 
         <StackPanel Orientation="Horizontal"> 
          <Image Margin="5" Width="18"> 
           <Image.RenderTransform> 
            <RotateTransform Angle="0" CenterX="9" CenterY="9"/> 
           </Image.RenderTransform> 
           <Image.Style> 
            <Style TargetType="{x:Type Image}"> 
             <Style.Triggers> 
              <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedWithErrors}"> 
               <Setter Property="Source" Value="../Images/Failed.png" /> 
              </DataTrigger> 
              <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedSuccessfully}"> 
               <Setter Property="Source" Value="../Images/Success.png"/> 
              </DataTrigger> 
              <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Unexecuted}"> 
               <Setter Property="Source" Value="../Images/Waiting.png"/> 
              </DataTrigger> 
              <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Running}"> 
               <Setter Property="Source" Value="../Images/Running.png"/> 
               <DataTrigger.EnterActions> 
                <BeginStoryboard> 
                 <Storyboard> 
                  <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)" 
                     From="0" 
                     To="360" 
                     Duration="0:0:2" 
                     RepeatBehavior="Forever"/> 
                 </Storyboard> 
                </BeginStoryboard> 
               </DataTrigger.EnterActions> 
               <DataTrigger.ExitActions> 
                <BeginStoryboard> 
                 <Storyboard> 
                  <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)" 
                     To="0" 
                     Duration="0:0:0"/> 
                 </Storyboard> 
                </BeginStoryboard> 
               </DataTrigger.ExitActions> 
              </DataTrigger> 
             </Style.Triggers> 
            </Style> 
           </Image.Style> 
          </Image> 
          <TextBlock Margin="5" Text="{Binding Path=Title}" FontSize="16"/> 
         </StackPanel> 
        </Expander.Header> 
        <ContentControl Content="{Binding}" ContentTemplateSelector="{StaticResource ResultTemplateSelector}"/> 
       </Expander> 
      </StackPanel> 
     </DataTemplate> 
    </ItemsControl.ItemTemplate> 
</ItemsControl> 

私はMSDNの記事explaining about datatriggers and storyboardsを読んだことがありますが、このアプローチに代わる良い方法はないと思います。

私はこれを達成する/私のアプローチを修正するか?

答えて

2

代わりにローカル値を使用して、それを設定するスタイルセッターを使用して画像のRenderTransformプロパティを設定しよう:これは動作します

<Image Margin="5" Width="18"> 
    <Image.Style> 
     <Style TargetType="{x:Type Image}"> 
      <Setter Property="RenderTransform"> 
       <Setter.Value> 
        <RotateTransform Angle="0" CenterX="9" CenterY="9"/> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedWithErrors}"> 
        <Setter Property="Source" Value="../Images/Failed.png" /> 
       </DataTrigger> 
       <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.CompletedSuccessfully}"> 
        <Setter Property="Source" Value="../Images/Success.png"/> 
       </DataTrigger> 
       <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Unexecuted}"> 
        <Setter Property="Source" Value="../Images/Waiting.png"/> 
       </DataTrigger> 
       <DataTrigger Binding="{Binding Path=CurrentState}" Value="{x:Static enums:State.Running}"> 
        <Setter Property="Source" Value="/Images/Running.png"/> 
        <DataTrigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)" 
                     From="0" 
                     To="360" 
                     Duration="0:0:2" 
                     RepeatBehavior="Forever"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.EnterActions> 
        <DataTrigger.ExitActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(RotateTransform.Angle)" 
                     To="0" 
                     Duration="0:0:0"/> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.ExitActions> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Image.Style> 
</Image> 
+0

...私は本当にかかわらず、なぜ理解していません。あなたはまったく詳しく説明できますか? – JonWells

+1

このエラーメッセージには、いくつかの原因が考えられます:https://wpftutorial.net/DebuggingAnimations.html。たとえば、プロパティをアニメートして同時に設定することはできません。 CurrentState of Runningが最初に実行されている項目がない場合、元のコードが機能するはずです。 – mm8

関連する問題