Consulta sobre animacion de XAML

Question

Hola estoy comenzando a ver WPF y me he topado con la tarea de realizar una animación la cual sera llamada desde una función en el .cs de C#.

la animación la he podido crear fácilmente desde un EventTrigger en el botón del XAML.

	<Button Content="Ingresar" FontSize="14" Width="100">
        	<Button.Triggers>
                	<EventTrigger RoutedEvent="Button.Click">
                        	<BeginStoryboard HandoffBehavior="SnapshotAndReplace">
                                        <Storyboard>

                                            <DoubleAnimation
                                           	Storyboard.TargetName="SampleDisplayBorderTranslateTransform"
                                           	Storyboard.TargetProperty="X"
                                            	BeginTime="0:0:0"
                                           	Duration="0:0:1"
                                           	From="0"
                                            	To="{Binding ElementName=SampleDisplayBorder, Path=ActualWidth}"/>

                                        </Storyboard>
                              	</BeginStoryboard>
                   	</EventTrigger>
             	</Button.Triggers>
     	</Button>

ahora la pregunta es como puedo crear la misma animación en C# y poder llamarla desde un evento Click en el mismo botón.

Desde ya muchas gracias por las respuestas que puedan surgir.

Answer 1

Hola MMauRRY.

Desde codigo es algo mas complejo trabajar con animaciones, en un principio deberia ser algo asi:

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // crear la animacion
            DoubleAnimation animation = new DoubleAnimation();
            Storyboard.SetTargetName(animation, "SampleDisplayBorderTranslateTransform");
            Storyboard.SetTargetProperty(animation, new PropertyPath("X"));
            animation.BeginTime = TimeSpan.Zero;
            animation.Duration = new Duration(TimeSpan.FromSeconds(1.0));
            animation.From = 0.0;

            // crear el binding a la propiedad 'To'            
            Binding binding = new Binding();
            binding.Path = new PropertyPath("ActualWidth");
            binding.Source = SampleDisplayBorder;            
            BindingOperations.SetBinding(animation, DoubleAnimation.ToProperty, binding);            

            // crear el storyboard con la animacion
            Storyboard storyBoard = new Storyboard();
            storyBoard.Children.Add(animation);
            storyBoard.Begin(btn, HandoffBehavior.SnapshotAndReplace);
        }

Donde la funcion es el evento click del boton y el boton se llama 'btn'

---

Saludos
David González
MCP, MCTS
Visita mi Blog en: http://www.dgzornoza.com/

Answer 2

Buenas.

Yo he hecho una animacion en Expression Blend y ahora quiero programarla en c# para hacerla lo mas dinamica posible.

<UserControl.Resources>
		<Storyboard x:Name="Acierto">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Acertaste">
				<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
				<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Control.FontSize)" Storyboard.TargetName="Acertaste">
				<SplineDoubleKeyFrame KeyTime="0:0:0.1" Value="53.333"/>
				<SplineDoubleKeyFrame KeyTime="0:0:0.4" Value="8"/>
				<SplineDoubleKeyFrame KeyTime="0:0:0.5" Value="53.333000183105469"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>

Partiendo de ese codigo, he conseguido sacar lo necesario para crear la animacion, pero me falta meterlo en el UserControl.Resources que todavia no se como se hace.

private void crearAnimacion()
        {
            DoubleAnimationUsingKeyFrames animation1 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetName(animation1, "Acertaste");
            Storyboard.SetTargetProperty(animation1, new PropertyPath("UIElement.Opacity"));
            SplineDoubleKeyFrame keyFrame1 = new SplineDoubleKeyFrame();
            keyFrame1.KeyTime = new TimeSpan(0,0,0,0,100);
            keyFrame1.Value = 1;
            SplineDoubleKeyFrame keyFrame2 = new SplineDoubleKeyFrame();
            keyFrame2.KeyTime = new TimeSpan(0, 0, 0, 0, 400);
            keyFrame2.Value = 1;
            SplineDoubleKeyFrame keyFrame3 = new SplineDoubleKeyFrame();
            keyFrame3.KeyTime = new TimeSpan(0, 0, 0, 0, 500);
            keyFrame3.Value = 0;
            DoubleAnimationUsingKeyFrames animation2 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetName(animation2, "Acertaste");
            Storyboard.SetTargetProperty(animation2, new PropertyPath("Control.FontSize"));
            SplineDoubleKeyFrame keyFrame4 = new SplineDoubleKeyFrame();
            keyFrame4.KeyTime = new TimeSpan(0, 0, 0, 0, 100);
            keyFrame4.Value = 53.333;
            SplineDoubleKeyFrame keyFrame5 = new SplineDoubleKeyFrame();
            keyFrame5.KeyTime = new TimeSpan(0, 0, 0, 0, 400);
            keyFrame5.Value = 8;
            SplineDoubleKeyFrame keyFrame6 = new SplineDoubleKeyFrame();
            keyFrame6.KeyTime = new TimeSpan(0, 0, 0, 0, 500);
            keyFrame6.Value = 8;
            animation1.AutoReverse = true;
            animation2.AutoReverse = true;
            animation1.BeginTime = TimeSpan.Zero;
            animation2.BeginTime = TimeSpan.Zero;
            animation1.KeyFrames.Add(keyFrame1);
            animation1.KeyFrames.Add(keyFrame2);
            animation1.KeyFrames.Add(keyFrame3);
            animation2.KeyFrames.Add(keyFrame4);
            animation2.KeyFrames.Add(keyFrame5);
            animation2.KeyFrames.Add(keyFrame6);
            animacion.Children.Add(animation1);
            animacion.Children.Add(animation2);
            CPadre.Children.Add(Acertaste);
            Acertaste.Width = 300;
            Acertaste.Height = 300;
            Canvas.SetTop(Acertaste, 107.5);
            Canvas.SetLeft(Acertaste, 240);
            //UserControl
        }

