Basics

When you’re making apps intended for modern touch hardware, it’s important that your UI feels alive, fluid, and in motion. Some of Microsoft’s XAML controls will give you this motion for free, like Panorama in Windows Phone and the FlipView in WinRT,  but other than that it was very difficult to duplicate the built-in animations and transitions of those respective platforms. The WinRT platform introduces the Transition API that applies to Controls and Containers that can apply a built in animation in a response to a predetermined trigger. Transitions are applied to individual controls using the Transitions property, and to Panels using the ChildrenTransitions property. For example, adding an EntranceThemeTransition to the ChildrenTransitions collection of a Grid will cause all children of the Grid to automatically slide in from the right when they first appear. Getting the default subtle slide in from the right is this simple…….

Adding Transitions via Designer Instead of XAML

Back when Visual Studio and Blend both served completely different purposes, I always preferred doing UI related  in Blend so that I can see all the Properties right in front of me and set them visually. In Visual Studio 2012, a lot of that ability to see and set Properties visually was added from Blend, and it makes setting and customizing Transitions very simple. Here’s how…

First

If you don’t already have the Document Outline and Properties Window visible ( they usually aren’t ), go up to View, click Properties Window, then go back to View, Other Windows, Document Outline. Here’s what mine looks like…

Next

All we need need to do is select the Grid in the document and, in the Properties window on the right, click the small ellipse button next to the ChildrenTransitions. You should see a new dialog window to add ChildrenTransitions with a DropDown at the bottom. Select EntranceThemeTransition and click Add. You should see the following window, which will allow you to configure the Transition properties. You should see this window if you’re in the right place….

Conclusion

The new Transitions API is an easy, flexible way to add predefined system animations to your UI. I’ve barely scratched the surface of what can be done with this system, but I will be using them where appropriate and will make more posts when I figure out some of the more advanced features.