Animate UserControl (When It Gets Collapsed) in WPF

Posted by sanjeev40084 on Stack Overflow See other posts from Stack Overflow or by sanjeev40084
Published on 2010-05-27T03:07:40Z Indexed on 2010/05/27 3:11 UTC
Read the original article Hit count: 231

Filed under:
|
|

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 edit window (EditView userControl). Whenever edit window gets displayed, it plays an animation (sliding from right to left). The EditView userControl has two buttons 'Save' and 'Cancel'. Now I want to add animation (sliding edit window from left to right) when any of the button (Save or Cancel) button is clicked. When 'Save' or 'Cancel' button is clicked, it Collapse the edit window.

Here is the story board which slides window from right to left.

<Storyboard x:Key="AnimateEditView">
            <ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="EditTask" >
                <EasingThicknessKeyFrame KeyTime="0" Value="100,0,0,0">
                    <EasingThicknessKeyFrame.EasingFunction>
                        <ExponentialEase EasingMode="EaseOut"/>
                    </EasingThicknessKeyFrame.EasingFunction>
                </EasingThicknessKeyFrame>
                <EasingThicknessKeyFrame KeyTime="0:0:1" Value="0,0,0,0">
                    <EasingThicknessKeyFrame.EasingFunction>
                        <ExponentialEase EasingMode="EaseOut"/>
                    </EasingThicknessKeyFrame.EasingFunction>
                </EasingThicknessKeyFrame>
            </ThicknessAnimationUsingKeyFrames>            
        </Storyboard>
</Window.Resources>

<Window.Triggers>
<EventTrigger RoutedEvent="Control.MouseDoubleClick" SourceName="lstBxTask">
            <BeginStoryboard Storyboard="{StaticResource AnimateEditView}"/>
        </EventTrigger>
<Window.Triggers>

Here is the xaml within MainWindow.

<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="0" Grid.RowSpan="3" Grid.ColumnSpan="2" Visibility="Collapsed" >

Any suggestions?

© Stack Overflow or respective owner

Related posts about c#

Related posts about wpf