Edito:

Contenido.Resources.Add("StoryBoard",animacion);

El UserControl del XAML se llama Contenido.

He intentado eso pero me da error siguiente:

No se puede resolver TargetName Acertaste.

Answer 3

Hola Karmak.

'Acertaste' debe ser el nombre del control asociado a la animacion ¿que control tienes que se llame asi?, ¿puedes poner el xaml completo para verlo?

---

Saludos
David González
MCP, MCTS
Visita mi Blog en: http://www.dgzornoza.com/

Answer 4

El XAML esta vacio completamente:S

Es un Label que se agrega antes de crear la animacion.

private void crearAnimacion()
        {
            CPadre.Children.Add(Acertaste);
            Acertaste.FontSize = 53.333;
            Acertaste.Foreground = new SolidColorBrush(Colors.Green);
            Acertaste.Content = "Acertaste";
            Acertaste.Opacity = 0;
            Acertaste.Width = 300;
            Acertaste.Height = 300;
            Contenido.Resources.Add("StoryBoard", animacion);
            DoubleAnimationUsingKeyFrames animation1 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetName(animation1, "animacion");
            Storyboard.SetTargetProperty(animation1, new PropertyPath("UIElement.Opacity"));
            SplineDoubleKeyFrame keyFrame1 = new SplineDoubleKeyFrame();
            keyFrame1.KeyTime = new TimeSpan(0,0,0,0,100);
            keyFrame1.Value = 1;
            SplineDoubleKeyFrame keyFrame2 = new SplineDoubleKeyFrame();
            keyFrame2.KeyTime = new TimeSpan(0, 0, 0, 0, 400);
            keyFrame2.Value = 1;
            SplineDoubleKeyFrame keyFrame3 = new SplineDoubleKeyFrame();
            keyFrame3.KeyTime = new TimeSpan(0, 0, 0, 0, 500);
            keyFrame3.Value = 0;
            DoubleAnimationUsingKeyFrames animation2 = new DoubleAnimationUsingKeyFrames();
            Storyboard.SetTargetName(animation2, "animacion");
            Storyboard.SetTargetProperty(animation2, new PropertyPath("Control.FontSize"));
            SplineDoubleKeyFrame keyFrame4 = new SplineDoubleKeyFrame();
            keyFrame4.KeyTime = new TimeSpan(0, 0, 0, 0, 100);
            keyFrame4.Value = 53.333;
            SplineDoubleKeyFrame keyFrame5 = new SplineDoubleKeyFrame();
            keyFrame5.KeyTime = new TimeSpan(0, 0, 0, 0, 400);
            keyFrame5.Value = 8;
            SplineDoubleKeyFrame keyFrame6 = new SplineDoubleKeyFrame();
            keyFrame6.KeyTime = new TimeSpan(0, 0, 0, 0, 500);
            keyFrame6.Value = 8;
            animation1.AutoReverse = true;
            animation2.AutoReverse = true;
            animation1.BeginTime = TimeSpan.Zero;
            animation2.BeginTime = TimeSpan.Zero;
            animation1.KeyFrames.Add(keyFrame1);
            animation1.KeyFrames.Add(keyFrame2);
            animation1.KeyFrames.Add(keyFrame3);
            animation2.KeyFrames.Add(keyFrame4);
            animation2.KeyFrames.Add(keyFrame5);
            animation2.KeyFrames.Add(keyFrame6);
            animacion.Children.Add(animation1);
            animacion.Children.Add(animation2);

            //Binding binding = new Binding();
            //binding.Path = new PropertyPath("UIElement.Opacity");
            //binding.Source = animacion;
            //BindingOperations.SetBinding(animation1, DoubleAnimationUsingKeyFrames.
            //BindingOperations.SetBinding(animation1, DoubleAnimation.ToProperty, binding);
            //BindingOperations.SetBinding(animation2, DoubleAnimation.ToProperty, binding);
            
            Canvas.SetTop(Acertaste, 107.5);
            Canvas.SetLeft(Acertaste, 240);
            //UserControl controlUsuario = new UserControl();
        }

Vale, he puesto el codigo completo, que ha tenido modificacion de los intentos para que funcionase.