[WPF] Faire tourner un control sur un event

Ce sujet a beau semblé avoir été vu et revu sur le Net, on oublie bien trop souvent que pour WPF quand on souhaite animer un control pour le mettre dans un état, il faut à préalable que celui-ci ait un état de départ!

Et donc dans le cas d’un rotation (RotateTransform) il faut donc commencé par faire une rotation d’un angle de 0° pour que le code suivant fonctionne (rotation de 10° vers la gauche à l’approche de la souris et retour à la normal quand celle-ci quitte le control).

<Image Source="MonImage.png">
	<Image.LayoutTransform>
		<RotateTransform Angle="0"/>
	</Image.LayoutTransform>
	<Image.Style>
		<Style TargetType="Image">
			<Style.Triggers>
				<EventTrigger RoutedEvent="Image.MouseEnter">
					<EventTrigger.Actions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.Angle" To="-10" Duration="0:0:0.1"/>
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger.Actions>
				</EventTrigger>
				<EventTrigger RoutedEvent="Image.MouseLeave">
					<EventTrigger.Actions>
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Storyboard.TargetProperty="LayoutTransform.Angle" To="0" Duration="0:0:1"/>
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger.Actions>
				</EventTrigger>
			</Style.Triggers>
		</Style>
	</Image.Style>
</Image>

Vous pouvez testé, il suffit de retirer le nœud Image.LayoutTransform pour que cela ne fonctionne plus.