Animate UserControl in WPF?

Question

I have two xaml file one is MainWindow.xaml and other is userControl EditTaskView.xaml. In MainWindow.xaml it consists of listbox and when double clicked any item of listbox, it displays other window (edit window) from EditView userControl. I am trying to animate this userControl everytime whenever any item from the listbox is double clicked. I added some animation in userControl however the animation only gets run once. How can i make my animation run everytime whenever any item from the listbox is clicked?

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"/>

In the MainWindow code, there is mouse double click event, which changes the visibility of EditTaskView to Visible.

Suggestions?

Answer 1

Thanks bitbonk, your code really help.

I think i figure out what was my problem. I had EventTrigger as FrameworkElement.Loaded instead of Control.MouseDoubleClick.

anyway the code looks like this:

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

Answer 2

You haven't shown us your animation. Usually the animation does play everytime 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>