Aug 1

Written by:
8/1/2010 6:07 AM 

Live Example: http://silverlight.adefwebserver.com/animationfromIcommand/

Download Code Sample: [Here]

Starting an animation from a View Model when you are using View Model Style (MVVM) is very easy when using Behaviors.

View Model

Here is the code for the View Model:

using System;

using System.Collections.Generic;

using System.Text;

using System.Windows.Data;

using System.ComponentModel;

using System.Windows.Input;

 
namespace AnimationSample

{

    public class MainPageModel : INotifyPropertyChanged

    {

        public MainPageModel()

        {

            StartAnimationCommand = new DelegateCommand(StartAnimation, CanStartAnimation);

            ResetAnimationCommand = new DelegateCommand(ResetAnimation, CanResetAnimation);

        }

 
        #region StartAnimationCommand

        public ICommand StartAnimationCommand { get; set; }

        public void StartAnimation(object param)

        {

            AnimationState = "ON";

        }

 
        private bool CanStartAnimation(object param)

        {

            return true;

        }

        #endregion

 
        #region ResetAnimationCommand

        public ICommand ResetAnimationCommand { get; set; }

        public void ResetAnimation(object param)

        {

            AnimationState = "OFF";

        }

 
        private bool CanResetAnimation(object param)

        {

            return true;

        }

        #endregion

 
 
        #region AnimationState

        private string _AnimationState = "OFF";

        public string AnimationState

        {

            get { return _AnimationState; }

            private set

            {

                if (AnimationState == value)

                {

                    return;

                }

                _AnimationState = value;

                this.NotifyPropertyChanged("AnimationState");

            }

        }

        #endregion

 
        #region INotifyPropertyChanged

        public event PropertyChangedEventHandler PropertyChanged;

 
        private void NotifyPropertyChanged(String info)

        {

            if (PropertyChanged != null)

            {

                PropertyChanged(this, new PropertyChangedEventArgs(info));

            }

        }

        #endregion

    }

}

 

Basically it is contains two ICommands. One sets the AnimationState property to ON and one sets it to OFF.

The View

Layout the View.

Create an animation called “RollBall”.

Grab an InvokeCommand Action behavior, and drop it on the Start Animation From ICommand Button in the Objects and Timeline window.

Set the EventName to Click, and then click Advanced options next to Command.

Databind it to StartAnimationICommand.
 

Now, all this does is call the ICommand that will set the AnimationState property to ON. We now have to trigger the Storyboard to run.

 

Grab a ControlStoryboard Action and drop it on the LayoutRoot in the Objects and Timeline window.

Click the New Button next to TriggerType.

Change to DataTrigger.

Click Data bind next to Binding

Bind to AnimationState.

Enter ON for Value.

Set the ControlStoryboardOption to Play and Storyboard to RollBall.

Also bind the Reset button and the AnimationState indicator.

The diagram above shows what is bound to what.

The animation will now run when the Start Animation From ICommmand Button is clicked. You have to click the Rest button to run it again using that Button.

But, I Want The AnimationState To Reset Automatically!

You can use an InvokeCommand Action behavior, that uses a DataTrigger to automatically call the ResetAnimationCommand (that will set the AnimationState back to OFF) whenever it is set to ON.

You can download that version [from here]