Windows Phone MVVM Animated button - xaml

Question

I want to create animated button in Windows Phone 8 Silverlight using MVVM pattern.
This control should work like this:
When clicked, if it's value is correct, it would trigger rotating animation. When text wouldn't be visible(rotated 90 degrees around Y axis), I'd change text on button to something like "Yes!" and then it would rotate back to normal state.
In case the value would be incorrect, I'd change background to red, without rotation.
In WPF I could use DataTriggers, so I would look like this:
1)User Clicks button -> Command is executed
2a)If value is correct, i change in viewmodel some value, which triggers DataTrigger, which starts first animation rotating button 90 degrees
3a)End of animation triggers command, which change text value
4a)Text change Triggers second rotation, which at the beginning rotates button 180 degrees and then do normal 90 degrees rotation, so it looks like new text is on other site
2b)If value is incorrect I change some value to value triggering wrong value animation
But in windows phone silverlight there are no triggers in styles, so easiest way would be to just use code-behind, but I wanted to do it in MVVM.
Maybe someone have faced similar problem.
I'm currently thinking about using messages from MVVM Light toolkit, but I'm not sure, if it'll work
Edit:
Ok, thanks to Muhammad Saifullah's tip, I managed to make it work. I use button's command to send click to VM, next i use MVVM light Toolkit to send message to view to start the animation. Unfortunatly EventToCommand from MVVM light toolkit does not work for Storyboard, so I just Execute VM's command in code behind Completed event ant it changes the value and sends next messages.

Answer 1

You can bind command from your xaml to your VM. Below is an example how you bind command in MVVM Light.
For Button
<Button ....>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<MvvmLight_Command:EventToCommand Command="{Binding Navigate}" CommandParameter="{Binding ElementName=btnClockin,Path=Tag}"></MvvmLight_Command:EventToCommand>
</i:EventTrigger>
</i:Interaction.Triggers>
Add following assembly references in page xaml
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8"
Command code in VM
/// <summary>
/// Gets the Navigate.
/// </summary>
public RelayCommand<object> Navigate
{
get
{
return _navigate
?? (_navigate = new RelayCommand<object>(
page =>
{
if (page.ToString() == "0")
MessageBox.Show("Comming Soon");
else
Messenger.Default.Send<NavigateCommand, MyPge33>(new NavigateCommand(page.ToString()));
}));
}
}
You can Bind commands on your story board in the similar way. But for starting the story board you can send message form your VM to your view.xaml.cs to start the storyboard.
Hope this helps.