wpfxamlexceptiondoubleanimation

Why XAML defined animation causes System.InvalidOperationException


I need define simple animation in the XAML (without code behind), that must rotate the background image of button by changing the bounded boolean property. I have a button in the XAML:

<Button Style="{StaticResource btnStyle}" />

In the Resources section of the Window I create following:

<RotateTransform Angle="180" x:Key="rotAt180" />

<Style TargetType="Button" x:Key="btnStyle">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate>
                <Image Source="Images\pic.png" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding MyBoolProp}" Value="False">
            <Setter Property="RenderTransform" Value="{StaticResource rotAt180}" />
            <!-- This animation works good -->
            <DataTrigger.EnterActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="0" To="180" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.EnterActions>
            <!-- This animation causes exception -->
            <DataTrigger.ExitActions>
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation From="180" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
                    </Storyboard>
                </BeginStoryboard>
            </DataTrigger.ExitActions> 
        </DataTrigger>
    </Style.Triggers>
</Style>

MyBoolProp is initialized by True. The first animation is works perfect. But the second animation causes System.InvalidOperationException in PresentationFramework.dll ("Unable to resolve all property references in the "RenderTransform.Angle" property path. Check that the corresponding objects support such properties").

I tried to move the second animation into the trigger, where MyBoolProp is True:

 <DataTrigger Binding="{Binding MyBoolProp}" Value="True">
 <DataTrigger.EnterActions>
     <BeginStoryboard>
         <Storyboard>
             <DoubleAnimation From="180" To="0" Duration="0:0:0.2" Storyboard.TargetProperty="RenderTransform.Angle" />
          </Storyboard>
      </BeginStoryboard>
  </DataTrigger.EnterActions> 

But the result is the same. What is wrong in such realization?


Solution

  • The RenderTransform must be set in the Style, not in the DataTrigger:

    <Style TargetType="Button" x:Key="btnStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate>
                    <Image Source="Images\pic.png" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    
        <Setter Property="RenderTransform" Value="{StaticResource rotAt180}"/>
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
    
        <Style.Triggers>
            <DataTrigger Binding="{Binding MyBoolProp}" Value="False">
                <DataTrigger.EnterActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="0" Duration="0:0:0.2"
                                Storyboard.TargetProperty="RenderTransform.Angle" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation To="180" Duration="0:0:0.2"
                                Storyboard.TargetProperty="RenderTransform.Angle" />
                        </Storyboard>
                    </BeginStoryboard>
                </DataTrigger.ExitActions>
            </DataTrigger>
        </Style.Triggers>
    </Style>