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:

db4f8ae9-d926-481e-9a7f-d50c3cd5cabf

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.

2013-07-22 23_06_51-Start Page - Microsoft Visual Studio

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…

2013-07-22 23_32_09-SettingsPageAnimation - Microsoft Visual Studio

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

image

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

image

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

image

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.

image

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

image

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…

image

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

image

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

image

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

image

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

image

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

11 thoughts on “Facebook like settings pane – windows phone”

  1. I’ve been really wanting to know how to create this. Thank you for such a great write up!!

  2. Good question! For now I guess the default windows phone scaling of 800*480 would still hold. But could be the solution needs to change for the 1080p resolution…

  3. It does not exactly work when I switch from “Portrait” to “PortraitOrLandscape”. How to fix this problem.

  4. try the slideview.codeplex.com solution it is a full user control with more features

  5. Hi, unfortunately SlideView can’t be installed in a wp8.1 project. Do you know how to trigger it with a touch swipe, instead of tapping a button?

Leave a Reply

Your email address will not be published. Required fields are marked *