Tag: Animation

In my last post I showed you how to mimic the settings pane used in the Facebook app on windows phone through use of Visual States ( read it here… ).
But that solution was not 100% the same as in the Facebook app, it missed drag gestures.

So, let’s add those 🙂

First you’ll need to add the Windows Phone Toolkit nuget ( http://phone.codeplex.com/ )! Because it has a GestureListener, that you can hook up in XAML to almost any control. It will give you events for all possible windows phone gestures.

You’ll notice that with this, we are hooking into the DragDelta and DragCompleted events. We are going to use these events to animate our page.

In the OnDragDelta event we will check to see if there has been a Horizontal gesture detected and if so, depending on what pane is already open, show the animation on screen! Take a look at the code below and you’ll notice some tricks to get this done! Basically we calculate how far the user is dragging the content and if he get’s passed DragDistanceToOpen ( or ToClose ), we will start the rest of the animation.

If the user stops the drag gesture before reaching the given distance variable, we animate the screen to the given distance… ( through use of the SetHorizontalOffset method )

All this does is just animating the screen ‘while’ dragging.

Now next, we use the OnDragCompleted to finalize our animation, it’s almost the same code as above. The only difference now is that if the user has stopped his gesture and he has not passed the given distance, we will now reset the content to it’s original position. Giving us a ‘snap back’ animation.

To do the actual animation of the pages, we use the Animate method on the given grids ( RootGrid and SettingGrid ), here the OpenSettings example…

Now… if you’ll try this in your code you will see that some methods are missing! This because we are using some extension methods. I’m not taking credit for this, they are created by Colin Eberhardt, you can follow him on twitter https://twitter.com/ColinEberhardt or take a look at his blog http://www.scottlogic.com/blog/ceberhardt/ !

The extension methods used are: SetHorizontalOffset, GetHorizontalOffset and Animate the actual code is in the example provided below.

So with all this in place you will get a nice settings pane example with drag gestures enabled, just like the facebook app… if they do it the same way? I doubt it 😉

Result

Everything is up on my github, just take a look here https://github.com/Depechie/SettingsPageAnimation

Cheers

So, we all took a good look at the ‘new design’ we got with the new Facebook app for Windows Phone and what is one of the most remarkable changes? That the settingspane now slides in/out from the left… Take a look at it here:

So not a different page like we are used too in Windows Phone. So let’s get started at creating our own version!

Just fire up your Visual Studio and create a new Databound Windows Phone app, it will already contain a MainPage with some data on it.

Open up this MainPage.xaml and we are going to add a second Grid that is placed outside the viewingfield on the left side. So we will set it’s margin to –480. The complete xaml looks like this:

Next we just need to toggle between the 2 pages… to get this done, we’ll add an appbar with an appbar icon. Fastest way to do this is to open up the app in Blend! This can be don by right clicking the project and selecting Open in Blend…

In Blend be sure that the MainPage.xaml is open and on the Objects and Timeline pane, right click on PhoneApplicationPage and select Add ApplicationBar

After that, open the added ApplicationBar node, right click on [ApplicationBar] and select Add ApplicationBarIconButton

This will already add the icon, but to get it right select the correct Settings icon uri inside the Properties pane of the ApplicationBarIconButton

Now we need to add Visual Stats to get the facebook like behaviour! So click on the States tab on the top left side and press the Add state group button, this will add a VisualStateGroup with a Default transition inside it.

For good reference, rename the group to SettingsStateGroup ( by double clicking on the name ). Also press the Add State button twice and rename those states to SettingsOpenState and SettingsClosedState

Now select the SettingsOpenState as active item and when you do this, you will notice a ‘recording is on’ message inside the design pane! This is needed, because we are going to tweak the layout…

When the recording of SettingsOpenState is active, select the LayoutRoot grid and in the Properties tab, change the Projection – Global Offset – X value to 380

After that, select the SettingsPane grid and also change the Global Offset – X value but now to 480!

With that done there is still one thing to do in Blend and that is add an EasingFunction to the transition. This can be don by clicking the EasingFunction button of the Default Transition inside the SettingsStateGroup

In this example I select the Cubic in/out one, but you can select what you want as visual effect…

Also not forget the time frame, I’m going for 0.3sec, but also here, just toy with it…

Save the project and close Blend, now you should be back in Visual Studio, be sure to reload the project!

After this, add a Click event to the application bar icon and inside the event add following code.