Animating list items within Windows apps 17. April 2015 Shawn Windows Apps (0) In a previous post I’ve talked about some page transitions and animations within Windows apps. There are many other locations where adding animations is very easy. One of these is animating items within any ItemsControl class. This includes controls like the ListView/GridView controls. The ItemsControl exposes the ItemContainerTransitions property. This property exposes a TransitionCollection, the same collection I talked about in the previous post. One of the key transitions you’ll want to look at is the EntranceThemeTransition. The EntranceThemeTransition defines how items will enter the region when they are rendered. It contains three properties. FromVerticalOffset and FromHorizontalOffset define the where the item should start rendering, with respect to where the final location will be. So if you have a FromVerticalOffset of 100, the item will begin an entrance animation 100 pixels below where it will end. The last property IsStaggeringEnabled, defines if all items should animate ... [More]
Tilt animation for Windows Phone Runtime 8. July 2014 Shawn Windows Phone (0) In a previous post I talked about some of the awesome animations and transitions available in Window Phone 8.1 Runtime apps. These animations and transitions were previously only available with a second SDK like the Windows Phone Toolkit or Telerik’s phone controls. One of the most used animations from both toolkit was the tilt animation. This animation shows a user that what they are touching can be tapped and will probably do something when they do tap. I also previously blogged about how you can enable the tilt animation for “unselectable” items. I am happy to say that the tilt animation is now built into all “tappable” controls without having to do anything! So you would think that would be the end of the post right? I just said “it just works”. This is true for things like ListView/GridView/Buton, but what about when you want to display a StackPanel with a few items in it and those items should be tiltable? Some work is needed to get this working and there are a few ways to accom... [More]
Creating a feathered (aka staggered) page transition 25. June 2014 Shawn Windows Phone (0) One of the most known page transitions on Windows Phone is the feather (or staggered item) transition. This is the transition you see when opening the mail app and the messages feather, or stagger in. This animation is also seen on the home page on the phone when the tiles stagger in. You usually see this transition whenever there is a list of items shown by any of the built in apps. This transition was previously only available through toolkits like the Windows Phone Toolkit or Telerik’s toolkit. Now this transition is available out of the box for Windows Phone Runtime apps. For background on page transitions in Windows Phone 8.1 Runtime apps, see my previous post. To get started, simply create a new Windows Phone Runtime app. Page transitions are enabled by default for all Runtime apps! To use this transition, you’ll want to set the page transition to use the NavigationThemeTransition with the CommonNavigationTransitionInfo. Make sure to set IsStaggeringEnabled to true for the Com... [More]
Page transitions and animations in Windows Phone Runtime apps 24. June 2014 Shawn Windows Phone (0) This is part of a series on migrating from the WP Toolkit. With the release of Windows Phone 8.1 Runtime (aka XAML apps) comes a lot of functionality that previously only existed in the Windows Phone Toolkit or other third party control suites. One of these are page transitions and animations on objects. In Windows Phone 8 apps your best option for page transitions was the Windows Phone Toolkit or Telerik. I’ve used both, but really enjoy the robustness and ease of use of Teleriks transitions. With Teleriks RadTransitionControl you could setup forward and backward animations with three lines of XAML! Contrast that with the Windows Phone Toolkit where it takes 20 lines of XAML!! Because I like Teleriks transitions this post will cover moving from the Windows Phone Toolkit or the Teleriks transitions to the new transitions in the Windows Phone Runtime. In both the Windows Phone Toolkit and Telerik you had to set the RootFrame of the App to be the control suite transition frame. ... [More]
Creating simple page transitions using Storyboards: Fly away transition 18. December 2013 Shawn Windows Phone (0) This is the third post is a series about creating simple page transitions using Storyboards. We’ve created two basic page transitions with the slide and turnstile transition. Now it’s time to get a little more complex. The mail app has what I like to call a “fly away” transition. When you tap an email, the subject flies away and the email slides up. This transition is a little more complex. Instead of animating the entire page, we only animate one control that is contained within one item of a ListBox. When the selection changes we need to animate the “header” of the selected item. The problem is that the SelectedItem of a ListBox is the bound item, and not the UI representation of that item. Good news is if we are displaying items with any type of ItemsControl, we can get the container for the bound item. An ItemsControl has a ItemContainerGenerator property that returns an instance of an ItemContainerGenerator. The ItemContainerGenerator has a ContainerFromItem method that r... [More]
Creating simple page transitions using Storyboards: Slide transition 15. December 2013 Shawn Windows Phone (0) I recently updated my app Santa Calls to include a settings page that would allow the user to delay a call or pin lock the application. When navigating to this page I wanted a nice transition, but I wanted the tree in the background to remain. To accomplish this I set the background of these pages to be the tree image and moved the content in/out when needed. I would not be able to accomplish this type of transition using an SDK like the Windows Phone Toolkit or Telerik unless I set the application background to be the tree. I did not want to do this because the phone call pages do not have this same background. The transitions are pretty simple and can be used by any page to move content up/down. I created a handy extension method that can be used by any FrameworkElement. To slide the content up into view, we need to create a Storyboard with a DoubleAnimation that will move the content (assumed to be a page) from the bottom of the page to the top. public static... [More]