Principales respuestas
Consulta sobre animacion de XAML

Pregunta
-
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.
Respuestas
-
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/- Propuesto como respuesta SalazarJuanMa jueves, 21 de febrero de 2013 14:55
- Marcado como respuesta Omar OrtizModerator jueves, 7 de marzo de 2013 17:01
Todas las respuestas
-
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/- Propuesto como respuesta SalazarJuanMa jueves, 21 de febrero de 2013 14:55
- Marcado como respuesta Omar OrtizModerator jueves, 7 de marzo de 2013 17:01
-
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.
- Editado Karmak84 lunes, 4 de marzo de 2013 10:42
-
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/ -
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.- Editado Karmak84 viernes, 8 de marzo de 2013 9:20 agregar codigo