Xaml Storyboard in a UserControl

Question

I have a problem with an animantion of an UserControl.

1. The animation runs only once.

2. 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.