Metro Elements Weekly Update 6

In today’s Metro Elements update: Animations galore! As you all know, animations are a big thing in Windows Store apps. Not only are they good to look at, they aid in notifying to the user that something has changed. When used in conjunction with touch gestures, you can create some fantastic user experiences.


WinRT has several built in animations for common application scenarios, but to help you even further, we have added the new TransitionContentControl. This control lets you specify an enter and exit transition which will be used to animate the content whenever it changes. Here are some examples of this in action:




As you can see below, this control is very simple to use. The content and transitions are binding to values in the data context. When the content changes, the animations kick into action. (At the moment is is easiest to bind the transitions or set them in code, convenient xaml support will come soon).


We provide several transitions to get you started which can be found in the PresetTransitions class. This includes fading, sliding, zooming and rotating transitions for various directions.

In some scenarios, you may find that you want different transitions depending on how the content is changing. For example if content is being navigated left or right, you’d want to dynamically pick different transitions to indicate this to the user. For these scenarios, you can implement the IStoryboardTransition interface. The GetStoryboard method takes in the old and new content which you can use to select an appropriate Storyboard. Here you could either select one of our prebuilt transitions and return their Storyboard, or you could build up your own storyboard for more complex scenarios like what we’ve done for zooming the new CalendarControl seen below.


One of the controls we provided early on was the MonthCalendar. This has now been renamed to the CalendarControl as it now supports additional views. Other improvements we have added to this control are:

  • Animations in the generic style to smoothly transition between views.
  • Week numbers displayed in month view (templating and toggle options coming soon).
  • The DataProvider property lets you set a custom ICalendarDataProvider to inject a data context for each day in month view and each month in year view etc.
  • Style and template options that easily let you customize the look of each item in the calendar.
  • A SelectedDate property for getting the date the user selected or setting the currently selected date.

Below is an example of what you can produce with these new improvements. A custom ICalendarDataProvider fetches a WeatherInfo object for each day in a month, and a list of temperature data for each month in the year view. Custom templates display this data in an appropriate way. This one control will suite all sorts of scenarios including a way to display data for days or months, a scheduler control or simply a way for the user to select a date.


We’re not done yet

As these controls are still in beta, you can expect more improvements up to and beyond the final release. If you have any feature or control requests, you can let us know by posting in the Think Tank. Or if you have any questions about the metro controls, ask us in the forum.

Until next time, get the latest beta build now!

One Response to “Metro Elements Weekly Update 6”

  • Very cool I love it

  • Leave a Reply


Join our mailer

You should join our newsletter! Sent monthly:

Back to Top