Facebook like settings pane – windows phone

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.

That’s it!! When everything went to plan, you should now see a nice visual effect when pressing the appbar icon, opening and closing the settings pane!

Enjoy.

Link to project: SettingsPageAnimation project