Question

I have a login page in Silverlight 4. I am using MVVM to handle all interactions with the page. On successful login I have a custom event that fires in my view model followed by code to navigate to the main page. I use event aggregation, publish & subscribe for navigating between views.

 AnimateLoginSuccess(this, null);
//code to navigate to the main page after successful login.

I handle this event in my view, wiring it up like this, where LoginSuccessStoryboard is the storyboard I have created for some basic animation:

    //constructor of view
    public Login(LoginVM vm)
    {
        InitializeComponent();

        DataContext = vm;
        thisVM = vm;

        vm.AnimateLoginSuccess += new EventHandler(vm_AnimateLoginSuccess);

    }


//event handling method in view
    void vm_AnimateLoginSuccess(object sender, EventArgs e)
    {
        LoginSuccessStoryboard.Begin();
    }

Now, the problem is, even though the animation begins after successful login, the next lines that handle moving to a different view on successful login make the moving to the next view so fast that it doesn’t wait for the animation to finish. Thereby making the animation virtually non-existant. Any ideas on how to make this work?

Answer 1

You could use the Completed event of your Storyboard, to navigate to your view after the animation has ended. Add a method to your ViewModel, that gets executed after the animation to navigate to the default first view.

public Login(LoginVM vm) {
    InitializeComponent();

    LoginSuccessStoryboard.Completed += new EventHandler(NavigateToViewAfterAnimation);
    DataContext = vm;
    thisVM = vm;

    vm.AnimateLoginSuccess += new EventHandler(vm_AnimateLoginSuccess);

}

private void NavigateToViewAfterAnimation(object sender, EventArgs e) {
   thisVW.NavigateToFirstView();  // Navigates to the first view.
}