Xaml Storyboard in a UserControl - wpf

Question

I have a problem with an animantion of an UserControl.
The animation runs only once.
If I have multiple instances of my UserControl in another window, the animation is called for every Instance of the UserControl.
<UserControl x:Class="My_UserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Margin="10,10">
<UserControl.Resources>
<Storyboard x:Key="CartTicket_Whip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/>
<DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton">
<BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="UserControlGrid" Height="60">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid.Effect>
<DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect>
</Grid.Effect>
<DockPanel Background="White">
<Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60">
</Button>
<TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="20" FontWeight="Bold" Margin="10">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
<StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
<TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
<TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/>
<TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</DockPanel>
</Grid>
</UserControl>

Answer 1

You can set the FillBehavior property of your Storyboard to Stop in this way:
<UserControl.Resources>
<Storyboard x:Key="CartTicket_Whip" FillBehavior="Stop">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlGrid">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-2"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="UserControlGrid">
<DiscreteBooleanKeyFrame KeyTime="0:0:0.1" Value="True"/>
<DiscreteBooleanKeyFrame KeyTime="0:0:0.2" Value="False"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
I hope it helps.

Answer 2

Ok, I got it... sorry it is a dump coincidance! Because I changed the skew of the Grid element, to have a bob up and down effect, the hole usercontrol had this effect.
Now in my window I put five of this UserControls in a Grid, under each other...
So there was the effect, that on every click it seems that evrey UserControl started the animation...
So here the new code, where I make the storyboard for a child element (the dockPanel):
<UserControl x:Class="MyUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" Margin="10,10">
<UserControl.Resources>
<Storyboard x:Key="CartTicket_Whip">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)" Storyboard.TargetName="UserControlDockPanel">
<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="-1.5"/>
<SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Button.Click" SourceName="DecrementButton">
<BeginStoryboard Storyboard="{StaticResource CartTicket_Whip}"/>
</EventTrigger>
</UserControl.Triggers>
<Grid x:Name="UserControlGrid" Height="60">
<Grid.LayoutTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.LayoutTransform>
<Grid.Effect>
<DropShadowEffect ShadowDepth="5" Color="Silver"></DropShadowEffect>
</Grid.Effect>
<DockPanel x:Name="UserControlDockPanel" Background="White" RenderTransformOrigin="0.5,0.5">
<DockPanel.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</DockPanel.RenderTransform>
<Button Name="DecrementButton" DockPanel.Dock="Left" Content="-" FontSize="40" Width="60">
</Button>
<TextBlock x:Name="TicketCount" DockPanel.Dock="Left" Text="2 x" VerticalAlignment="Center" HorizontalAlignment="Center"
FontSize="20" FontWeight="Bold" Margin="10">
<TextBlock.Effect>
<DropShadowEffect ShadowDepth="4" Color="Silver"></DropShadowEffect>
</TextBlock.Effect>
</TextBlock>
<StackPanel DockPanel.Dock="Left" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5">
<TextBlock x:Name="TicketName" Text="Ticket type 01" HorizontalAlignment="Center"/>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,10,0,0">
<TextBlock x:Name="PriceTxt" Grid.Column="2" Text="100" HorizontalAlignment="Center"/>
<TextBlock x:Name="PriceTxt_currency" Grid.Column="2" Text=" EUR" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</DockPanel>
</Grid>
</UserControl>