UserControl animation in WPF?

Question

I have two xaml files: MainWindow.xaml and the other is userControl EditTaskView.xaml . In MainWindow.xaml it consists of a list and when you double-click on any element of the list, it displays another window (edit window) from the EditView userControl. I try to animate this userControl every time any item in the list is double-clicked. I added animation to userControl, but animation only starts once. How can I run an animation every time I click on any item from the list?

MainWindow.xaml

<ListBox x:Name="lstBxTask" Style="{StaticResource ListBoxItems}" MouseDoubleClick="lstBxTask_MouseDoubleClick"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel> <Rectangle Style="{StaticResource LineBetweenListBox}"/> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Taskname}" Style="{StaticResource TextInListBox}"/> <Button Name="btnDelete" Style="{StaticResource DeleteButton}" Click="btnDelete_Click"/> </StackPanel> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> <ToDoTask:EditTaskView x:Name="EditTask" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2" Visibility="Collapsed"/> 

MainWindow code has a double-click event that changes the visibility of an EditTaskView.

Suggestions?

Answer 1

You have not shown us your animation. Usually the animation performs each time the event is triggered:

  <UserControl.Resources> <Storyboard x:Key="Storyboard1"> <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="LayoutRoot"> <EasingColorKeyFrame KeyTime="0" Value="#FFB62A2A"/> <EasingColorKeyFrame KeyTime="0:0:4" Value="#FF2A32B6"/> </ColorAnimationUsingKeyFrames> </Storyboard> </UserControl.Resources> <UserControl.Triggers> <EventTrigger RoutedEvent="Control.MouseDoubleClick"> <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/> </EventTrigger> </UserControl.Triggers> 

Answer 2

Thanks bitbonk, your code will really help.

I think I'll find out what my problem was. I had an EventTrigger as FrameworkElement.Loaded instead of Control.MouseDoubleClick.

in any case, the code is as follows:

 <Storyboard x:Key="AnimateEditView"> <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="EditTask"> <EasingThicknessKeyFrame KeyTime="0" Value="0"> <EasingThicknessKeyFrame.EasingFunction> <ExponentialEase EasingMode="EaseOut"/> </EasingThicknessKeyFrame.EasingFunction> </EasingThicknessKeyFrame> <EasingThicknessKeyFrame KeyTime="0:0:1.6" Value="0"/> </ThicknessAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="EditTask"> <EasingDoubleKeyFrame KeyTime="0" Value="0"/> <EasingDoubleKeyFrame KeyTime="0:0:1.6" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Window.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard Storyboard="{StaticResource headerAnimation}"/> <BeginStoryboard Storyboard="{StaticResource textBxAnimation}"/> </EventTrigger> <EventTrigger RoutedEvent="Control.MouseDoubleClick"> <BeginStoryboard Storyboard="{StaticResource AnimateEditView}"/> </EventTrigger> </Window.Triggers>