Animate UserControl (When It Gets Collapsed) in WPF
- by sanjeev40084
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?
