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