I’ve been intending to make my first foray into Windows Phone development for a while now, but I had decided to put it off until I actually owned a Windows Phone device. I recently completed the 24 month contract on my previous phone (a Nokia E7 running Symbian Belle, which I was actually pretty happy with) and upgraded to a Nokia Lumia 925.
I’m very happy with the phone and I really like the Windows Phone OS… and I’m now a Windows Phone developer. I’m yet to actually publish my first app but I wanted to share with you an interesting issue I encountered and the solution I came up with. I couldn’t find any other information specific to this issue so I thought that this might be useful.
I had several pages in place to list, display, add and edit several entities so I decided I would look at adding page transitions then rather than going back and retrofitting them to every page at the end. I decided to use the TurnstileTransition on the display, add and edit pages and the TurnstileFeatherTransition on the list pages, both from the Windows Phone Toolkit.
Several of my list pages contained just a single LongListSelector. They worked fine simply by setting the TurnstileFeatherEffect.FeatheringIndex attached property for the page elements as you would expect. One of the pages contained several LongListSelectors inside a Pivot though, and that page didn’t quite work as it should. Let’s build a test app so that you can see what I mean.
Start by creating a new Windows Phone Pivot App project. We’re going to use NuGet to add the Windows Phone Toolkit package so if, like me, you have configured VS not to immediately save Windows projects, you’ll have to immediately save your project. For some reason NuGet won’t add packages to projects in a temporary location.
Once the project is saved, select Manage NuGet Packages from the Project menu. In the dialogue, select the ‘nuget.org’ item in the Online section and then search for windows phone toolkit. Install the package and you now have page transitions at you disposal.
We next need to enable transitions for all pages in the app. To do that, open the code file behind App.xaml, i.e. App.xaml.cs or App.xaml.vb. In the InitializePhoneApplication method, find the line that reads like this:
and change it to this:
If we’re going to have page transitions then we need to have at least two pages to navigate between. Our project gave us MainPage.xaml for free but we need to add a second page. From the Project menu, select Add New Item and then add a new Windows Phone Portrait Page.
Now that we have a second page to navigate to, let’s add the Turnstile transition to it. First, we’ll need to import the ‘toolkit’ namespace, so add the following attribute to the main <phone: PhoneApplicationPage> element:
You can now add the following elements inside the main element:
Notice the use of the TurnstileTransition. That’s now going to provide a nice effect whenever we navigate to or from that page.
We need to do something similar, although not exactly the same, in MainPage.xaml. The ‘toolkit’ namespace is imported the same way and the transitions follow the same pattern but, this time, we use the TurnstileFeatherTransition.
When using TurnstileFeatherTransition, we have to specify the order in which elements are animated. To do that, we add the TurnstileFeatherEffect.FeatheringIndex attached property to each of the main elements. Our MainPage.xaml contains a Pivot with two PivotItems that each contain a LongListSelector. We need to specify that the Pivot is animated first, followed by the LongListSelectors.
Obviously only the contents of one PivotItem will be displayed at a time, so only one LongListSelector will ever be animated. My first thought was just to set the indexes in sequence, i.e. 0 for the Pivot, 1 for the first LongListSelector, 2 for the second LongListSelector and so on.
We can then handle the SelectionChanged event of each LongListSelector and navigate to the second page to see our transition in action.
If you now run the project and select an item from the first list, you’ll see the intended page transition in all its glory. The items on the page flip out one after the other in a smooth series and then the next page flips in. Hit the Back button and the second page flips back and the first page appears again, one item at a time. All seems wonderful.
Now, select the second list on the pivot page and try the same thing. Something is not quite right. You’ll notice that the page title and list headers flip out first, as they should, but then there’s a little bit of a delay before the list items start to flip out. They still feather as they should but that little delay detracts from the overall UX. What to do?
Given that the first list animates correctly and the second doesn’t, I wondered whether setting the index of both lists to 1 would do the trick. That didn’t help, nor did any other combination of static values. It occurred to me that maybe changing the indexes as the selected PivotItem changes might fix the issue. As only one list can be visible, and therefore animated, at a time, I figured that it would make sense that only the selected list have a valid index. An element that doesn’t get animated has an index of –1, so I decided to not set the values in XAML but rather do it dynamically in code instead.
With that code, every time the selection in the Pivot changes, the indexes of all the lists get reset. If a PivotItem is selected then the LongListSelector it contains will have its index set to 1, otherwise the list index will be set to –1. Run the project now and you’ll see that the animation is as intended for both lists. My original project has four PivotItems and they all animate correctly so I’m assuming that it will work for an arbitrary number.
If anyone has a better solution then I’d love to hear about it but this seems to do the job well and without too much effort.