locked
skip and rewind wpf animation using button control RRS feed

  • Question

  • This question is based on my previous question which I guess needs to be more elaborated...

    I was hoping to add  button in our WPF project that would enable a user to skip our storyboard for a good 3 second and rewind it 3 seconds as well... is that possible?

    hope you can help..


    • Edited by Mitche0027 Saturday, August 25, 2012 1:12 PM
    Saturday, August 25, 2012 1:06 PM

All replies

  • Hello Mitche.

    I posted a sample on your other post... http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/b07c758f-caae-4e7c-8986-33ea963a5929

    Here is the code...

    using System;
    using System.Windows;
    using System.Windows.Media.Animation;
    
    namespace WpfApplication30
    {
    	public partial class MainWindow : Window
    	{
    		Storyboard sb = new Storyboard();
    		
    		public MainWindow()
    		{
    			this.InitializeComponent();
    		}
    		
    		private void Window_Loaded(object sender, System.Windows.RoutedEventArgs e)
    		{
    			sb = this.TryFindResource("Storyboard1") as Storyboard;
    		}
    
    		private void PlayBtn_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			sb.Begin();
    		}
    
    		private void SkipForwardBtn_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			sb.Pause();
    			TimeSpan ts = sb.GetCurrentTime();
    			double a = ts.Seconds + 3;
                		sb.SeekAlignedToLastTick(TimeSpan.FromSeconds(a));
    			sb.Resume();
    		}
    
    		private void SkipBackBtn_Click(object sender, System.Windows.RoutedEventArgs e)
    		{
    			sb.Pause();
    			TimeSpan ts = sb.GetCurrentTime();
    			int a = ts.Seconds - 3;
    			if (a > 0)
    			{
    				sb.SeekAlignedToLastTick(TimeSpan.FromSeconds(a));
    				sb.Resume();
    			}
    			else  //Reset to 0
    				sb.Begin();
    		}
    	}
    }

    and the Xaml...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    	x:Class="WpfApplication30.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480" Loaded="Window_Loaded">
    	<Window.Resources>
    		<Storyboard x:Key="Storyboard1">
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="520"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:10" Value="520"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:15" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="rectangle">
    				<EasingDoubleKeyFrame KeyTime="0:0:5" Value="0"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:10" Value="340"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:15" Value="340"/>
    				<EasingDoubleKeyFrame KeyTime="0:0:20" Value="0"/>
    			</DoubleAnimationUsingKeyFrames>
    		</Storyboard>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Rectangle x:Name="rectangle" Fill="Blue" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="100" RenderTransformOrigin="0.5,0.5">
    			<Rectangle.RenderTransform>
    				<TransformGroup>
    					<ScaleTransform/>
    					<SkewTransform/>
    					<RotateTransform/>
    					<TranslateTransform/>
    				</TransformGroup>
    			</Rectangle.RenderTransform>
    		</Rectangle>
    		<StackPanel HorizontalAlignment="Center" Margin="0" Orientation="Horizontal" VerticalAlignment="Center">
    			<Button x:Name="PlayBtn" Content="Play" HorizontalAlignment="Right" Width="75" Margin="5,0" Click="PlayBtn_Click"/>
    			<Button x:Name="SkipBackBtn" Content="&lt;" HorizontalAlignment="Right" Width="75" Margin="5,0" Click="SkipBackBtn_Click"/>
    			<Button x:Name="SkipForwardBtn" Content="&gt;" HorizontalAlignment="Right" Width="75" Margin="5,0" Click="SkipForwardBtn_Click"/>
    		</StackPanel>
    	</Grid>
    </Window>

    Hope you get it worked out quickly and easily.

    Note... the above will not work with a Storyboard started by a trigger.  You'd need to start it from code-behind.

    ~Christine


    My Gallery

    Saturday, August 25, 2012 4:39 PM
  • Thank you Christine..

    this would be totally helpful I'm using code behind to start my storyboard so I think that wouldn't bring me errors... again thanks for the help...

    Sunday, August 26, 2012 5:09 AM