none
Consulta sobre animacion de XAML RRS feed

  • 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.

    lunes, 18 de febrero de 2013 15:04

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/

    miércoles, 20 de febrero de 2013 22:25

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/

    miércoles, 20 de febrero de 2013 22:25
  • 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
    lunes, 4 de marzo de 2013 10:25
  • 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/

    viernes, 8 de marzo de 2013 8:03
  • 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
    viernes, 8 de marzo de 2013 9:09