xaml - Windows Phone MVVM Animated button -

xaml - Windows Phone MVVM Animated button -

i want create animated button in windows phone 8 silverlight using mvvm pattern. command should work this:

when clicked, if it's value correct, trigger rotating animation. when text wouldn't visible(rotated 90 degrees around y axis), i'd alter text on button "yes!" , rotate normal state. in case value incorrect, i'd alter background red, without rotation.

in wpf utilize datatriggers, this:

1)user clicks button -> command executed

2a)if value correct, alter in viewmodel value, triggers datatrigger, starts first animation rotating button 90 degrees

3a)end of animation triggers command, alter text value

4a)text alter triggers sec rotation, @ origin rotates button 180 degrees , normal 90 degrees rotation, looks new text on other site

2b)if value wrong alter value value triggering wrong value animation

but in windows phone silverlight there no triggers in styles, easiest way utilize code-behind, wanted in mvvm. maybe have faced similar problem. i'm thinking using messages mvvm lite toolkit, i'm not sure, if it'll work

edit:

ok, muhammad saifullah's tip, managed create work. utilize button's command send click vm, next utilize mvvm lite toolkit send message view start animation. unfortunatly eventtocommand mvvm lite toolkit not work storyboard, execute vm's command in code behind completed event ant changes value , sends next messages.

you can bind command xaml vm. below illustration how 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 next 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 navigate. /// </summary> public relaycommand<object> navigate { { homecoming _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 story board in similar way. starting story board can send message form vm view.xaml.cs start storyboard.

hope helps.

xaml windows-phone-7 animation windows-phone-8 mvvm