I’ve been developing for WinRT for quiet some time now in XAML and C#. I’ve faced an issue where I needed to wait that an animation was completed before starting a piece of work in a view model. The problem was that this animation was a VisualState transition inside one of my custom controls.
My custom control represents a reversi token which has two sides, black and white. When its IsBlack property changes it triggers a visual state transition. As my application uses the MVVM pattern I needed to find a way to propagate the information that an animation has started and stopped from the custom control to the view model.
I first created added a property to my Token control :
Then in the OnApplyTemplate method of the control I call the following method which is used to subscribed to the CurrentStateChanging and CurrentStateChanged events of the VisualStateGroup containing the states representing each colour :
In the ColourGroupCurrentStateChang[ing/ed] methods I now just have to set the IsColourChanging property accordingly :
At this step, every time a transition between two colours is run, the IsColourChanging is set to true until the transition complete.
So now how to propagate this information to my view models ? Using bindings of course and here’s how it can be done assuming the ItemsControl ItemsSource property is set to a collection of TokenViewModels :
You can see here that the IsColourChanging property of the control is bound to the IsAnimating control of its view model in a two way manner. Now it’s up to to viewmodel to react to the change of the IsAnimating property as wanted.
I consider this trick to be important as WinRT application are made to be fast and fluid and so using a lot a animations. As fast and fluid does not mean unmaintainable it’s a way among others to separate your logic between the view and the view model.
You can see a sample code in WPF in my skydrive as usual.
Hope it’ll help.