wpfdatatrigger

WPF Rotating icon datatrigger


I would rotate my icon using a datatrigger:

<Canvas ClipToBounds="True" Margin="0,0,0,0" Width="27" Height="27" HorizontalAlignment="Center">
    <Path Name="IcoMissionState" Stretch="Fill">
        <Path.Style>
            <Style TargetType="{x:Type Path}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding Path=[StatoMissione]}" Value="2">
                        <Setter Property="Data" Value="{DynamicResource IcoMSPrenotato}"/>
                        <Setter Property="Width" Value="20"/>
                        <Setter Property="Height" Value="20"/>
                        <Setter Property="ToolTip" Value="Prenotato"/>
                    </DataTrigger>
                    <MultiDataTrigger>
                        <MultiDataTrigger.Conditions>
                            <Condition Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" Value="False"/>
                            <Condition Binding="{Binding Path=[StatoMissione]}" Value="3"/>
                        </MultiDataTrigger.Conditions>
                        <Setter Property="Fill" Value="{DynamicResource Scb_Blu_02}"/>
                        <Setter Property="Data" Value="{DynamicResource IcoMSInEsecuzione}"/>
                        <Setter Property="Width" Value="20"/>
                        <Setter Property="Height" Value="20"/>
                        <Setter Property="ToolTip" Value="In esecuzione"/>
                        <MultiDataTrigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimation Storyboard.TargetProperty="(RotateTransform.Angle)" AutoReverse="False" RepeatBehavior="Forever" From="0" To="-360" FillBehavior="Stop" Duration="0:0:4" />
                                </Storyboard>
                            </BeginStoryboard>
                        </MultiDataTrigger.EnterActions>
                    </MultiDataTrigger>
                </Style.Triggers>
            </Style>
        </Path.Style>
    </Path>
</Canvas>

Basically I have no issue concerning the code but the icon does not spin. Any error in my code?


Solution

  • In order to animate a RotateTransform, you have to actually assign a RotateTransform instance to a property of the Path, typically to the RenderTransform property. Also make sure to set the RenderTransformOrigin property correctly:

    <Style TargetType="{x:Type Path}">
        <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
        <Setter Property="RenderTransform">
            <Setter.Value>
                <RotateTransform/>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            ...
        </Style.Triggers>
    </Style>
    

    Then use a valid target property path for the Storyboard.TargetProperty property, either fully qualified

    <DoubleAnimation Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" .../>
    

    or shorter

    <DoubleAnimation Storyboard.TargetProperty="RenderTransform.Angle" .../>